使用js和canvas实现简单的网页贪吃蛇小游戏

news2024/10/17 12:18:17

玩法介绍

点击开始游戏后，使用键盘上的↑↓←→控制移动，吃到食物增加长度，碰到墙壁或碰到自身就游戏结束
在这里插入图片描述

代码实现

代码比较简单，直接阅读注释即可，复制即用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Snake Game</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
        }
        canvas {
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            z-index: 1;
            background-color: #000;
        }
        .start-screen {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.8);
            color: white;
            text-align: center;
            z-index: 2;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
        }
        button {
            font-size: 24px;
            padding: 10px 20px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="start-screen">
        <h1>Snake Game</h1>
        <button id="startButton">Start Game</button>
    </div>
    <canvas id="gameCanvas" width="800" height="600"></canvas>
    <script>
        const canvas = document.getElementById('gameCanvas');
        const ctx = canvas.getContext('2d');

        // 设置 Canvas 为全屏
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;

        // 方块大小
        const blockSize = 20;

        // 游戏状态
        let snake = [{ x: 100, y: 100 }];
        let food = { x: 200, y: 200 };
        let direction = 'right';
        let score = 0;
        let isRunning = false;

        // 游戏速度
        const speed = 100;

        // 绘制蛇
        function drawSnake() {
            ctx.fillStyle = '#0f0';
            snake.forEach(segment => {
                ctx.fillRect(segment.x, segment.y, blockSize, blockSize);
            });
        }

        // 绘制食物
        function drawFood() {
            ctx.fillStyle = '#f00';
            ctx.fillRect(food.x, food.y, blockSize, blockSize);
        }

        // 检查碰撞
        function checkCollision() {
            // 检查蛇是否撞墙
            if (snake[0].x < 0 || snake[0].x >= canvas.width || snake[0].y < 0 || snake[0].y >= canvas.height) {
                alert('Game Over!');
                isRunning = false;
                return;
            }

            // 检查蛇是否撞到自己
            for (let i = 1; i < snake.length; i++) {
                if (snake[0].x === snake[i].x && snake[0].y === snake[i].y) {
                    alert('Game Over!');
                    isRunning = false;
                    return;
                }
            }

            // 检查蛇是否吃到食物
            if (snake[0].x === food.x && snake[0].y === food.y) {
                score++;
                placeFood();
            } else {
                snake.pop();
            }
        }

        // 放置新的食物
        function placeFood() {
            food = {
                x: Math.floor(Math.random() * (canvas.width / blockSize)) * blockSize,
                y: Math.floor(Math.random() * (canvas.height / blockSize)) * blockSize
            };
        }

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

            let newX = snake[0].x;
            let newY = snake[0].y;

            if (direction === 'left') newX -= blockSize;
            if (direction === 'right') newX += blockSize;
            if (direction === 'up') newY -= blockSize;
            if (direction === 'down') newY += blockSize;

            snake.unshift({ x: newX, y: newY });

            checkCollision();
        }

        // 渲染游戏画面
        function draw() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            drawSnake();
            drawFood();
        }

        // 游戏主循环
        function gameLoop() {
            update();
            draw();
            setTimeout(gameLoop, speed);
        }

        // 键盘事件
        function handleKeyPress(event) {
            if (event.key === 'ArrowLeft' && direction !== 'right') direction = 'left';
            if (event.key === 'ArrowRight' && direction !== 'left') direction = 'right';
            if (event.key === 'ArrowUp' && direction !== 'down') direction = 'up';
            if (event.key === 'ArrowDown' && direction !== 'up') direction = 'down';
        }

        // 开始按钮事件
        document.getElementById('startButton').addEventListener('click', () => {
            const startScreen = document.querySelector('.start-screen');
            startScreen.style.display = 'none';

            // 添加键盘事件监听
            document.addEventListener('keydown', handleKeyPress);

            isRunning = true;
            placeFood();
            gameLoop();
        });

        // 游戏结束时移除键盘事件监听
        window.addEventListener('beforeunload', () => {
            document.removeEventListener('keydown', handleKeyPress);
        });
    </script>
</body>
</html>