Os exemplos deste artigo compartilham o código relevante do JS Snake Game para sua referência. O conteúdo específico é o seguinte
<! Doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> jogo de cobra </title> <style>*{margem: 0; preenchimento: 0;} cabeçalho {display: block; margem: 0 automático; Largura: 500px; Alinhamento de texto: Centro;} Cabeçalho H1 {Font-Family: Arial; Fonte-peso: BOLD;} Cabeçalho #NewGameButton {Display: Block; margem: 20px automático; Largura: 100px; preenchimento: 10px 10px; Background-Color: #8F7A66; Fonte-família: Arial; Cor: Branco; Radio de fronteira: 10px; Decoração de texto: Nenhum;} Cabeçalho #NewGameButton: Hover {Background-Color: #9F8B77;} Cabeçalho P {Font-Family: Arial; Size da fonte: 25px; margem: 20px automático;} tela {display: block; Fronteira: preto duplo médio; Margem: 4px Auto;} </style> </weef> <body> <weweler> <h1> jogo de cobra </h1> <a href = "javascript: newgame ();" id = "newGameButton"> novo jogo </a> <p> pontuação: <span id = "score"> 0 </span> </p> </weader> <canvas id = "canvas"> seu navegador não suporta o elemento <code> canvas </code>. </canvas> <cript> var Canvas = document.getElementById ("Canvas"); var ctx = canvas.getContext ("2d"); var snake = new Array (); // simular o corpo da cobra var com uma fila dir = "direita"; // Use para controlar a direção da cabeça da cobra var tamanho = 20; // Largura do corpo da cobra var foodx = 0; // a coordenada x do alimento var alimentador = 0; // a coordenada y do alimento var headx = 0; // a coordenada x da cabeça da cobra var cabeça = 0; // a coordenada y da cabeça da cobra var maxwidth = 200; // a altura da tela var maxHeight = 200; // a largura da tela var time = 400; // a velocidade da pontuação de cobra var = 0; // calcule a pontuação do jogador var interval = nulo; Canvas.width = maxWidth; canvas.Height = maxHeight; window.onload = function () {newGame ();}; document.getElementById ("newGameButton"). Click (function () {newgame ();}); functiongame () {skey = []; // Use a fila para simular o corpo da cobra Dir = "Right"; // Use para controlar a direção da cabeça da cobra Headx = 0; // a coordenada x da cabeça de cobra e cabeça = 0; // a coordenada y da pontuação da cabeça da cobra = 0; window.clearInterval (intervalo); intervalo = nulo; // inicialize o canvas ctx.clearrect (0, 0, maxwidth, maxHeight); // desenhe um drawsnake de cobra (); // Port Food Setfood (); // mova intervalo de cobra = window.setInterval (move, tempo);} função move () {switch (dir) {case "up": heady = inebriaz-size; break; caso "direita": Headx = Headx+Tamanho; quebra; case "para baixo": inebriante = inebriante+tamanho; quebra; caso "esquerda": Headx = Headx-Size; quebra; } if (Headx> MaxWidth-Size || Heady> MaxHeight-Size || Headx <0 || Heady <0) {alert ("Sua pontuação é:"+pontuação+"pontos, continue trabalhando duro! Motivo do fracasso: eu encontrei uma parede ......"); window.Location.Reload (); } para (var i = 1; i <Snake.Length; i ++) {if (Snake [i] [0] == Snake [0] [0] && Snake [i] [1] == Snake [0] [1]) {alert ("sua pontuação é:"+pontuação ", Points, Mantenha Trabalhando duro! Razão para a falha: I Bump in Myer. window.Location.Reload (); }} if (snake.length == maxwidth *maxHeight) {alert ("tão incrível! ~"); window.Location.Reload (); } movein (Headx, Heady); // Mova uma grade} document.onKeydown = function (e) {// altere a direção da cobra var code = e.KeyCode - 37; switch (code) {case 1: dir = "up"; break; // no caso 2: dir = "direita"; quebrar; // Caso direito 3: dir = "down"; quebrar; // Caso 0: dir = "left";break;//Left}}//================================================================================================ ============================================================== ============================================================== ============================================================== ============================================================== ============================================================== ============================================================== Cobra.push ([Headx, Heady]); // desenhar o interruptor do corpo da cobra (dir) {case "up": drawbody (headx, cabeça + tamanho, cabeçalho, cabeça + 2 * tamanho); quebrar; Case "Direita": DrawBody (Headx - Tamanho, Heady, Headx - 2 * Tamanho, Heady); quebrar; Case "Down": DrawBody (Headx, Heady - Tamanho, Headx, Heady - 2 * Tamanho); quebrar; Case "Esquerda": drawbody (Headx + Tamanho, Heady, Headx + 2 * Tamanho, Heady); quebrar; }} função drawbody (x1, y1, x2, y2) {ctx.fillrect (x1, y1, tamanho, tamanho); Ctx.fillRect (x2, y2, tamanho, tamanho); Cobra.push ([x1, y1]); Cobra.push ([x2, y2]);} // ========================================================= ================================================================== ================================================================== ================================================================== ================================================================== ================================================================== ================================================================== ================================================================== Foody, tamanho, tamanho);} função FoodInsnake () {for (var i = 0; i <snake.length; i ++) {if (Foodx == Snake [i] [0] && Foody == Snake [i] [1]) {return true; } } retornar false;}//================================================================================================ ========================================================================================================= ========================================================================================================= ========================================================================================================== Ctx.fillrect (x, y, tamanho, tamanho); // re-desgaste a cabeça da cobra // Adicione a nova cabeça de cobra à matriz de cobras var newsnake = [[x, y]]; Cobra = newsnake.concat (cobra); if (false == EatFood ()) {// Se você não comer comida, reduza uma cauda de cobra var snaketail = Snake.pop (); // Obtenha a posição da cauda da cobra ctx.clearrect (snaketail [0], snaketail [1], tamanho, tamanho); // Remova a cauda e a cauda/} função () (snaketail), snaketail (snaketail); Ctx.fillstyle = "bloco"; Ctx.FillRect (Foodx, Foody, Tamanho, Tamanho); setfood (); Pontuação ++; //$("#SCORE").TEXT(Score); Document.getElementById ("Score"). Innerhtml = Score; retornar true; } return false;} </cript> </html>Imagem de reprodução:
Ideias:
function newgame () {redefinir os dados de cobra e frações; intervalo claro; Inicialize a tela; desenhe uma cobra; colocar comida; Use um timer (setInterval) para mover a cobra (função de mover); } função move () {altere a posição da próxima latitude da cabeça da cobra de acordo com a direção; Determine se o jogo terminou e o motivo do fim (incluindo Win ou Lose); Cobra move uma latitude (função movein); } Monitore as teclas de direção do teclado e modifique o valor da variável global DIR (usada para armazenar a direção); função movein () {adicione uma latitude à latitude anterior da cabeça da cobra como uma nova cabeça de cobra e adicione as coordenadas da cabeça da cobra como o primeiro elemento à matriz que representa a cobra; se (nenhum alimento foi comido) {exclua uma latitude à cauda da cobra e fizer alterações correspondentes na tela; }}Deve -se notar que, se você precisar definir a largura e a altura em tela em JS, é um pouco diferente de definir outras propriedades CSS.
Canvas.width = maxWidth; Canvas.Height = maxHeight;
O editor também preparou um tópico maravilhoso para todos: um resumo dos jogos clássicos de JavaScript
O exposto acima é tudo sobre este artigo, espero que seja útil para todos aprenderem a programação de JavaScript.