Создание стартового экрана для холст-игры HTML5?

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

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

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

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

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

источник

2011-12-23 Dropped43

Я не знаю, нужен ли вам этот комплекс. Похоже, вы просто хотите показать вступительный экран, возможно, с заголовком и некоторыми инструкциями. См. Мой обновленный ответ ниже с образцом кода. Удачи! –

Да, просто экран и прочее. Я посмотрел на ваш обновленный ответ, и это кажется очень простым! Спасибо, я поиграю с ним. – Dropped43

Отлично! Пожалуйста, выберите мой ответ как правильный (зеленая галочка), если вы его используете. Я мог бы использовать очки! –

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

ответ

Смежные вопросы