canvas实现贪食蛇的实践

当前位置：电视猫 > Html5>

电视猫时间： 2024-08-01 08:02:52

　　canvas实现贪食蛇的实践

使用Canvas实现贪食蛇游戏：详细指南

1. HTML结构

HTML

<!DOCTYPE html>
<html>
<head>
    <title>贪食蛇游戏</title>
    <style>
        canvas {
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <canvas id="myCanvas" width="300" height="300"></canvas>
    <script src="script.js"></script>
</body>
</html>

2. JavaScript代码（script.js）

JavaScript

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

// 游戏参数
const gridSize = 20;
const snakeSpeed = 100; // 毫秒
const snake = [{x: 10, y: 10}]; // 蛇的初始位置
let food = {x: 15, y: 15};
let direction = 'right';
let score = 0;
let gameOver = false;

// 绘制函数
function draw() {
    // 清空画布
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    // 绘制食物
    ctx.fillStyle = 'red';
    ctx.fillRect(food.x * gridSize, food.y * gridSize, gridSize, gr   1. github.com 

github.comidSize);

    // 绘制蛇
    ctx.fillStyle = 'green';
    for (let i = 0; i < snake.length; i++) {
        ctx.fillRect(snake[i].x * gridSize, snake[i].y * gridSize, gridSize, gridSize);
    }

    // 判断游戏结束
    if (gameOver) {
        ctx.font = '30px Arial';
        ctx.fillText('游戏结束！你的得分是：' + score, 50, canvas.height / 2);
        return;
    }
}

// 更新蛇的位置
function update() {
    // ... (后续代码)
}

// 生成食物
function generateFood() {
    // ... (后续代码)
}

// 控制蛇的方向
function changeDirection(newDirection) {
    // ... (后续代码)
}

// 游戏循环
function gameLoop() {
    update();
    draw();
    if (!gameOver) {
        setTimeout(gameLoop, snakeSpeed);
    }
}

// 初始化游戏
function init() {
    // ... (初始化代码)
    gameLoop();
}

init();