Комментарий: это игра с пинг-понгом с двумя игроками, использующими конкурс клавиатуры; В этой главе мы будем: 1. Подготовьте инструмент разработки 2. Создайте нашу первую игру - Ping Pong 3. Научитесь использовать библиотеку JQUERY JavaScript для базового позиционирования 4. Получить ввод клавиатуры
В этой главе мы будем:
Подготовьте инструменты разработки
Создайте нашу первую игру - Ping Pong
Научитесь использовать библиотеку JQUERY JavaScript для базового позиционирования
Получите ввод клавиатуры
Создание игры Ping Pong с помощью забивания
Следующие скриншоты игры являются результатами нашего исследования в этой главе. Это игра Ping Pong с 2 игроками, играющими на клавиатуре.
Итак, давайте начнем создавать нашу игру сейчас.
Подготовьтесь к среде развития
Разработка игры HTML5 и разработка веб -сайтов похожи. Нам нужен веб -браузер и отличный инструмент для редактирования текста.
Многие инструменты для редактирования текста превосходны, просто используйте то, что вам нравится. Если у вас его нет, я рекомендую вам использовать Notepad ++, небольшой и быстрый инструмент редактирования. Что касается браузеров, нам нужен браузер, который поддерживает функции HTML5, CSS3 и может быть предоставлен инструменты отладки.
Есть несколько браузеров на выбор: Apple Safari (), Google Chrome (), Mozilla Firefox () и Opera (), которые поддерживают необходимые нам функции.
Подготовьте HTML -документы
Каждый веб -сайт, страница и HTML5 начинаются с документа HTML по умолчанию. И этот документ HTML начинается с базового HTML -кода. Мы также начнем нашу разработку игры HTML5 с index.html.
Время действия
Мы создадим нашу игру HTML5 Ping Pong с нуля. Похоже, мы должны подготовить все сами, и, по крайней мере, мы смогли помочь нам с библиотекой JavaScript. JQuery - такая библиотека JavaScript, мы будем использовать ее во всех наших примерах. Это поможет упростить нашу логику JavaScript:
1. Создайте новую папку под названием Pingpong
2. Создайте еще одну папку с названием JS в папке
3. Скачать jQuery.
4. Выберите «Производство» и нажмите «Скачать».
5. Сохранить jquery-1.7.1.min.js в папке, которую мы создали 2
6. Создайте новый файл с именем index.html и сохраните его в папке, созданной 1.
7. Откройте файл index.html с текстовым редактором и вставьте пустой шаблон HTML:
<! Doctype html>
<html lang = "en">
<голова>
<meta charset = "utf-8">
<title> ping pong </title>
</head>
<тело>
<заголовок>
<h1> ping pong </h1>
</header>
<нижний колонтитул>
Это пример создания игры Ping Pong.
</cooler>
</body>
</html>
8. См. Файл jQuery перед тегом End Body
<script src = js/jquery-1.7.1.min.js> </script>
9. Наконец, мы хотим убедиться, что jQuery успешно загружен. Обычно мы размещаем следующий код для проверки после файла jQuery перед тегом конечного тела:
<Скрипт>
$ (function () {
Блюдо (добро пожаловать в битву Ping Pong.);
});
</script>
10. Сохраните index.html и откройте его с вашим браузером. Мы должны увидеть следующее окно приглашения. Это означает, что наш jQuery установлен правильно:
что случилось?
Мы только что создали базовую страницу HTML5 с JQUERY и позаботились о том, чтобы jQuery загружен правильно.
Новый HTML5 Doctype
Как Doctype, так и метатеги упрощены в HTML5.
В HTML4.01 мы заявляем, что Doctype требует следующего кода:
<! Doctype html public "-// w3c // dtd html 4.01 // en" "http://www.w3.org/tr/html4/strict.dtd">
Это долго, верно? Однако в HTML5 объявление Doctyp намного проще:
<! Doctype html>
Мы даже не объявили версию HTML, что означает, что HTML5 будет совместим с предыдущими версиями HTML, а будущие версии HTML также будут поддерживать версии HTML5.
Метаги также были упрощены. Теперь мы используем следующий код для определения набора символов HTML:
<meta charset = utf-8>