展示一个简单的贪吃蛇游戏，可以使用HTML、CSS和JavaScript来实现。以下是一个完整的代码示例，包括HTML结构、CSS样式和JavaScript逻辑。

HTML

    
    
    
    


    

        
1. 贪吃蛇游戏
        
        

            开始游戏
        
    
    

CSS（styles.css）

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
}

.container {
    text-align: center;
}

canvas {
    border: 1px solid #000;
    background-color: #fff;
}

.controls {
    margin-top: 10px;
}

JavaScript（script.js）

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

const gridSize = 20;
const canvasSize = canvas.width;
const rows = canvasSize / gridSize;
const columns = canvasSize / gridSize;

let snake;
let food;
let direction;
let gameLoop;

function startGame() {
    snake = [{ x: 10, y: 10 }];
    direction = 'right';
    placeFood();
    clearInterval(gameLoop);
    gameLoop = setInterval(update, 100);
}

function placeFood() {
    food = {
        x: Math.floor(Math.random() * columns),
        y: Math.floor(Math.random() * rows)
    };
}

function update() {
    const head = { ...snake[0] };

    switch (direction) {
        case 'up':
            head.y -= 1;
            break;
        case 'down':
            head.y += 1;
            break;
        case 'left':
            head.x -= 1;
            break;
        case 'right':
            head.x += 1;
            break;
    }

    if (head.x < 0 || head.x >= columns || head.y < 0 || head.y >= rows || snake.some(segment => segment.x === head.x && segment.y === head.y)) {
        clearInterval(gameLoop);
        alert('游戏结束');
        return;
    }

    snake.unshift(head);

    if (head.x === food.x && head.y === food.y) {
        placeFood();
    } else {
        snake.pop();
    }

    draw();
}

function draw() {
    ctx.clearRect(0, 0, canvasSize, canvasSize);

    ctx.fillStyle = 'red';
    ctx.fillRect(food.x * gridSize, food.y * gridSize, gridSize, gridSize);

    ctx.fillStyle = 'green';
    snake.forEach(segment => {
        ctx.fillRect(segment.x * gridSize, segment.y * gridSize, gridSize, gridSize);
    });
}

document.addEventListener('keydown', e => {
    switch (e.key) {
        case 'ArrowUp':
            if (direction !== 'down') direction = 'up';
            break;
        case 'ArrowDown':
            if (direction !== 'up') direction = 'down';
            break;
        case 'ArrowLeft':
            if (direction !== 'right') direction = 'left';
            break;
        case 'ArrowRight':
            if (direction !== 'left') direction = 'right';
            break;
    }
});

1.0.1 运行步骤

1. 创建一个文件夹，将上述代码分别保存为 index.html、styles.css 和 script.js。
2. 打开 index.html 文件，就可以在浏览器中看到贪吃蛇游戏并开始玩游戏了。

这样，一个简单的贪吃蛇游戏就完成了。通过按键盘上的箭头键可以控制蛇的移动方向。