使用canvas实现一个贪吃蛇小游戏

创建一个贪吃蛇游戏涉及到很多步骤，以下是一个简化版的贪吃蛇游戏实现方案，使用HTML5的<canvas>元素。

HTML

首先，在HTML中创建一个<canvas>元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>贪吃蛇游戏</title>
    <style>
        canvas {
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas" width="400" height="400"></canvas>
    <script src="snake.js"></script>
</body>
</html>

JavaScript (snake.js)

然后，在snake.js中实现游戏逻辑。

const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
const boxSize = 20;
let snake = [{ x: 10, y: 10 }];
let food = { x: 5, y: 5 };
let direction = 'right';
let changingDirection = false;

document.addEventListener('keydown', changeDirection);

function changeDirection(event) {
    if (changingDirection) return;
    changingDirection = true;
    switch (event.key) {
        case 'ArrowUp':
            if (direction !== 'down') direction = 'up';
            break;
        case 'ArrowDown':
            if (direction !== 'up') direction = 'down';
            break;
        case 'ArrowLeft':
            if (direction !== 'right') direction = 'left';
            break;
        case 'ArrowRight':
            if (direction !== 'left') direction = 'right';
            break;
    }
    setTimeout(() => changingDirection = false, 100);
}

function placeFood() {
    food.x = Math.floor(Math.random() * canvas.width / boxSize);
    food.y = Math.floor(Math.random() * canvas.height / boxSize);
    for (let cell of snake) {
        if (food.x === cell.x && food.y === cell.y) placeFood();
    }
}

function moveSnake() {
    const head = { ...snake[0] };
    switch (direction) {
        case 'up':
            head.y--;
            break;
        case 'down':
            head.y++;
            break;
        case 'left':
            head.x--;
            break;
        case 'right':
            head.x++;
            break;
    }
    snake.unshift(head);
    if (snake[0].x === food.x && snake[0].y === food.y) {
        placeFood();
    } else {
        snake.pop();
    }
}

function drawGame() {
    ctx.fillStyle = 'white';
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    ctx.fillStyle = 'green';
    for (let cell of snake) {
        ctx.fillRect(cell.x * boxSize, cell.y * boxSize, boxSize, boxSize);
    }
    ctx.fillStyle = 'red';
    ctx.fillRect(food.x * boxSize, food.y * boxSize, boxSize, boxSize);
}

function updateGame() {
    moveSnake();
    drawGame();
}

function gameLoop() {
    updateGame();
    requestAnimationFrame(gameLoop);
}

placeFood();
gameLoop();

这段代码实现了一个简单的贪吃蛇游戏，包括蛇的移动、食物的生成和游戏画面的绘制。你可以通过箭头键来控制蛇的移动方向。当蛇吃到食物时，食物会重新生成在一个随机的位置，并且蛇的长度会增加。如果蛇没有吃到食物，它的尾部会缩短，保持蛇的总长度不变。

posted @ 2024-12-22 09:45  王铁柱6  阅读(209)  评论(0)    收藏  举报