本书标签: 非小说  招财猫小锤  禁止模仿作者行为 

无题

招财猫小锤的第6本书

<!DOCTYPE html>

<html lang="zh-CN">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>极简贪吃蛇游戏</title>

<style>

body {

display: flex;

flex-direction: column;

align-items: center;

justify-content: center;

height: 100vh;

margin: 0;

background-color: #1a1a1a;

color: #fff;

font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

}

canvas {

background-color: #2d2d2d;

border: 2px solid #444;

box-shadow: 0 0 15px rgba(0,0,0,0.5);

}

.score-board {

font-size: 24px;

margin-bottom: 15px;

}

.instructions {

margin-top: 15px;

font-size: 14px;

color: #aaa;

}

</style>

</head>

<body>

<div class="score-board">得分: <span id="score">0</span></div>

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

<div class="instructions">使用 方向键 或 WASD 控制移动,按 空格键 开始/重新开始</div>

<script>

const canvas = document.getElementById('gameCanvas');

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

const scoreElement = document.getElementById('score');

const gridSize = 20; // 网格大小

const tileCount = canvas.width / gridSize; // 网格数量

let snake = [{ x: 10, y: 10 }]; // 蛇的初始位置

let food = { x: 5, y: 5 }; // 食物初始位置

let dx = 0; // x轴速度

let dy = 0; // y轴速度

let score = 0;

let gameLoop;

let isGameRunning = false;

// 绘制游戏画面

function drawGame() {

// 移动蛇

const head = { x: snake[0].x + dx, y: snake[0].y + dy };

// 碰壁检测

if (head.x < 0 || head.x >= tileCount || head.y < 0 || head.y >= tileCount) {

return gameOver();

}

// 撞到自己检测

for (let segment of snake) {

if (head.x === segment.x && head.y === segment.y) {

return gameOver();

}

}

snake.unshift(head); // 将新头部加入蛇身

// 吃到食物

if (head.x === food.x && head.y === food.y) {

score++;

scoreElement.textContent = score;

generateFood();

} else {

snake.pop(); // 没吃到食物,移除尾部

}

// 清空画布

ctx.fillStyle = '#2d2d2d';

ctx.fillRect(0, 0, canvas.width, canvas.height);

// 绘制食物

ctx.fillStyle = '#ff5555';

ctx.fillRect(food.x * gridSize, food.y * gridSize, gridSize - 2, gridSize - 2);

// 绘制蛇

ctx.fillStyle = '#55ff55';

snake.forEach((segment, index) => {

// 蛇头颜色稍微深一点

if (index === 0) ctx.fillStyle = '#33cc33';

else ctx.fillStyle = '#55ff55';

ctx.fillRect(segment.x * gridSize, segment.y * gridSize, gridSize - 2, gridSize - 2);

});

}

// 随机生成食物

function generateFood() {

food.x = Math.floor(Math.random() * tileCount);

food.y = Math.floor(Math.random() * tileCount);

// 确保食物不会生成在蛇身上

for (let segment of snake) {

if (food.x === segment.x && food.y === segment.y) {

generateFood();

return;

}

}

}

// 游戏结束处理

function gameOver() {

isGameRunning = false;

clearInterval(gameLoop);

ctx.fillStyle = 'rgba(0, 0, 0, 0.7)';

ctx.fillRect(0, 0, canvas.width, canvas.height);

ctx.fillStyle = '#fff';

ctx.font = '30px Arial';

ctx.textAlign = 'center';

ctx.fillText('游戏结束!', canvas.width / 2, canvas.height / 2 - 20);

ctx.font = '20px Arial';

ctx.fillText(`最终得分: ${score}`, canvas.width / 2, canvas.height / 2 + 20);

ctx.fillText('按空格键重新开始', canvas.width / 2, canvas.height / 2 + 55);

}

// 初始化/重置游戏

function initGame() {

snake = [{ x: 10, y: 10 }];

dx = 0;

dy = 0;

score = 0;

scoreElement.textContent = score;

generateFood();

if (gameLoop) clearInterval(gameLoop);

gameLoop = setInterval(drawGame, 100); // 100ms 刷新一次

isGameRunning = true;

}

// 键盘监听

document.addEventListener('keydown', (e) => {

if (!isGameRunning && e.code === 'Space') {

initGame();

return;

}

if (!isGameRunning) return;

switch(e.key) {

case 'ArrowUp': case 'w': case 'W':

if (dy === 0) { dx = 0; dy = -1; } break;

case 'ArrowDown': case 's': case 'S':

if (dy === 0) { dx = 0; dy = 1; } break;

case 'ArrowLeft': case 'a': case 'A':

if (dx === 0) { dx = -1; dy = 0; } break;

case 'ArrowRight': case 'd': case 'D':

if (dx === 0) { dx = 1; dy = 0; } break;

}

});

// 初始绘制等待界面

ctx.fillStyle = '#2d2d2d';

ctx.fillRect(0, 0, canvas.width, canvas.height);

ctx.fillStyle = '#fff';

ctx.font = '24px Arial';

ctx.textAlign = 'center';

ctx.fillText('按 空格键 开始游戏', canvas.width / 2, canvas.height / 2);

</script>

</body>

</html>

招财猫小锤(作者)
招财猫小锤(作者)

作者仅是分享此代码,不要去尝试,不要去尝试,不要去尝试,不然的话电脑出问题后果自己负责!!!!!!!!!!

招财猫小锤(作者)
招财猫小锤(作者)

作者只是分享,禁止尝试,否则电脑出了问题后果自负!

招财猫小锤(作者)
招财猫小锤(作者)

作者只是分享,禁止尝试,否则电脑出了问题,后果自负!!

招财猫小锤(作者)
招财猫小锤(作者)

作者只是分享,禁止尝试,否则电脑出了问题,后果自负!!!

招财猫小锤(作者)
招财猫小锤(作者)

OK?一定一定不要去尝试,否则电脑出了问题真的后果自负