創建HTML5 Canvas遊戲的開始屏幕？

我們大多數人都知道HTML5 Canvas元素對Firefox，Safari和Chrome這些速度驚人的Javascript引擎有更好的支持。創建HTML5 Canvas遊戲的開始屏幕？

所以最近我一直在用Javascript和Canvas進行遊戲開發的實驗，我想知道爲Javascript遊戲創建一個Start Screen的好方法。

到目前爲止，我唯一的想法是在遊戲之前創建一個UI，並使用Javascript創建一個UI，並使用Event Listeners來跟蹤鼠標以及它們何時單擊按鈕。但我不確定這是否明智。

在Javascript遊戲中，啓動屏幕等有什麼好的方法？任何幫助將是有用的，謝謝！

更新：感謝您的快速回復（s）！很多人建議放置一個img，直到遊戲加載，等等。所以我需要編寫一個資產管理器或某種排序 - 檢查何時加載所有圖像等？

來源

2011-12-23 Dropped43

我不知道你是否需要得到那個複雜。這聽起來像你只是想顯示一個介紹屏幕，也許有一個標題和一些說明。請參閱下面的代碼示例更新的答案。祝你好運！ – 2011-12-23 18:59:28

是的，只是一個介紹屏幕和東西。我看着你更新的答案，它看起來很簡單！謝謝，我會玩弄它。 – Dropped43 2011-12-23 19:03:37

太棒了！如果您使用它，請選擇我的答案爲正確的（綠色複選標記）。我真的可以使用這些要點！ – 2011-12-23 19:04:21

用你的啓動畫面填寫一個div標籤。讓它在頁面加載時顯示並隱藏您的畫布。爲div標籤添加一個'開始'按鈕，並在其上單擊事件，隱藏閃屏div標籤並使用jQuery或經典JavaScript顯示畫布。

下面是使用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>

來源

2011-12-23 18:52:41

簡單，使用常規的HTML img，直到一切都被裝載/初始化的是「上面」畫布位置。

來源

2011-12-23 18:53:05 ColinE

創建HTML5 Canvas遊戲的開始屏幕？

回答

相關問題