周末在家闲得慌?不如跟我一起用代码"养"条电子宠物蛇!准备好电脑和记事本,咱们不用任何游戏引擎,只用最原始的HTML+JavaScript,30分钟就能搞出个能玩的贪吃蛇。
一、搭好游戏舞台
先新建个snake.html文件,用记事本就能编辑。基础架子长这样:
- 画布区域:给蛇留个400x400像素的活动场地
- 得分显示:实时显示吃了多少"饲料"
- 控制按钮:开始/暂停/重置三件套
0分
1.1 画布美容术
给画布加点样式,在标签里写:
- 背景设成墨绿色(2c3e50)
- 蛇身用亮绿色(2ecc71)
- 食物用警示红色(e74c3c)
二、让蛇动起来
在里先声明游戏主角们:
| 变量 | 初始值 | 作用 |
| snake | [[200,200]] | 蛇身坐标 |
| food | [0,0] | 食物位置 |
| direction | 'right' | 移动方向 |
| score | 0 | 当前得分 |
2.1 绘制游戏元素
用canvas的绘图API来画:
function draw {const ctx = document.getElementById('gameBoard').getContext('2d');// 清空画布ctx.fillStyle = '2c3e50';ctx.fillRect(0, 0, 400, 400);// 画蛇(像不像绿皮火车?)ctx.fillStyle = '2ecc71';snake.forEach(([x, y]) => {ctx.fillRect(x, y, 20, 20);});// 画食物(红色小方块)ctx.fillStyle = 'e74c3c';ctx.fillRect(food, food, 20, 20);2.2 键盘操控
监听键盘事件,注意不能180度急转弯:
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;});三、核心游戏逻辑
现在来写让游戏转起来的发动机:
3.1 蛇的移动
每次移动把头往前挪,尾巴去掉(除非吃到食物):
function move {const head = [...snake];switch(direction) {case 'up': head -= 20; break;case 'down': head += 20; break;case 'left': head -= 20; break;case 'right': head += 20; break;snake.unshift(head);if(head === food && head === food) {generateFood;score += 10;} else {snake.pop;| 移动方向 | 坐标变化 | 边界处理 |
| 上 | Y-20 | 允许穿墙 |
| 下 | Y+20 | 实时更新 |
| 左 | X-20 | 碰撞检测 |
| 右 | X+20 | 得分累加 |
3.2 食物生成
确保食物不刷在蛇身上:

function generateFood {const isOnSnake = (x, y) =>snake.some(segment => segment === x && segment === y);do {food = Math.floor(Math.random 20) 20;food = Math.floor(Math.random 20) 20;} while(isOnSnake(food, food));四、游戏生命管理
给游戏加上开始/暂停/重置的开关:
let gameLoop;function startGame {if(!gameLoop) {gameLoop = setInterval( => {move;checkCollision;draw;document.getElementById('score').textContent = score;}, 200);function pauseGame {clearInterval(gameLoop);gameLoop = null;function resetGame {snake = [[200, 200]];direction = 'right';score = 0;generateFood;draw;最后在网页里按下开始按钮,看着你的小蛇在屏幕上游走,每次吃到红方块时身子就会长一截。试着调整interval的时间间隔,200毫秒的刷新率刚刚好,既不会快得反应不过来,也不会慢得像树懒。
要是想让游戏更难,可以加上围墙碰撞检测:修改checkCollision函数,当蛇头超出画布范围时触发游戏结束。或者给食物添加不同颜色,金色食物能得双倍分,蓝色食物会让蛇加速...这些扩展功能就等你自由发挥了。
保存文件后用浏览器打开,你的专属贪吃蛇就开始在屏幕上扭动啦!办公室摸鱼新玩具get√,记得别让老板发现哦~



渝公网安备50011502000989号