Создание начального экрана для HTML5 Canvas Game?

Question

Большинство из нас знает, что элемент HTML5 Canvas гораздо лучше поддерживается этими удивительно быстрыми движками Javascript от Firefox, Safari и Chrome.

Так что недавно я экспериментировал с разработкой игр с использованием Javascript и Canvas, и мне интересно, что было бы хорошим подходом для создания начального экрана для игры на Javascript.

Пока единственной идеей, которую я имею, было бы создание пользовательского интерфейса перед игрой, наполнение Javascript и использование прослушивателей событий для отслеживания мыши и нажатия кнопок. Но я не уверен, что это мудрый поступок.

Какой хороший способ использовать стартовый экран и т. Д. В игре на JavaScript? Любая помощь будет полезна, спасибо!

ОБНОВЛЕНИЕ: Спасибо за молниеносный быстрый ответ! Многие из вас предлагают разместить img до тех пор, пока игра не загрузится и т. Д. Так что мне нужно написать менеджер ресурсов или что-то вроде этого, чтобы проверить, загружены ли все изображения и т. Д.?

Answer 1

Заполните тег 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>

Answer 2

Простой, используйте обычный HTML img, который расположен «над» вашим холстом, пока все не будет загружено / инициализировано.