【Web前端】html+js实现贪吃蛇前端小游戏

一、设置画布（游戏范围）

画布

<canvas id="canvas" width="400" height="400"></canvas>

画布样式

    <style>
        canvas {
            border: 1px solid black;
        }
    </style>

二、游戏逻辑

 // 设置画布和绘图环境
    const canvas = document.getElementById("canvas");
    const ctx = canvas.getContext("2d");

    // 定义贪吃蛇和食物的初始位置
    let snake = [{ x: 200, y: 200 }];
    let food = { x: 0, y: 0 };

    // 定义贪吃蛇的方向
    let direction = "right";

    // 生成食物的函数
    function generateFood() {
        food.x = Math.floor(Math.random() * canvas.width / 10) * 10;
        food.y = Math.floor(Math.random(