Предлагаю простую игру Бомбермен для самостоятельного разбора. Скачайте архив по ссылке https://github.com/alexeizuzin/kids-bomberman/archive/master.zip , разархивируйте и откройте в браузере файл index.html
Управление: стрелки клавиатуры и пробел — положить бомбу. Чтобы начать заново — обновите страницу.
В архиве находится 4 файла:
document.txt, где я предварительно сделал текстовое описание программы;
index.html, основной файл, в который подключаются стили и программа;
style.css со стилями html-элементов;
script.js с программной частью игры.
Порядок создания игры у меня был такой:
1. Сделал текстовое описание.
2. Создал файлы index.html и style.css и начал поочередно вставлять теги и настраивать стили. Вначале создал поле <div class="pole" id="id_pole"></div> и прикрутил стили, затем все остальные элементы. Когда все элементы были созданы, я скрыл элементы, которые не должны показываться вначале с помощью css-свойства display: none.
3. Создал файл программы (script.css) и начал добавлять туда переменные и функции по плану.
4. Написал комментарии в программе для лучшего понимания кода.
Если появятся вопросы, задавайте — буду рад ответить в комментариях!
Управление: стрелки клавиатуры и пробел — положить бомбу. Чтобы начать заново — обновите страницу.
В архиве находится 4 файла:
document.txt, где я предварительно сделал текстовое описание программы;
index.html, основной файл, в который подключаются стили и программа;
style.css со стилями html-элементов;
script.js с программной частью игры.
Порядок создания игры у меня был такой:
1. Сделал текстовое описание.
2. Создал файлы index.html и style.css и начал поочередно вставлять теги и настраивать стили. Вначале создал поле <div class="pole" id="id_pole"></div> и прикрутил стили, затем все остальные элементы. Когда все элементы были созданы, я скрыл элементы, которые не должны показываться вначале с помощью css-свойства display: none.
3. Создал файл программы (script.css) и начал добавлять туда переменные и функции по плану.
4. Написал комментарии в программе для лучшего понимания кода.
Если появятся вопросы, задавайте — буду рад ответить в комментариях!
Комментариев нет:
Отправить комментарий