🍬抓糖果大作战
by RapidBunny56105 lines3.1 KB
✅ 我直接给你完整网页小游戏代码(复制就能一键生成可点击游玩的链接!)
这个是像素风抓糖果小游戏,手机浏览器直接玩:点屏幕移动小怪物,接住掉落糖果,躲开炸弹,有分数!
游戏完整代码
<!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>
*{margin:0;padding:0;box-sizing:border-box}
body{background:#111;color:#fff;font-family:system-ui}
#game{background:#222;margin:10px auto;display:block;border:4px solid #ffb700;border-radius:12px}
.info{text-align:center;margin:8px;font-size:18px}
</style>
</head>
<body>
<div class="info">分数:<span id="score">0</span></div>
<canvas id="game" width="360" height="520"></canvas>
<script>
const canvas = document.getElementById('game');
const ctx = canvas.getContext('2d');
const scoreText = document.getElementById('score');
let score = 0;
let player = {x:160,y:460,w:60,h:60};
let items = [];
let gameLoop;
// 触摸/鼠标控制
canvas.addEventListener('touchmove',e=>{
e.preventDefault();
const t = e.touches[0];
const rect = canvas.getBoundingClientRect();
player.x = t.clientX - rect.left - player.w/2;
if(player.x<0)player.x=0;
if(player.x>canvas.width-player.w)player.x=canvas.width-player.w;
})
canvas.onmousemove = e=>{
const rect = canvas.getBoundingClientRect();
player.x = e.clientX - rect.left - player.w/2;
if(player.x<0)player.x=0;
if(player.x>canvas.width-player.w)player.x=canvas.width-player.w;
}
// 生成糖果/炸弹
function spawn(){
const isCandy = Math.random()>0.3;
items.push({
x:Math.random()*(canvas.width-40),
y:-40,
w:40,h:40,
type: isCandy ? 'candy' : 'bomb',
speed: 2 + Math.random()*2
})
}
// 碰撞检测
function hit(a,b){
return a.x < b.x+b.w && a.x+a.w > b.x && a.y < b.y+b.h && a.y+a.h > b.y
}
function draw(){
ctx.clearRect(0,0,canvas.width,canvas.height);
//玩家
ctx.fillStyle='#4fc3f7';
ctx.fillRect(player.x,player.y,player.w,player.h);
ctx.fillStyle='#000';
ctx.beginPath();
ctx.arc(player.x+18,player.y+18,7,0,Math.PI*2);ctx.fill();
ctx.beginPath();
ctx.arc(player.x+42,player.y+18,7,0,Math.PI*2);ctx.fill();
for(let i=items.length-1;i>=0;i--){
const it = items[i];
it.y += it.speed;
if(it.type==='candy') ctx.fillStyle='#ff5e99';
else ctx.fillStyle='#444';
ctx.fillRect(it.x,it.y,it.w,it.h);
if(hit(it,player)){
if(it.type==='candy') score +=10;
else score -=20;
items.splice(i,1);
scoreText.textContent = score;
continue;
}
if(it.y>canvas.height) items.splice(i,1);
}
}
function loop(){
draw();
gameLoop = requestAnimationFrame(loop);
}
setInterval(spawn,700);
loop();
</script>
</body>
</html>
📌 怎么一键变成【点开就能玩的链接】
打开网站:https://arcadelab.ai/publish
把上面这一大段代码全部复制粘贴进去
点发布,网站自动生成一条链接!直接点链接就能玩这个抓糖果游戏,手机电脑都行 ✨
要不要我再给你换别的游戏代码?比如:迷宫游戏、打砖块、或者像素小闯关?Game Source: 🍬抓糖果大作战
Creator: RapidBunny56
Libraries: none
Complexity: moderate (105 lines, 3.1 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-rapidbunny56" to link back to the original. Then publish at arcadelab.ai/publish.