余涵乐贪吃蛇

余涵乐

const canvas = document.getElementById('game-board');
const ctx = canvas.getContext('2d');
const scoreElement = document.getElementById('score');
const highScoreElement = document.getElementById('high-score');
const finalScoreElement = document.getElementById('final-score');
const gameOverElement = document.getElementById('game-over');
const startBtn = document.getElementById('start-btn');
const pauseBtn = document.getElementById('pause-btn');
const restartBtn = document.getElementById('restart-btn');

const gridSize = 20;
const tileCount = canvas.width / gridSize;

let snake = [{x: 200, y: 200}];
let food = {x: 10, y: 10};
let direction = {x: 0, y: 0};
let lastDirection = {x: 0, y: 0};
let score = 0;
let highScore = localStorage.getItem('highScore') || 0;
let gameSpeed = 150;
let gameRunning = false;
let gamePaused = false;
let gameLoop;

highScoreElement.textContent = highScore;

function drawGame() {
    // 清空画布
    ctx.fillStyle = '#fff';
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    // 绘制蛇
    snake.forEach((segment, index) => {
        ctx.fillStyle = index === 0 ? '#4CAF50' : '#8BC34A';
        ctx.fillRect(segment.x * gridSize, segment.y * gridSize, gridSize - 2, gridSize - 2);
    });

    // 绘制食物
    ctx.fillStyle = '#FF5722';
    ctx.fillRect(food.x * gridSize, food.y * gridSize, gridSize - 2, gridSize - 2);
}

function moveSnake() {
    const head = {x: snake[0].x + direction.x, y: snake[0].y + direction.y};
    lastDirection = {...direction};

    // 检查是否撞墙
    if (head.x < 0 || head.x >= tileCount || head.y < 0 || head.y >= tileCount) {
        gameOver();
        return;
    }

    // 检查是否撞到自己
    if (snake.some(segment => segment.x === head.x && segment.y === head.y)) {
        gameOver();
        return;
    }

    snake.unshift(head);

    // 检查是否吃到食物
    if (head.x === food.x && head.y === food.y) {
        score += 10;
        scoreElement.textContent = score;
        generateFood();

        // 随着分数增加加快游戏速度
        if (score % 50 === 0 && gameSpeed > 50) {
            gameSpeed -= 10;
            clearInterval(gameLoop);
            gameLoop = setInterval(updateGame, gameSpeed);
        }
    } else {
        snake.pop();
    }
}

function generateFood() {
    let newFoodPosition;
    do {
        newFoodPosition = {
            x: Math.floor(Math.random() * tileCount),
            y: Math.floor(Math.random() * tileCount)
        };
    } while (snake.some(segment =>
        segment.x === newFoodPosition.x && segment.y === newFoodPosition.y
    ));

    food = newFoodPosition;
}

function updateGame() {
    if (gamePaused) return;
    moveSnake();
    drawGame();
}

function gameOver() {
    clearInterval(gameLoop);
    gameRunning = false;
    gamePaused = false;

    finalScoreElement.textContent = score;
    gameOverElement.style.display = 'block';

    if (score > highScore) {
        highScore = score;
        highScoreElement.textContent = highScore;
        localStorage.setItem('highScore', highScore);
    }
}

function startGame() {
    if (gameRunning) return;

    snake = [{x: 10, y: 10}];
    direction = {x: 0, y: 0};
    lastDirection = {x: 0, y: 0};
    score = 0;
    scoreElement.textContent = score;
    gameSpeed = 150;
    gameOverElement.style.display = 'none';
    generateFood();

    gameRunning = true;
    gamePaused = false;
    gameLoop = setInterval(updateGame, gameSpeed);
}

function togglePause() {
    if (!gameRunning) return;

    gamePaused = !gamePaused;
    pauseBtn.textContent = gamePaused ? '继续' : '暂停';
}

// 事件监听
document.addEventListener('keydown', e => {
    if (!gameRunning || gamePaused) return;

    switch(e.key) {
        case 'ArrowUp':
        case 'w':
        case 'W':
            if (lastDirection.y === 0) direction = {x: 0, y: -1};
            break;
        case 'ArrowDown':
        case 's':
        case 'S':
            if (lastDirection.y === 0) direction = {x: 0, y: 1};
            break;
        case 'ArrowLeft':
        case 'a':
        case 'A':
            if (lastDirection.x === 0) direction = {x: -1, y: 0};
            break;
        case 'ArrowRight':
        case 'd':
        case 'D':
            if (lastDirection.x === 0) direction = {x: 1, y: 0};
            break;
    }
});

startBtn.addEventListener('click', startGame);
pauseBtn.addEventListener('click', togglePause);
restartBtn.addEventListener('click', startGame);

// 初始绘制
drawGame();

kaia

嗨，小朋友！这段代码是一个贪吃蛇游戏，让我们一起看看吧！

首先，这个游戏有一些基本的元素：画布、蛇、食物、分数等。游戏会在画布上进行，你可以用方向键控制蛇的移动，让蛇吃食物并不断变长，同时要避免撞到墙壁或者撞到自己哦！

在代码中，我们定义了一些必要的元素和变量，比如画布、蛇、食物、分数、游戏速度等等。然后，通过一系列的函数来实现游戏的核心功能，比如绘制游戏界面、移动蛇、生成食物、更新游戏状态等。

当游戏结束时，会显示游戏结束的画面，告诉你最终得分，并且会记录最高分数。而当游戏开始时，你可以通过点击“开始”按钮来开始游戏，通过点击“暂停”按钮来暂停游戏，再次点击则继续游戏，点击“重新开始”按钮可以重新开始游戏哦！

最后，通过监听键盘事件来控制蛇的移动方向，具体可以用上、下、左、右箭头键或者WASD键来控制蛇的移动方向。

记住，玩游戏要注意集中注意力，灵活操作哦！祝你游戏愉快！如果有任何问题，记得随时来问我哦！