贪吃蛇（带游戏音效）
by AtomicBunny842 lines3.9 KB
data:text/html;charset=utf-8,<!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:16px;display:grid;grid-template-columns:repeat(3,90px);gap:8px;justify-content:center}.ctrl-btn{width:90px;height:90px;font-size:32px;background:#222;color:#0f0;border:2px solid #0f0;border-radius:8px;-webkit-tap-highlight-color:rgba(0,0,0,0);cursor:pointer}.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>let audioCtx;function initAudio(){audioCtx=new (window.AudioContext||window.webkitAudioContext)()}function playTone(freq,dur,type="square",vol=0.2){if(!audioCtx) return;let osc=audioCtx.createOscillator();let gain=audioCtx.createGain();osc.type=type;osc.frequency.value=freq;gain.gain.setValueAtTime(vol,audioCtx.currentTime);gain.gain.exponentialRampToValueAtTime(0.001,audioCtx.currentTime+dur);osc.connect(gain);gain.connect(audioCtx.destination);osc.start();osc.stop(audioCtx.currentTime+dur)}function playEat(){playTone(880,0.1,"sine",0.25);setTimeout(()=>playTone(1320,0.12,"sine",0.2),80)}function playGameOver(){playTone(220,0.25,"sawtooth",0.25);setTimeout(()=>playTone(165,0.3,"sawtooth",0.2),200)}function playBtnClick(){playTone(660,0.06,"square",0.15)}let bgmTimer;function startBGM(){let beat=0;bgmTimer=setInterval(()=>{let note=[330,392,440,392][beat%4];playTone(note,0.18,"square",0.08);beat++},220)}function stopBGM(){clearInterval(bgmTimer)}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);stopBGM();playGameOver();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();playEat()}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();stopBGM();startBGM();timer=setInterval(update,120)}document.querySelectorAll('.ctrl-btn').forEach(b=>{const clickHandle=()=>{initAudio();playBtnClick();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.onclick=clickHandle;b.ontouchstart=clickHandle;});draw();initAudio();startBGM();timer=setInterval(update,120)</script></body></html>
Game Source: 贪吃蛇（带游戏音效）
Creator: AtomicBunny84
Libraries: none
Complexity: simple (2 lines, 3.9 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-msz0ox5s" to link back to the original. Then publish at arcadelab.ai/publish.