Tengo esta parte de código:
serpiente.js
Código
$(document).ready(function() { // Creamos un contexto 2d de nuestro canvas var canvas = $("#snake")[0]; var context = canvas.getContext("2d"); var width = $("#snake").width(); var height = $("#snake").height(); var cellWidth = 10; var d; var food; var score; var level = 6; // 1 El nivel más lento, 10 el nivel más rápido. // contiene el listado de celdas por donde pasa la serpiente var snake; // El juego tiene la dirección "right" por defecto y se ejecuta la función paint // dependiendo el nivel que hayas configurado arriba function init() { d = "right"; createSnake(); createFood(); score = 0; if(typeof gameLoop != "undefined") { clearInterval(gameLoop); } gameLoop = setInterval(paint, 500 / level); } init(); // Creamos la serpiente function createSnake() { var length = 5; snake = []; for(var i = length - 1; i >= 0; i--) { snake.push({ x: i, y: 0 }); } } //Creamos el recuado que tiene que comerse la serpiente function createFood() { food = { x: Math.round(Math.random() * (width - cellWidth) / cellWidth), y: Math.round(Math.random() * (height - cellWidth) / cellWidth), }; } //Dibujamos la serpiente function paint() { context.fillStyle = "#ccc"; context.fillRect(0, 0, width, height); context.strokeStyle = 'black'; context.strokeRect(0, 0, width, height); var nx = snake[0].x; var ny = snake[0].y; if (d == "right") { nx++; } else if (d == "left") { nx--; } else if (d == "up") { ny--; } else if (d == "down") { ny++; } if (nx == -1 || nx == width / cellWidth || ny == -1 || ny == height / cellWidth || checkCollision(nx, ny, snake)) { init(); return; } if(nx == food.x && ny == food.y) { var tail = { x: nx, y: ny function pla(); }; score++; createFood(); } else { var tail = snake.pop(); tail.x = nx; tail.y = ny; } snake.unshift(tail); for(var i = 0; i < snake.length; i++) { var c = snake[i]; paintCell(c.x, c.y); } paintCell(food.x, food.y); var scoreText = "Score: " + score; context.fillText(scoreText, 5, height - 5); } //Pintamos la celda function paintCell(x, y) { context.fillStyle = "red"; context.fillRect(x * cellWidth, y * cellWidth, cellWidth, cellWidth); context.strokeStyle = 'white'; context.strokeRect(x * cellWidth, y * cellWidth, cellWidth, cellWidth); } //Verificiamos si hubo alguna colisión (si la hubo el juego se reinicia) function checkCollision(x, y, array) { for(var i = 0; i < array.length; i++) { if(array[i].x == x && array[i].y == y) { return true; } } return false; } // Capturamos la pulsación de las teclas $(document).keydown(function(e) { var key = e.which; if (key == "37" && d != "right") { d = "left"; } else if (key == "38" && d != "down") { d = "up"; } else if (key == "39" && d != "left") { d = "right"; } else if (key == "40" && d != "up") { d = "down"; } }); });
serpiente.html
Código
<!DOCTYPE html> <html lang="es"> <head> <meta charset="utf-8"> <style> .game { margin: 0 auto; width: 450px; } </style> </head> <body> <div class="game"> <canvas id="snake" width="450" height="450"></canvas> </div> <audio controls autoplay loop> <source src="horse.ogg" type="audio/ogg" > <source src="horse.mp3" type="audio/mpeg"> Your browser does not support the audio element. </audio> </body> </html>
Gracias de antemano