js怎么制作贪吃蛇社头

制作贪吃蛇游戏的核心步骤包括：初始化游戏、绘制蛇和食物、定义游戏逻辑、实现用户交互、以及不断更新游戏状态。 接下来我们详细展开这些步骤。

一、初始化游戏

在制作贪吃蛇游戏之前，我们需要先初始化游戏画布和基本的设置。这部分内容主要包括创建HTML结构和基本的CSS样式。

1. 创建HTML结构

首先，我们需要创建一个HTML文件，并在其中包含一个用于绘制贪吃蛇游戏的 <canvas> 元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>贪吃蛇游戏</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <canvas id="gameCanvas" width="400" height="400"></canvas>
    <script src="script.js"></script>
</body>
</html>

2. 编写CSS样式

接下来，我们需要在 styles.css 文件中定义一些基本的样式，使得游戏画布居中显示。

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-color: #f0f0f0;
}
canvas {
    border: 1px solid #000;
}

二、绘制蛇和食物

绘制蛇和食物是贪吃蛇游戏的基本部分，我们需要在游戏画布上绘制出蛇和食物的初始位置。

1. 初始化画布和上下文

在 script.js 文件中，我们首先需要获取画布的上下文，以便我们可以在上面绘制图形。

const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');

2. 定义蛇和食物的数据结构

我们需要定义蛇和食物的初始位置和大小。蛇可以使用一个数组来表示，每个数组元素是蛇的一个节。

let snake = [
    { x: 150, y: 150 },
    { x: 140, y: 150 },
    { x: 130, y: 150 },
    { x: 120, y: 150 },
    { x: 110, y: 150 }
];
let food = { x: 200, y: 200 };
const snakeSize = 10;

3. 绘制蛇和食物

我们需要一个函数来绘制蛇和食物在画布上的位置。

function drawSnakePart(snakePart) {
    ctx.fillStyle = 'lightgreen';
    ctx.strokeStyle = 'darkgreen';
    ctx.fillRect(snakePart.x, snakePart.y, snakeSize, snakeSize);
    ctx.strokeRect(snakePart.x, snakePart.y, snakeSize, snakeSize);
}
function drawSnake() {
    snake.forEach(drawSnakePart);
}
function drawFood() {
    ctx.fillStyle = 'red';
    ctx.fillRect(food.x, food.y, snakeSize, snakeSize);
}

三、定义游戏逻辑

游戏逻辑部分主要包括蛇的移动、食物的生成和碰撞检测等。

1. 移动蛇

我们需要一个函数来更新蛇的位置。蛇的移动可以通过在头部添加一个新的节，然后移除尾部的一个节来实现。

let dx = 10;
let dy = 0;
function moveSnake() {
    const head = { x: snake[0].x + dx, y: snake[0].y + dy };
    snake.unshift(head);
    snake.pop();
}

2. 生成新的食物

当蛇吃掉食物后，需要在随机位置生成新的食物。

function randomFood(min, max) {
    return Math.round((Math.random() * (max - min) + min) / 10) * 10;
}
function generateFood() {
    food.x = randomFood(0, canvas.width - snakeSize);
    food.y = randomFood(0, canvas.height - snakeSize);
}

3. 碰撞检测

我们需要检测蛇是否吃到了食物，或者是否撞到了自己或墙壁。

function didSnakeEatFood() {
    return snake[0].x === food.x && snake[0].y === food.y;
}
function didGameEnd() {
    for (let i = 4; i < snake.length; i++) {
        if (snake[i].x === snake[0].x && snake[i].y === snake[0].y) return true;
    }
    const hitLeftWall = snake[0].x < 0;
    const hitRightWall = snake[0].x > canvas.width - snakeSize;
    const hitTopWall = snake[0].y < 0;
    const hitBottomWall = snake[0].y > canvas.height - snakeSize;
    return hitLeftWall || hitRightWall || hitTopWall || hitBottomWall;
}

四、实现用户交互

用户可以通过键盘来控制蛇的移动方向。

1. 监听键盘事件

我们需要监听键盘事件，并根据按键改变蛇的移动方向。

document.addEventListener('keydown', changeDirection);
function changeDirection(event) {
    const LEFT_KEY = 37;
    const RIGHT_KEY = 39;
    const UP_KEY = 38;
    const DOWN_KEY = 40;
    const keyPressed = event.keyCode;
    const goingUp = dy === -10;
    const goingDown = dy === 10;
    const goingRight = dx === 10;
    const goingLeft = dx === -10;
    if (keyPressed === LEFT_KEY && !goingRight) {
        dx = -10;
        dy = 0;
    }
    if (keyPressed === UP_KEY && !goingDown) {
        dx = 0;
        dy = -10;
    }
    if (keyPressed === RIGHT_KEY && !goingLeft) {
        dx = 10;
        dy = 0;
    }
    if (keyPressed === DOWN_KEY && !goingUp) {
        dx = 0;
        dy = 10;
    }
}

五、更新游戏状态

我们需要一个主循环来不断更新游戏状态，并重新绘制画布。

function main() {
    if (didGameEnd()) return;
    setTimeout(function onTick() {
        clearCanvas();
        drawFood();
        moveSnake();
        drawSnake();
        if (didSnakeEatFood()) {
            snake.push({}); // 增加蛇的长度
            generateFood();
        }
        main();
    }, 100);
}
function clearCanvas() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
}
generateFood();
main();

以上就是制作一个简单的贪吃蛇游戏的完整步骤。你可以根据需要进一步优化和扩展功能，例如添加计分系统、优化碰撞检测等。希望这篇文章对你有所帮助！