snake-game/game.js

// 游戏配置
const CONFIG = {
    gridSize: 20,           // 网格大小
    canvasSize: 400,        // 画布大小
    easySpeed: 150,         // 简单模式速度
    mediumSpeed: 100,       // 中等模式速度
    hardSpeed: 50          // 困难模式速度
};

// 游戏状态
let snake = [];
let food = {};
let direction = 'right';
let nextDirection = 'right';
let score = 0;
let gameLoop = null;
let isPaused = false;
let isGameRunning = false;

// DOM 元素
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
const scoreElement = document.getElementById('score');
const startBtn = document.getElementById('startBtn');
const pauseBtn = document.getElementById('pauseBtn');
const resetBtn = document.getElementById('resetBtn');
const difficultySelect = document.getElementById('difficulty');

// 初始化游戏
function initGame() {
    snake = [
        { x: 5, y: 10 },
        { x: 4, y: 10 },
        { x: 3, y: 10 }
    ];
    direction = 'right';
    nextDirection = 'right';
    score = 0;
    isPaused = false;
    isGameRunning = false;
    updateScore();
    spawnFood();
    draw();
}

// 生成食物
function spawnFood() {
    const maxPos = CONFIG.canvasSize / CONFIG.gridSize;
    let newFood;

    do {
        newFood = {
            x: Math.floor(Math.random() * maxPos),
            y: Math.floor(Math.random() * maxPos)
        };
    } while (snake.some(segment => segment.x === newFood.x && segment.y === newFood.y));

    food = newFood;
}

// 更新游戏状态
function update() {
    if (isPaused) return;

    direction = nextDirection;

    // 计算蛇头新位置
    const head = { ...snake[0] };

    switch (direction) {
        case 'up':
            head.y -= 1;
            break;
        case 'down':
            head.y += 1;
            break;
        case 'left':
            head.x -= 1;
            break;
        case 'right':
            head.x += 1;
            break;
    }

    // 检查碰撞
    if (checkCollision(head)) {
        gameOver();
        return;
    }

    // 添加蛇头
    snake.unshift(head);

    // 检查是否吃到食物
    if (head.x === food.x && head.y === food.y) {
        score += 10;
        updateScore();
        spawnFood();
    } else {
        snake.pop();
    }

    draw();
}

// 检查碰撞
function checkCollision(head) {
    const maxPos = CONFIG.canvasSize / CONFIG.gridSize;

    // 撞墙检测
    if (head.x < 0 || head.x >= maxPos || head.y < 0 || head.y >= maxPos) {
        return true;
    }

    // 撞自己检测
    return snake.some(segment => segment.x === head.x && segment.y === head.y);
}

// 绘制游戏
function draw() {
    // 清空画布
    ctx.fillStyle = '#2c3e50';
    ctx.fillRect(0, 0, CONFIG.canvasSize, CONFIG.canvasSize);

    // 绘制蛇
    snake.forEach((segment, index) => {
        const gradient = ctx.createRadialGradient(
            segment.x * CONFIG.gridSize + CONFIG.gridSize / 2,
            segment.y * CONFIG.gridSize + CONFIG.gridSize / 2,
            0,
            segment.x * CONFIG.gridSize + CONFIG.gridSize / 2,
            segment.y * CONFIG.gridSize + CONFIG.gridSize / 2,
            CONFIG.gridSize
        );

        if (index === 0) {
            gradient.addColorStop(0, '#2ecc71');
            gradient.addColorStop(1, '#27ae60');
        } else {
            gradient.addColorStop(0, '#82e0aa');
            gradient.addColorStop(1, '#58d68d');
        }

        ctx.fillStyle = gradient;
        ctx.fillRect(
            segment.x * CONFIG.gridSize + 1,
            segment.y * CONFIG.gridSize + 1,
            CONFIG.gridSize - 2,
            CONFIG.gridSize - 2
        );
    });

    // 绘制食物
    const foodGradient = ctx.createRadialGradient(
        food.x * CONFIG.gridSize + CONFIG.gridSize / 2,
        food.y * CONFIG.gridSize + CONFIG.gridSize / 2,
        0,
        food.x * CONFIG.gridSize + CONFIG.gridSize / 2,
        food.y * CONFIG.gridSize + CONFIG.gridSize / 2,
        CONFIG.gridSize
    );
    foodGradient.addColorStop(0, '#e74c3c');
    foodGradient.addColorStop(1, '#c0392b');

    ctx.fillStyle = foodGradient;
    ctx.beginPath();
    ctx.arc(
        food.x * CONFIG.gridSize + CONFIG.gridSize / 2,
        food.y * CONFIG.gridSize + CONFIG.gridSize / 2,
        CONFIG.gridSize / 2 - 2,
        0,
        Math.PI * 2
    );
    ctx.fill();
}

// 更新分数
function updateScore() {
    scoreElement.textContent = score;
}

// 游戏结束
function gameOver() {
    stopGame();
    alert(`游戏结束！得分：${score}\n点击"重置"重新开始`);
}

// 开始游戏
function startGame() {
    if (isGameRunning) return;

    initGame();
    isGameRunning = true;
    startBtn.disabled = true;
    pauseBtn.disabled = false;
    difficultySelect.disabled = true;

    const speed = getGameSpeed();
    gameLoop = setInterval(update, speed);
}

// 停止游戏
function stopGame() {
    if (gameLoop) {
        clearInterval(gameLoop);
        gameLoop = null;
    }
    isGameRunning = false;
    startBtn.disabled = false;
    pauseBtn.disabled = true;
    pauseBtn.textContent = '暂停';
    difficultySelect.disabled = false;
}

// 暂停/继续游戏
function togglePause() {
    if (!isGameRunning) return;

    isPaused = !isPaused;

    if (isPaused) {
        pauseBtn.textContent = '继续';
    } else {
        pauseBtn.textContent = '暂停';
    }
}

// 重置游戏
function resetGame() {
    stopGame();
    initGame();
}

// 获取游戏速度
function getGameSpeed() {
    const difficulty = difficultySelect.value;

    switch (difficulty) {
        case 'easy':
            return CONFIG.easySpeed;
        case 'medium':
            return CONFIG.mediumSpeed;
        case 'hard':
            return CONFIG.hardSpeed;
        default:
            return CONFIG.mediumSpeed;
    }
}

// 键盘控制
document.addEventListener('keydown', (e) => {
    const key = e.key;

    if (key === 'ArrowUp' && direction !== 'down') {
        nextDirection = 'up';
        e.preventDefault();
    } else if (key === 'ArrowDown' && direction !== 'up') {
        nextDirection = 'down';
        e.preventDefault();
    } else if (key === 'ArrowLeft' && direction !== 'right') {
        nextDirection = 'left';
        e.preventDefault();
    } else if (key === 'ArrowRight' && direction !== 'left') {
        nextDirection = 'right';
        e.preventDefault();
    } else if (key === ' ' && isGameRunning) {
        togglePause();
        e.preventDefault();
    }
});

// 按钮事件
startBtn.addEventListener('click', startGame);
pauseBtn.addEventListener('click', togglePause);
resetBtn.addEventListener('click', resetGame);

// 初始化
initGame();