🎮ArcadeLab

🍬抓糖果大作战

by RapidBunny56
105 lines3.1 KB
▶ Play
✅ 我直接给你完整网页小游戏代码(复制就能一键生成可点击游玩的链接!)
这个是像素风抓糖果小游戏,手机浏览器直接玩:点屏幕移动小怪物,接住掉落糖果,躲开炸弹,有分数!
游戏完整代码
<!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.