正文

轻松上手！教你用JavaScript制作经典贪吃蛇游戏全攻略

/0 浏览量
0704

游戏概述

贪吃蛇游戏是一款非常经典的游戏，玩家需要控制蛇头吃掉食物，蛇的身体会随之增长。在游戏过程中，如果蛇头撞到自己的身体或者边界，游戏就会结束。下面，我们就来一步一步地用JavaScript制作一个简单的贪吃蛇游戏。

环境准备

在开始之前，你需要准备以下环境：

  1. HTML文件：用于创建游戏的基本框架。
  2. CSS文件：用于美化游戏界面。
  3. JavaScript文件：用于编写游戏逻辑。

你可以创建一个名为“snake-game”的文件夹，然后将HTML、CSS和JavaScript文件分别命名为index.html、style.css和script.js。

游戏界面

首先，我们来设计游戏界面。在index.html文件中，添加以下代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>贪吃蛇游戏</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div id="game-container">
        <div id="game-board"></div>
    </div>
    <script src="script.js"></script>
</body>
</html>

然后，在style.css文件中，添加以下代码来美化游戏界面：

#game-container {
    width: 400px;
    height: 400px;
    position: relative;
    margin: 50px auto;
    border: 1px solid #000;
}

#game-board {
    width: 100%;
    height: 100%;
    background-color: #ddd;
    position: relative;
}

这样，我们就完成了一个简单的游戏界面。

游戏逻辑

接下来，我们来编写游戏逻辑。在script.js文件中，添加以下代码：

// 游戏变量
const gameBoard = document.getElementById('game-board');
const direction = 'right';
let snake = [
    { x: 3, y: 3 },
    { x: 2, y: 3 },
    { x: 1, y: 3 }
];
let food = { x: 10, y: 10 };
let score = 0;

// 游戏初始化
function init() {
    renderSnake();
    renderFood();
    gameLoop();
}

// 游戏循环
function gameLoop() {
    if (gameOver()) {
        return;
    }
    moveSnake();
    checkCollision();
    checkFood();
    renderSnake();
    renderFood();
    setTimeout(gameLoop, 100);
}

// 生成食物
function renderFood() {
    const foodElement = document.createElement('div');
    foodElement.style.position = 'absolute';
    foodElement.style.width = '20px';
    foodElement.style.height = '20px';
    foodElement.style.backgroundColor = 'red';
    foodElement.style.left = food.x * 20 + 'px';
    foodElement.style.top = food.y * 20 + 'px';
    gameBoard.appendChild(foodElement);
}

// 生成蛇
function renderSnake() {
    gameBoard.innerHTML = '';
    for (let i = 0; i < snake.length; i++) {
        const snakeElement = document.createElement('div');
        snakeElement.style.position = 'absolute';
        snakeElement.style.width = '20px';
        snakeElement.style.height = '20px';
        snakeElement.style.backgroundColor = 'green';
        snakeElement.style.left = snake[i].x * 20 + 'px';
        snakeElement.style.top = snake[i].y * 20 + 'px';
        gameBoard.appendChild(snakeElement);
    }
}

// 移动蛇
function moveSnake() {
    const head = { x: snake[0].x, y: snake[0].y };
    if (direction === 'right') {
        head.x++;
    } else if (direction === 'left') {
        head.x--;
    } else if (direction === 'up') {
        head.y--;
    } else if (direction === 'down') {
        head.y++;
    }
    snake.unshift(head);
    if (head.x === food.x && head.y === food.y) {
        score++;
        food = { x: Math.floor(Math.random() * 20), y: Math.floor(Math.random() * 20) };
    } else {
        snake.pop();
    }
}

// 检查碰撞
function checkCollision() {
    const head = snake[0];
    if (head.x < 0 || head.x > 19 || head.y < 0 || head.y > 19 || snake.some(segment => segment.x === head.x && segment.y === head.y)) {
        gameOver();
    }
}

// 检查食物
function checkFood() {
    const head = snake[0];
    if (head.x === food.x && head.y === food.y) {
        food = { x: Math.floor(Math.random() * 20), y: Math.floor(Math.random() * 20) };
    }
}

// 游戏结束
function gameOver() {
    alert('游戏结束，得分：' + score);
    location.reload();
}

// 监听键盘事件
document.addEventListener('keydown', function(event) {
    if (event.key === 'ArrowRight' && direction !== 'left') {
        direction = 'right';
    } else if (event.key === 'ArrowLeft' && direction !== 'right') {
        direction = 'left';
    } else if (event.key === 'ArrowUp' && direction !== 'down') {
        direction = 'up';
    } else if (event.key === 'ArrowDown' && direction !== 'up') {
        direction = 'down';
    }
});

// 初始化游戏
init();

这样，我们就完成了一个简单的贪吃蛇游戏。你可以根据自己的需求进行修改和扩展，例如添加更多功能、美化界面等。

总结

通过本文的介绍，你学会了如何使用JavaScript制作一个简单的贪吃蛇游戏。希望这篇文章对你有所帮助，祝你学习愉快！

-- 展开阅读全文 --