var canvas = document.

getElementById('game');
var context = canvas.getContext('2d');

var avance = 16;

var count = 0;

var snake = {
// posición inicial de la serpiente
x: 160,
y: 160,

// movimiento de serpiente de 1 cuadro en x o y, empieza en x a la derecha

dx: avance,
dy: 0,

// para seguimiento de las cuadros que ocupa el cuerpo de la serpiente

cells: [],

// crecimiento de la cerpiente al tomar bonus, inicia en 4

maxCells: 4
};
var bonus = {
// posición inicial del bonus
x: 320,
y: 320
};

// funcion para obtener numero aleatorio en un rango

function getRandomInt(min, max) {
return Math.floor(Math.random() * (max - min)) + min;
}

// bucle del juego que realiza todo

function loop() {
requestAnimationFrame(loop);
// condición que reduce la velocidad natural del juego a 15fps (60/15 = 4)
// si se quiere mas rapido bajar el número, si se requiere mas lento subirlo
if (++count < 4) {
return;
}
count = 0;
// refresco de la animación del avance de la serpiente
context.clearRect(0, 0, canvas.width, canvas.height);

// movimiento de serpiente en X y Y
snake.x += snake.dx;
snake.y += snake.dy;

// si la serpiente pasa el límite horizontal

if (snake.x < 0) {
snake.x = canvas.width - avance;
} else if (snake.x >= canvas.width) {
snake.x = 0;
}

// si la serpiente pasa el límite vertical

if (snake.y < 0) {
snake.y = canvas.height - avance;
} else if (snake.y >= canvas.height) {
snake.y = 0;
}

// Almacena datos de dónde ha pasado la serpiente

snake.cells.unshift({
x: snake.x,
y: snake.y
});

// Actualiza datos de dónde ha estado la serpiente según se avanza

if (snake.cells.length > snake.maxCells) {
snake.cells.pop();
}

// dibuja el bonus y da color rojo

context.fillStyle = '#8E1E06';
context.fillRect(bonus.x, bonus.y, avance, avance);

// dibuja la serpiente cada celda que avanza y da color verde

context.fillStyle = '#368018';
snake.cells.forEach(function(cell, index) {

//dibuja un cuadro 1 pixel mas pequeño que el inicial para apreciar el creimiento
context.fillRect(cell.x, cell.y, avance - 1, avance - 1);

// al comer el bonus aunmentamos el tamaño, margen de proximidad de 8px

if ((cell.y - bonus.y >= -8 && cell.y - bonus.y <= 8) &&
(cell.x - bonus.x >= -8 && cell.x - bonus.x <= 8)) {
snake.maxCells++;
//el bonus aparece en otro lado del tablero aleatorio
bonus.x = getRandomInt(1, 25) * avance;
bonus.y = getRandomInt(1, 25) * avance;
}

// compara si la posición actual de la cabeza choca con alguna parte del cuerpo
for (var i = index + 1; i < snake.cells.length; i++) {
// si choca con el cuerpo el juego se reinicia
if (cell.x === snake.cells[i].x && cell.y === snake.cells[i].y) {
snake.x = 160;
snake.y = 160;
snake.cells = [];
snake.maxCells = 4;
snake.dx = avance;
snake.dy = 0;
bonus.x = getRandomInt(1, 25) * avance;
 bonus.y = getRandomInt(1, 25) * avance;
}
}
});
}

// Detección de eventos del teclado

document.addEventListener('keydown', function(e) {
// Usamos los codigos de las flechas y condición doble AND
//para evitar que la serpiente pueda ir en dirección opuesta

// flecha izquierda | codigo tecla=37

if (e.which === 37 && snake.dx === 0) {
snake.dx = -avance;
snake.dy = 0;
}
// flecha arriba | codigo tecla==38
else if (e.which === 38 && snake.dy === 0) {
snake.dy = -avance;
snake.dx = 0;
}
// flecha derecha | codigo tecla==39
else if (e.which === 39 && snake.dx === 0) {
snake.dx = avance;
snake.dy = 0;
}
// flecha abajo | codigo tecla=40
else if (e.which === 40 && snake.dy === 0) {
snake.dy = avance;
snake.dx = 0;
}
});

