Примеры в этой статье делятся соответствующим кодом игры JS Snake для вашей ссылки. Конкретный контент заключается в следующем
<! Doctype html> <html lang = "en"> <head> <meta charset = "UTF-8"> <Title> Snake Game </title> <style>*{margin: 0; Padding: 0;} Header {Display: Block; Поле: 0 Авто; Ширина: 500px; Text-align: Center;} заголовок H1 {font-family: arial; Font-Weight: Bold;} Header #newgamebutton {display: block; Маржа: 20px Auto; Ширина: 100px; Заполнение: 10px 10px; фоновый цвет: #8F7A66; Семейство шрифта: ариальная; Цвет: белый; граница радий: 10px; Текстовое декорация: none;} заголовок #newgamebutton: hover {background-color: #9f8b77;} Header p {font-family: arial; размер шрифта: 25px; Маржа: 20px auto;} canvas {display: block; Граница: средний двойной черный; Маржа: 4px Auto;} </style> </head> <body> <header> <h1> Snake Game </h1> <a href = "javascript: newgame ();" id = "newgamebutton"> Новая игра </a> <p> Оценка: <span id = "chall"> 0 </span> </p> </header> <canvas id = "canvas"> ваш браузер не поддерживает элемент <code> canvas </code>. </canvas> <script> var canvas = document.getElementbyid ("canvas"); var ctx = canvas.getContext ("2d"); var snake = new Array (); // имитировать тело змеи с помощью очереди dir = "справа"; // Использование для управления направлением размера var gat Snake var = 20; // ширина змеиного тела var foodx = 0; // x координата продуктов питания var foody = 0; // координата y пищи var headx = 0; // x координата змеиной головки var eady = 0; // координата Y головы змеи var maxwidth = 200; // высота холста вар maxheight = 200; // ширина холста ВАР ВРЕМЯ = 400; // Скорость змеи var chall = 0; // Рассчитайте оценку игрока var interval = null; Canvas.width = maxwidth; canvas.height = maxheight; window.onload = function () {newgame ();}; document.getElementById ("newgameButton"). Click () {newgame ();}); function newgame () {snake = [];]; // Используйте очередь, чтобы имитировать тело змеи dir = "справа"; // Использование для управления направлением головы змеи Headx = 0; // x координата головы змеи головы = 0; // координата y счета головы змеи = 0; window.clearinterval (интервал); интервал = null; // Инициализировать холст ctx.clearrect (0, 0, maxwidth, maxheight); // нарисовать змею рисунок (); // портовая еда SetFood (); // Переместить интервал змеи = window.setInterval (перемещение, время);} функция перемещения () {switch (dir) {case "up": heady = heady-size; break; Case "Right": headx = headx+size; break; Case "Down": Heady = Heady+Size; Break; case "Left": headx = headx-size; break; } if (headx> maxwidth-size || heady> maxheight-size || headx <0 || heady <0) {alert («Ваш счет:«+баллы+», продолжайте усердно! Причина неудачи: я столкнулся с стеной ......»); window.location.reload (); } for (var i = 1; i <snake.length; i ++) {if (snake [i] [0] == snake [0] [0] && snake [i] [1] == snake [0] [1]) {alert («Ваш счет:«+баллы+», оставайте усердную работу! Причина неудачи: я врезался в себя ....»); window.location.reload (); }} if (snake.length == maxwidth *maxheight) {alert ("так круто! ~"); window.location.reload (); } moveIn (headx, heady); // Переместить одну сетку} document.onkeydown = function (e) {// изменять направление змеи var code = e.keycode - 37; Switch (code) {case 1: dir = "up"; break; // в случае 2: dir = "right"; break; // правое дело 3: dir = "down"; break; // down case 0: dir = «Слева»; Break; // слева}} // ====================================================================================================================== ==================================================================== ===================================================================== ==================================================================== ===================================================================== ===================================================================== ===================================================================== Snake.push ([headx, Heady]); // рисование переключателя тела змеи (dir) {case "up": drawbody (headx, heady + size, headx, heady + 2 * size); перерыв; Case "Право": Drawbody (Headx - размер, головокружительный, Headx - 2 * Size, Heady); перерыв; Case "Down": Drawbody (Headx, Heady - размер, Headx, Heady - 2 * Size); перерыв; Case "Left": Drawbody (Headx + Size, Headx, Headx + 2 * Size, Heady); перерыв; }} функция DrawBody (x1, Y1, x2, y2) {ctx.fillRect (x1, y1, size, size); Ctx.fillrect (x2, y2, размер, размер); Snake.push ([x1, y1]); Snake.push ([x2, y2]);} // ================================================================ ======================================================================= ======================================================================= ======================================================================= ======================================================================= ======================================================================= ======================================================================= ======================================================================= Foody, size, size);} function foodinsnake () {for (var i = 0; i <snake.length; i ++) {if (foodx == snake [i] [0] && foody == snake [i] [1]) {return true; } } возвращаться false;} // =========================================================================================== ========================================================================================= ========================================================================================= ========================================================================================== Ctx.fillRect (x, y, size, size); // re-draw головки змеи // Добавить новую головку змеи в массив змеи var newsnake = [[x, y]]; Snake = newsnake.concat (Snake); if (false == eatfood ()) {// Если вы не едите пищу, уменьшите один змеиный хвост var snaketail = snake.pop (); // Получить положение хвоста змеи ctx.clearrect (snaketail [0], snaketail [1], size, size); // Удалить хвост Snake}} eatFood eatFood () {if wardy widy widy wieDy wieDy wieDy) Ctx.fillstyle = "block"; Ctx.fillrect (Foodx, Foody, размер, размер); setFood (); Счет ++; // $("#score").text(score); document.getElementById ("SCORE"). InnerHTML = SCORD; вернуть истину; } вернуть false;} </script> </html>Изображение воспроизведения:
Идеи:
function newgame () {сбросить данные змеи и фракций; четкий интервал; инициализировать холст; Нарисуйте змею; Поместите еду; Используйте таймер (setInterval), чтобы переместить змею (функция перемещения); } function move () {изменить положение следующей широты головки змеи в соответствии с направлением; определить, закончилась ли игра, и причина конца (включая победу или проигрыш); Змея перемещает одну широту (функция перемещения); } контролировать клавиши направления клавиатуры и изменить значение глобальной переменной Dir (используется для хранения направления); function movein () {добавить широту к предыдущей широте головки змеи в качестве новой змеиной головки и добавьте координаты змеиной головки в качестве первого элемента к массиву, представляющему змею; Если (пища не была съедена) {Удалить широту в хвост змеи и внести соответствующие изменения в холсте; }}Следует отметить, что если вам нужно установить ширину и высоту в холсте в JS, это немного отличается от установки других свойств CSS.
Canvas.width = maxwidth; canvas.height = maxheight;
Редактор также подготовил прекрасную тему для всех: резюме классических игр JavaScript
Выше приведено в этой статье, я надеюсь, что для всех будет полезно изучить программирование JavaScript.