Tạo màn hình bắt đầu cho Trò chơi Canvas HTML5?

Question

Hầu hết chúng ta đều biết rằng yếu tố HTML5 Canvas đang có hỗ trợ tốt hơn nhiều với các Công cụ Javascript nhanh đáng kinh ngạc này từ Firefox, Safari và Chrome.

Vì vậy, gần đây tôi đã thử nghiệm phát triển trò chơi bằng Javascript và Canvas và tôi tự hỏi điều gì sẽ là cách tiếp cận tốt để tạo màn hình bắt đầu cho trò chơi Javascript. Cho đến nay, ý tưởng duy nhất tôi có là tạo giao diện người dùng trước trò chơi và nội dung với Javascript và sử dụng Trình nghe sự kiện để theo dõi chuột và khi họ nhấp vào nút. Nhưng tôi không chắc đây có phải là điều khôn ngoan hay không.

Cách tốt nhất để đi về màn hình bắt đầu, v.v ... trong trò chơi Javascript là gì? Bất kỳ trợ giúp sẽ hữu ích, cảm ơn!

CẬP NHẬT: Cảm ơn bạn đã trả lời nhanh chóng! Rất nhiều bạn đang đề xuất đặt một img cho đến khi trò chơi tải, vv Vì vậy, tôi cần phải viết một người quản lý tài sản hoặc một số loại - để kiểm tra khi tất cả các hình ảnh vv được nạp?

Answer 1

Nhập thẻ div bằng màn hình giật gân của bạn. Có nó hiển thị trên tải trang và có vải của bạn ẩn. Thêm nút 'bắt đầu' vào thẻ div và trên sự kiện nhấp chuột của nó, ẩn thẻ div màn hình giật gân và hiển thị canvas bằng cách sử dụng jQuery hoặc JavaScript cổ điển.

Dưới đây là một số mẫu mã sử dụng jQuery:

<div id="SplashScreen"> 
<h1>Game Title</h1> 
<input id="StartButton" type="button" value="Start"/> 
</div> 

<canvas id="GameCanvas" style="display: none;">Game Stuff</canvas> 

<script> 
    $("#StartButton").click(function() { 
     $("#SplashScreen").hide(); 
     $("#GameCanvas").show(); 
    }); 
</script> 

Answer 2

đơn giản, sử dụng một HTML thông thường img mà nằm 'ở trên' canvas của bạn cho đến khi tất cả mọi thứ được nạp/khởi tạo.