炫彩贪吃蛇

创作时间:

作者:

@小白创作中心

炫彩贪吃蛇

引用

CSDN

等

来源

https://blog.csdn.net/2301_79263365/article/details/139783074

https://www.gcores.com/articles/135976

https://blog.csdn.net/weixin_45953673/article/details/120040896

https://zh.wikipedia.org/wiki/%E8%B4%AA%E9%A3%9F%E8%9B%87

https://www.coolmathgames.com/zh-hans/blog/%E8%B4%AA%E5%90%83%E8%9B%87%E6%B8%B8%E6%88%8F%E7%9A%84%E5%8E%86%E5%8F%B2

https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API/Tutorial

https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API

https://www.cnblogs.com/itcq1024/p/18665421

https://www.w3school.com.cn/jsref/api_canvas.asp

贪吃蛇游戏，这个诞生于1976年的经典游戏，从街机时代一路走来，见证了电子游戏的发展历程。它不仅在诺基亚手机上风靡一时，至今仍在社交媒体上保持着热度。今天，我们就来学习如何使用HTML、CSS和JavaScript，从零开始制作一个炫酷的贪吃蛇网页游戏。

技术准备

在开始之前，我们需要了解一些基本的网页开发知识。HTML（超文本标记语言）用于搭建网页结构，CSS（层叠样式表）用于设置页面样式，JavaScript则负责实现交互逻辑。而Canvas API是HTML5中新增的功能，它提供了一个可以使用JavaScript绘制图形的画布，非常适合用来制作游戏。

代码实现

1. 搭建基本结构

首先，我们需要创建一个HTML文件，定义游戏的基本结构：

<!DOCTYPE html>
<html>
<head>
    <title>炫彩贪吃蛇</title>
    <style>
        /* 这里将添加CSS样式 */
    </style>
</head>
<body>
    <div class="score">得分: <span id="score">0</span></div>
    <canvas id="gameCanvas" width="600" height="400"></canvas>
    <button onclick="resetGame()">重新开始</button>
    <script>
        // 这里将添加JavaScript代码
    </script>
</body>
</html>

2. 添加CSS样式

接下来，我们为游戏添加一些基本的样式和动画效果：

body {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: linear-gradient(45deg, #1a1a1a, #2a2a2a);
    overflow: hidden;
}

#gameCanvas {
    border: 3px solid rgba(255,255,255,0.1);
    border-radius: 10px;
    box-shadow: 0 0 50px rgba(0,255,255,0.2);
    animation: canvasGlow 3s infinite alternate;
}

@keyframes canvasGlow {
    from { box-shadow: 0 0 30px rgba(0,255,255,0.2); }
    to { box-shadow: 0 0 60px rgba(255,0,255,0.3); }
}

.score {
    color: #fff;
    font-family: Arial;
    font-size: 24px;
    text-shadow: 0 0 10px #00ffff;
    animation: scoreFloat 2s infinite;
}

@keyframes scoreFloat {
    50% { transform: translateY(-5px); }
}

3. 编写JavaScript逻辑

最后，我们添加游戏的核心逻辑：

const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
const GRID_SIZE = 20;
let snake = [{x: 10, y: 10}];
let food = generateFood();
let dx = 1;
let dy = 0;
let score = 0;
let hue = 0;

function generateFood() {
    return {
        x: Math.floor(Math.random() * (canvas.width/GRID_SIZE)),
        y: Math.floor(Math.random() * (canvas.height/GRID_SIZE)),
        hue: Math.random() * 360
    };
}

function draw() {
    ctx.fillStyle = `hsl(${hue}, 50%, 5%)`;
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    hue = (hue + 0.5) % 360;

    snake.forEach((segment, index) => {
        ctx.beginPath();
        ctx.fillStyle = `hsl(${(hue + index * 10) % 360}, 100%, 50%)`;
        ctx.roundRect(segment.x * GRID_SIZE, segment.y * GRID_SIZE, 
                    GRID_SIZE, GRID_SIZE, 5);
        ctx.fill();
    });

    ctx.save();
    ctx.translate((food.x + 0.5) * GRID_SIZE, (food.y + 0.5) * GRID_SIZE);
    ctx.rotate(Date.now() / 500);
    ctx.fillStyle = `hsl(${food.hue}, 100%, 50%)`;
    ctx.beginPath();
    ctx.arc(0, 0, GRID_SIZE/2, 0, Math.PI * 2);
    ctx.fill();
    ctx.restore();

    ctx.shadowColor = `hsl(${hue}, 100%, 50%)`;
    ctx.shadowBlur = 20;

    moveSnake();
    checkCollision();
    requestAnimationFrame(draw);
}

function moveSnake() {
    const head = {x: snake[0].x + dx, y: snake[0].y + dy};
    snake.unshift(head);
    if (head.x === food.x && head.y === food.y) {
        score += 10;
        document.getElementById('score').textContent = score;
        food = generateFood();
        document.getElementById('score').style.transform = 'scale(1.2)';
        setTimeout(() => {
            document.getElementById('score').style.transform = 'scale(1)';
        }, 200);
    } else {
        snake.pop();
    }
}

function checkCollision() {
    const head = snake[0];
    if (head.x < 0 || head.x >= canvas.width/GRID_SIZE ||
        head.y < 0 || head.y >= canvas.height/GRID_SIZE ||
        snake.slice(1).some(segment => segment.x === head.x && segment.y === head.y)) {
        canvas.style.transform = 'rotate(5deg)';
        setTimeout(() => {
            canvas.style.transform = 'rotate(-5deg)';
            setTimeout(() => {
                canvas.style.transform = 'rotate(0deg)';
            }, 100);
        }, 100);
        resetGame();
    }
}

function resetGame() {
    snake = [{x: 10, y: 10}];
    dx = 1;
    dy = 0;
    score = 0;
    document.getElementById('score').textContent = score;
    food = generateFood();
}

document.addEventListener('keydown', (event) => {
    switch(event.key) {
        case 'ArrowUp': if (dy !== 1) { dx = 0; dy = -1; } break;
        case 'ArrowDown': if (dy !== -1) { dx = 0; dy = 1; } break;
        case 'ArrowLeft': if (dx !== 1) { dx = -1; dy = 0; } break;
        case 'ArrowRight': if (dx !== -1) { dx = 1; dy = 0; } break;
    }
});

draw();