JS实现的贪吃蛇游戏完整实例

项目简介

贪吃蛇游戏是一款经典的游戏，在很多平台上都有出现。这个项目是一个用JavaScript实现的贪吃蛇游戏，玩家通过控制蛇的移动方向和吃掉生成的食物，在不碰到墙或自身的情况下尽可能地维持蛇的生命并获得高分。

用到的技术

• HTML
• CSS
• JavaScript

实现思路

• 控制蛇的移动。通过定时器循环，不断移动蛇的位置。当蛇碰到墙或自己的身体时，游戏结束。
• 生成食物。在画布上随机生成食物。
• 当蛇吃到食物时，分数增加并生成新的食物。
• 显示分数和游戏结束。

代码实现

以下是JavaScript部分核心代码：

let snake = {
    body: [{'x': 1, 'y': 0}, {'x': 0, 'y': 0}], // 蛇头在数组的最后一个元素
    direction: 'right', // 初始方向为右
    newDirection: '',
    length: 2, // 初始长度为两节
    score: 0 // 分数初始化为0
}

let food = {
    x: 0,
    y: 0
}

document.onkeydown = function(event) {
    switch (event.keyCode) {
        case 37:
            snake.newDirection = 'left'
            break;
        case 38:
            snake.newDirection = 'up'
            break;
        case 39:
            snake.newDirection = 'right'
            break;
        case 40:
            snake.newDirection = 'down'
            break;
        default:
            break;
    }
}

function update() {
    // 根据蛇头的方向更新移动方向
    if (snake.newDirection === 'left' && snake.direction !== 'right') {
        snake.direction = 'left'
    } else if (snake.newDirection === 'up' && snake.direction !== 'down') {
        snake.direction = 'up'
    } else if (snake.newDirection === 'right' && snake.direction !== 'left') {
        snake.direction = 'right'
    } else if (snake.newDirection === 'down' && snake.direction !== 'up') {
        snake.direction = 'down'
    }

    // 更新蛇的位置
    let newHead = {'x': snake.body[snake.length - 1].x, 'y': snake.body[snake.length - 1].y}
    if (snake.direction === 'left') {
        newHead.x--
    } else if (snake.direction === 'up') {
        newHead.y--
    } else if (snake.direction === 'right') {
        newHead.x++
    } else {
        newHead.y++
    }
    snake.body.push(newHead)
    if (snake.body.length > snake.length) {
        snake.body.shift()
    }

    // 判断蛇是否撞墙或自己
    if (newHead.x < 0 || newHead.x > 39 || newHead.y < 0 || newHead.y > 39) {
        endGame('Game Over!')
        return
    }
    for (let i = 0; i < snake.body.length - 1; i++) {
        if (newHead.x === snake.body[i].x && newHead.y === snake.body[i].y) {
            endGame('Game Over!')
            return
        }
    }

    // 判断蛇是否吃到食物
    if (newHead.x === food.x && newHead.y === food.y) {
        snake.length++
        snake.score += 10
        displayScore()
        generateFood()
    }

    // 更新蛇的位置
    drawSnake()
}

function drawSnake() {
    ctx.clearRect(0, 0, canvas.width, canvas.height)
    for (let i = 0; i < snake.body.length; i++) {
        ctx.fillStyle = '#fff'
        ctx.fillRect(snake.body[i].x * 10, snake.body[i].y * 10, 10, 10)
    }
}

function generateFood() {
    food.x = Math.floor(Math.random() * 40)
    food.y = Math.floor(Math.random() * 40)
    ctx.fillStyle = '#0f0'
    ctx.fillRect(food.x * 10, food.y * 10, 10, 10)
}

function displayScore() {
    scoreText.innerHTML = 'Score: ' + snake.score
}

function endGame(msg) {
    clearInterval(intervalId)
    gameOverText.innerHTML = msg
    gameOverText.style.display = 'block'
}

// 初始化画布、画蛇、生成食物
let canvas = document.getElementById('canvas')
let ctx = canvas.getContext('2d')
drawSnake()
generateFood()

let scoreText = document.getElementById('score')
displayScore()

let gameOverText = document.getElementById('gameover')
let intervalId = setInterval(update, 100) // 每100毫秒更新一次游戏状态

示例说明

在实现过程中，可以通过不断修改函数中的代码，进行游戏后期的特殊功能添加，例如：蛇增加长度或移动速度逐渐加快等。

另外，还可以将本项目的代码和界面进行拆分和模块化，更好地封装和维护。例如：

• 把canvas部分单独写一个模块，将画蛇、生成食物等功能封装成函数。
• 把Snake对象和Food对象分别作为一个模块，用ES6的导出和导入来管理模块之间的依赖。