116 lines
2.8 KiB
JavaScript
116 lines
2.8 KiB
JavaScript
const canvas = document.getElementById('gameCanvas');
|
|
const ctx = canvas.getContext('2d');
|
|
const scoreSpan = document.getElementById('score-value');
|
|
const restartBtn = document.getElementById('restart-btn');
|
|
const gameOverDiv = document.getElementById('game-over-message');
|
|
|
|
// Parámetros del juego
|
|
const gridSize = 20; // Tamaño de cada celda
|
|
const tileCount = 20; // El área es de 20x20 celdas
|
|
let snake, direction, food, score, gameInterval, gameOver;
|
|
|
|
function startGame() {
|
|
snake = [
|
|
{x: 10, y: 10},
|
|
{x: 9, y: 10},
|
|
{x: 8, y: 10}
|
|
];
|
|
direction = 'right';
|
|
score = 0;
|
|
gameOver = false;
|
|
scoreSpan.textContent = score;
|
|
gameOverDiv.textContent = '';
|
|
placeFood();
|
|
clearInterval(gameInterval);
|
|
gameInterval = setInterval(gameLoop, 100);
|
|
}
|
|
|
|
function placeFood() {
|
|
food = {
|
|
x: Math.floor(Math.random() * tileCount),
|
|
y: Math.floor(Math.random() * tileCount)
|
|
};
|
|
// Asegúrate que la comida no aparece en la serpiente
|
|
if (snake.some(segment => segment.x === food.x && segment.y === food.y)) {
|
|
placeFood();
|
|
}
|
|
}
|
|
|
|
function gameLoop() {
|
|
// Mueve la serpiente
|
|
const head = {x: snake[0].x, y: snake[0].y};
|
|
switch (direction) {
|
|
case 'left': head.x--; break;
|
|
case 'up': head.y--; break;
|
|
case 'right': head.x++; break;
|
|
case 'down': head.y++; break;
|
|
}
|
|
|
|
// Choca con pared
|
|
if (head.x < 0 || head.x >= tileCount || head.y < 0 || head.y >= tileCount) {
|
|
endGame();
|
|
return;
|
|
}
|
|
// Choca consigo mismo
|
|
if (snake.some(seg => seg.x === head.x && seg.y === head.y)) {
|
|
endGame();
|
|
return;
|
|
}
|
|
|
|
snake.unshift(head);
|
|
|
|
// Come la comida
|
|
if (head.x === food.x && head.y === food.y) {
|
|
score++;
|
|
scoreSpan.textContent = score;
|
|
placeFood();
|
|
} else {
|
|
snake.pop();
|
|
}
|
|
|
|
drawGame();
|
|
}
|
|
|
|
function drawGame() {
|
|
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
|
|
|
// Dibuja la comida
|
|
ctx.fillStyle = "#fc5185";
|
|
ctx.fillRect(food.x * gridSize, food.y * gridSize, gridSize, gridSize);
|
|
|
|
// Dibuja la serpiente
|
|
for (let i = 0; i < snake.length; i++) {
|
|
ctx.fillStyle = i === 0 ? "#ffd700" : "#145991";
|
|
ctx.fillRect(snake[i].x * gridSize, snake[i].y * gridSize, gridSize, gridSize);
|
|
}
|
|
}
|
|
|
|
function changeDirection(e) {
|
|
if (gameOver) return;
|
|
switch (e.key) {
|
|
case "ArrowLeft":
|
|
if (direction !== "right") direction = "left";
|
|
break;
|
|
case "ArrowUp":
|
|
if (direction !== "down") direction = "up";
|
|
break;
|
|
case "ArrowRight":
|
|
if (direction !== "left") direction = "right";
|
|
break;
|
|
case "ArrowDown":
|
|
if (direction !== "up") direction = "down";
|
|
break;
|
|
}
|
|
}
|
|
|
|
function endGame() {
|
|
clearInterval(gameInterval);
|
|
gameOver = true;
|
|
gameOverDiv.textContent = "¡Fin del juego! Puntaje final: " + score;
|
|
}
|
|
|
|
window.addEventListener('keydown', changeDirection);
|
|
restartBtn.onclick = startGame;
|
|
|
|
// Inicia el juego
|
|
startGame(); |