Los ejemplos en este artículo comparten el código relevante del juego JS Snake para su referencia. El contenido específico es el siguiente
<! DocType html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> juego de serpiente </title> <style>*{margin: 0; Pading: 0;} encabezado {Display: Block; margen: 0 auto; Ancho: 500px; Text-Align: Center;} Header H1 {Font-Family: Arial; Font-Weight: Bold;} Header #NewGameButton {display: block; Margen: 20px Auto; Ancho: 100px; relleno: 10px 10px; Color de fondo: #8F7A66; Font-Family: Arial; Color: blanco; Border-Radius: 10px; TEXT-DECORACIÓN: NINGUNO;} Encabezado #NewGameButton: Hover {Background-Color: #9F8B77;} Header P {Font-Family: Arial; tamaño de fuente: 25px; margen: 20px automático;} lienzo {display: block; borde: medio doble negro; Margen: 4px Auto;} </style> </head> <body> <curebel> <h1> juego de serpiente </h1> <a href = "javascript: newgame ();" id = "NewGameButton"> New Game </a> <p> Score: <Span ID = "Score"> 0 </span> </p> </header> <Canvas id = "Canvas"> Su navegador no es compatible con el elemento <code> Canvas </code>. </Canvas> <Script> var canvas = document.getElementById ("Canvas"); var ctx = Canvas.getContext ("2d"); var serpiente = new array (); // simular el cuerpo del cuerpo de serpiente con una cola dir = "correcto"; // Use para controlar la dirección del tamaño del cabezal de serpiente = 20; // ancho del cuerpo de serpiente var foodx = 0; // La coordenada x de la comida var foody = 0; // La coordenada y de la alimentación var headx = 0; // La coordenada x de la cabeza de serpiente var cabeza = 0; // La coordenada y de la cabeza de serpiente var maxwidth = 200; // La altura del lienzo var maxheight = 200; // El ancho del lienzo var tiempo = 400; // La velocidad de la puntuación de serpiente var = 0; // Calcule la puntuación del jugador Var Interval = NULL; Canvas.width = maxwidth; canvas.height = maxheight; window.onload = function () {newGame ();}; document.getElementById ("newGameButton"). Click (function () {newGame ();}); function newGame () {snake = []; // Use la cola para simular el cuerpo de serpiente dir = "correcto"; // Use para controlar la dirección de la cabeza del cabezal de serpiente = 0; // La coordenada x de la cabeza de la serpiente Heady = 0; // La coordenada y del puntaje de cabeza de serpiente = 0; Window.ClearInterval (intervalo); intervalo = nulo; // Inicializar el lienzo CTX.ClearRect (0, 0, maxwidth, maxHeight); // dibujar una serpiente DrawSnake (); // Port Food SetFood (); // Mover Snake Interval = Window.SetInterval (Move, Time);} function Move () {switch (dir) {case "arriba": heady = heady-size; break; Caso "correcto": headx = headx+size; break; Caso "Down": Heady = Heady+Size; Break; Caso "izquierda": headx = headx-size; break; } if (headx> maxwidth-size || heady> maxHeight-size || headx <0 || heady <0) {alerta ("Su puntaje es:"+puntaje+"puntos, sigue trabajando duro! Window.location.Reload (); } for (var i = 1; i <snake.length; i ++) {if (serpiente [i] [0] == serpiente [0] [0] && serpiente [i] [1] == serpiente [0] [1]) {alerta ("Su puntaje es:"+puntaje+"Puntos, sigue trabajando duro! Window.location.Reload (); }} if (snake.length == maxwidth *maxHeight) {alerta ("¡tan increíble! ~"); Window.location.Reload (); } MoveIn (Headx, Heady); // Mover una cuadrícula} document.onkeydown = function (e) {// Cambia la dirección de serpiente var código = E.KeyCode - 37; Switch (código) {caso 1: dir = "up"; break; // on Case 2: dir = "right"; break; // right Case 3: dir = "down"; break; // down caso 0: dir = "left";break;//Left}}//================================================================================================ ============================================================= ============================================================== ============================================================= ============================================================== ============================================================== ============================================================== Snake.push ([Headx, Heady]); // Dibujo el interruptor del cuerpo de la serpiente (Dir) {Case "arriba": DrawBody (Headx, Heady + Size, Headx, Heady + 2 * tamaño); romper; Caso "Right": DrawBody (Headx - Tamaño, Heady, Headx - 2 * Tamaño, Heady); romper; Caso "Down": Drawbody (Headx, Heady - Tamaño, Headx, Heady - 2 * Tamaño); romper; Caso "izquierda": DrawBody (Headx + Size, Heady, Headx + 2 * Tamaño, Heady); romper; }} function drawBody (x1, y1, x2, y2) {ctx.fillrect (x1, y1, tamaño, tamaño); Ctx.fillrect (x2, y2, tamaño, tamaño); Snake.push ([x1, y1]); Snake.push ([x2, y2]);} // ========================================================== ====================================================================== ====================================================================== ====================================================================== ====================================================================== ====================================================================== ====================================================================== ====================================================================== Foody, tamaño, tamaño);} function FoodInsnake () {for (var i = 0; i <snake.length; i ++) {if (foodx == serpiente [i] [0] && foody == serpiente [i] [1]) {return true; } } devolver false;}//================================================================================================ ==================================================================================================================================================================================================================================================================================================. ==================================================================================================================================================================================================================================================================================================. ========================================================================================================== Ctx.fillrect (x, y, tamaño, tamaño); // volver a dar la cabeza de serpiente // Agregar el nuevo cabezal de serpiente a la matriz de serpientes var Newsnake = [[x, y]]; Serpiente = newsnake.concat (serpiente); if (false == eatfood ()) {// Si no come alimentos, reduzca una cola de serpiente var snaketail = snake.pop (); // Obtenga la posición de cola de serpiente Ctx.ClearRect (snaketail [0], snaketail [1], size, size); // Eliminar la cola de serpiente}} function eatfood () {if (headx == heady == alimentamente) Ctx.fillstyle = "bloque"; Ctx.fillrect (FoodX, Foody, tamaño, tamaño); setFood (); Puntaje ++; //$(("#score").text( spore); document.getElementById ("Score"). InnerHtml = Score; devolver verdadero; } return false;} </script> </html>Imagen de reproducción:
Ideas:
function newGame () {restablecer los datos de serpiente y fracciones; intervalo claro; inicializar el lienzo; dibujar una serpiente; colocar comida; use un temporizador (setInterval) para mover la serpiente (mude la función); } function Move () {Cambie la posición de la siguiente latitud de la cabeza de la serpiente de acuerdo con la dirección; determinar si el juego ha terminado y el motivo del final (incluida la ganancia o la pérdida); La serpiente mueve una latitud (función de movimiento); } Monitoree las teclas de dirección del teclado y modifique el valor del Dir de la variable global (utilizado para almacenar la dirección); Función MoveIn () {Agregue una latitud a la latitud anterior de la cabeza de serpiente como una nueva cabeza de serpiente, y agregue las coordenadas de la cabeza de la serpiente como el primer elemento a la matriz que representa la serpiente; if (no se comió alimentos) {eliminar una latitud a la cola de la serpiente y realizar cambios correspondientes en el lienzo; }}Cabe señalar que si necesita establecer el ancho y la altura en el lienzo en JS, es ligeramente diferente de configurar otras propiedades CSS.
Canvas.width = maxwidth; canvas.height = maxHeight;
El editor también ha preparado un tema maravilloso para todos: un resumen de los juegos clásicos de JavaScript
Lo anterior se trata de este artículo, espero que sea útil para todos aprender la programación de JavaScript.