贪吃蛇
by AtomicBunny8474 lines3.0 KB
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>贪吃蛇</title>
<style>*{margin:0;padding:0;box-sizing:border-box}body{background:#111;color:#0f0;font-family:system-ui,monospace;text-align:center;padding:10px}#score{font-size:22px;margin-bottom:8px}.game{border:3px solid #0f0;background:#000;margin:0 auto}.btn-box{margin-top:12px;display:grid;grid-template-columns:repeat(3,80px);gap:6px;justify-content:center}.ctrl-btn{width:80px;height:80px;font-size:28px;background:#222;color:#0f0;border:2px solid #0f0;border-radius:8px;touch-action:none;cursor:pointer;-webkit-tap-highlight-color:transparent}.ctrl-btn:active{background:#0f0;color:#000}</style>
</head>
<body>
<div id="score">得分：0</div>
<canvas class="game" id="snake" width="320" height="320"></canvas>
<div class="btn-box">
<div></div><button class="ctrl-btn" data-dir="up">↑</button><div></div>
<button class="ctrl-btn" data-dir="left">←</button><div></div><button class="ctrl-btn" data-dir="right">→</button>
<div></div><button class="ctrl-btn" data-dir="down">↓</button><div></div>
</div>
<script>
document.addEventListener('touchstart',()=>{},{passive:true});
const canvas=document.getElementById('snake');
const ctx=canvas.getContext('2d');
const scoreDom=document.getElementById('score');
const size=16;
let snake=[{x:160,y:160}];
let dir='right';
let nextDir='right';
let food=randomFood();
let score=0;
let timer;
function randomFood(){
return{x:Math.floor(Math.random()*(canvas.width/size))*size,y:Math.floor(Math.random()*(canvas.height/size))*size}
}
function draw(){
ctx.fillStyle='#000';ctx.fillRect(0,0,canvas.width,canvas.height);
ctx.fillStyle='#0f0';snake.forEach(p=>ctx.fillRect(p.x,p.y,size-2,size-2));
ctx.fillStyle='#f33';ctx.fillRect(food.x,food.y,size-2,size-2)
}
function update(){
dir=nextDir;
let head={...snake[0]};
if(dir==='up')head.y-=size;
if(dir==='down')head.y+=size;
if(dir==='left')head.x-=size;
if(dir==='right')head.x+=size;
if(head.x<0||head.y<0||head.x>=canvas.width||head.y>=canvas.height||snake.some(p=>p.x===head.x&&p.y===head.y)){
clearInterval(timer);
if(confirm('游戏结束！得分：'+score+'\n点击确定重新开始')){restartGame();}
return
}
snake.unshift(head);
if(head.x===food.x&&head.y===food.y){
score+=10;scoreDom.textContent='得分：'+score;food=randomFood()
}else{snake.pop()}
draw()
}
function restartGame(){
clearInterval(timer);
snake=[{x:160,y:160}];dir='right';nextDir='right';
food=randomFood();score=0;scoreDom.textContent='得分：0';
draw();timer=setInterval(update,120)
}
document.querySelectorAll('.ctrl-btn').forEach(b=>{
const clickHandle=()=>{
const d=b.dataset.dir;
if((dir==='up'&&d!=='down')||(dir==='down'&&d!=='up')||(dir==='left'&&d!=='right')||(dir==='right'&&d!=='left'))nextDir=d
};
b.addEventListener('touchstart',(e)=>{e.preventDefault();clickHandle();},{passive:false});
b.addEventListener('click',clickHandle);
});
draw();
timer=setInterval(update,120)
</script>
</body>
</html>
Game Source: 贪吃蛇
Creator: AtomicBunny84
Libraries: none
Complexity: moderate (74 lines, 3.0 KB)
The full source code is displayed above on this page.
Remix Instructions
To remix this game, copy the source code above and modify it. Add a ARCADELAB header at the top with "remix_of: game-atomicbunny84" to link back to the original. Then publish at arcadelab.ai/publish.