Автор оригинала: FreeCodeCamp Community Member.
Panayiotis Nicolaou
Привет ?
Добро пожаловать на борт. Сегодня мы отправимся на захватывающее приключение, где мы сделаем нашу собственную игру змеи? Вы узнаете, как работать через проблему, нарушая его на более мелкие простые шаги. К концу этого путешествия вы узнаете некоторые новые вещи, и вы почувствуете себя уверенно, чтобы узнать больше самостоятельно.
Если вы новичок в программировании, я рекомендую проверить FreeCodeCamp. Это отличное место, чтобы научиться … Вы догадались … бесплатно. Вот как я начал?
Хорошо, достаточно в порядке, Мессинг вокруг – ты готов начать?
Начиная
Давайте начнем с создания файла «Snake.html», который будет содержать весь наш код.
Поскольку это HTML-файл, первое, что нам нужно, это PE> Декларация Отказ В Снаке E.HTML Введите следующее:
Отлично, теперь иди и откройте Snake.html В вашем предпочтительном браузере. Вы должны быть в состоянии увидеть Добро пожаловать в змею!
Мы доброй старт?
Создание холста
Чтобы быть в состоянии создать нашу игру, мы должны использовать HTML
Замените приветственное сообщение в Snake.html со следующим:
ID – это то, что идентифицирует холст и всегда должен быть указан. Мы будем использовать его для доступа к холсту позже. Ширина и высота – это размеры холста, а также должны быть указаны. В этом случае 300 х 300 пикселей.
Ваш файл Snake.html теперь должен выглядеть так.
Если вы обновите страницу браузера, где вы ранее открылись Snake.html Теперь вы увидите пустую страницу. Это связано с тем, что по умолчанию холст пуст и не имеет фона. Давайте исправим это. ?
Дать холст фоновой цвет и границу
Чтобы сделать наш холст видимым, мы можем дать ему границу, написав несколько JavaScript Code. Для этого нам нужно вставить