// Inicia el juego
requestAnimationFrame(loop);
var canvas = document.getElementById('game');
var context = canvas.getContext('2d');

var avance = 16;

var count = 0;

var snake = {
// posición inicial de la serpiente
x: 160,
y: 160,

// movimiento de serpiente de 1 cuadro en x o y, empieza en x a la derecha

dx: avance,
dy: 0,

// para seguimiento de las cuadros que ocupa el cuerpo de la serpiente

cells: [],

// crecimiento de la cerpiente al tomar bonus, inicia en 4

maxCells: 4
};
var bonus = {
// posición inicial del bonus
x: 320,
y: 320
};

// funcion para obtener numero aleatorio en un rango

function getRandomInt(min, max) {
return Math.floor(Math.random() * (max - min)) + min;
}

// bucle del juego que realiza todo

function loop() {
requestAnimationFrame(loop);
// condición que reduce la velocidad natural del juego a 15fps (60/15 = 4)
// si se quiere mas rapido bajar el número, si se requiere mas lento subirlo
if (++count < 4) {
return;
}
count = 0;
// refresco de la animación del avance de la serpiente
context.clearRect(0, 0, canvas.width, canvas.height);

// movimiento de serpiente en X y Y
snake.x += snake.dx;
snake.y += snake.dy;

// si la serpiente pasa el límite horizontal

if (snake.x < 0) {
snake.x = canvas.width - avance;
} else if (snake.x >= canvas.width) {
snake.x = 0;
}

// si la serpiente pasa el límite vertical

if (snake.y < 0) {
snake.y = canvas.height - avance;
} else if (snake.y >= canvas.height) {
snake.y = 0;
}

// Almacena datos de dónde ha pasado la serpiente

snake.cells.unshift({
x: snake.x,
y: snake.y
});

// Actualiza datos de dónde ha estado la serpiente según se avanza

if (snake.cells.length > snake.maxCells) {
snake.cells.pop();
}

// dibuja el bonus y da color rojo

context.fillStyle = '#8E1E06';
context.fillRect(bonus.x, bonus.y, avance, avance);

// dibuja la serpiente cada celda que avanza y da color verde

context.fillStyle = '#368018';
snake.cells.forEach(function(cell, index) {

//dibuja un cuadro 1 pixel mas pequeño que el inicial para apreciar el creimiento
context.fillRect(cell.x, cell.y, avance - 1, avance - 1);

// al comer el bonus aunmentamos el tamaño, margen de proximidad de 8px

if ((cell.y - bonus.y >= -8 && cell.y - bonus.y <= 8) &&
(cell.x - bonus.x >= -8 && cell.x - bonus.x <= 8)) {
snake.maxCells++;
//el bonus aparece en otro lado del tablero aleatorio
bonus.x = getRandomInt(1, 25) * avance;
bonus.y = getRandomInt(1, 25) * avance;
}

// compara si la posición actual de la cabeza choca con alguna parte del cuerpo
for (var i = index + 1; i < snake.cells.length; i++) {
// si choca con el cuerpo el juego se reinicia
if (cell.x === snake.cells[i].x && cell.y === snake.cells[i].y) {
snake.x = 160;
snake.y = 160;
snake.cells = [];
snake.maxCells = 4;
snake.dx = avance;
snake.dy = 0;
bonus.x = getRandomInt(1, 25) * avance;
 bonus.y = getRandomInt(1, 25) * avance;
}
}
});
}

// Detección de eventos del teclado

document.addEventListener('keydown', function(e) {
// Usamos los codigos de las flechas y condición doble AND
//para evitar que la serpiente pueda ir en dirección opuesta

// flecha izquierda | codigo tecla=37

if (e.which === 37 && snake.dx === 0) {
snake.dx = -avance;
snake.dy = 0;
}
// flecha arriba | codigo tecla==38
else if (e.which === 38 && snake.dy === 0) {
snake.dy = -avance;
snake.dx = 0;
}
// flecha derecha | codigo tecla==39
else if (e.which === 39 && snake.dx === 0) {
snake.dx = avance;
snake.dy = 0;
}
// flecha abajo | codigo tecla=40
else if (e.which === 40 && snake.dy === 0) {
snake.dy = avance;
snake.dx = 0;
}
});

// Inicia el juego
requestAnimationFrame(loop);