🎮ArcadeLab

♻️ 节能减排大作战

by BlazingShark51
106 lines3.0 KB
▶ Play
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>♻️ 节能减排大作战</title>
<style>
body{margin:0;padding:20px;font-family:Arial;background:#f0f8ff;text-align:center;}
#game{max-width:400px;margin:0 auto;background:white;padding:15px;border-radius:10px;box-shadow:0 0 10px #0002;}
#info{display:flex;justify-content:space-between;margin-bottom:10px;font-weight:bold;}
#binArea{display:flex;justify-content:space-around;margin:15px 0;}
.bin{width:80px;height:100px;border-radius:8px;display:flex;align-items:center;justify-content:center;color:white;font-weight:bold;}
#trashItem{width:60px;height:60px;background:#888;border-radius:8px;margin:20px auto;line-height:60px;color:white;font-weight:bold;}
button{padding:10px 20px;font-size:16px;margin-top:10px;}
</style>
</head>
<body>
<div id="game">
  <h2>♻️ 节能减排大作战</h2>
  <div id="info">
    <span>分数：<span id="score">0</span></span>
    <span>碳值：<span id="carbon">0</span>/100</span>
    <span>时间：<span id="time">60</span>秒</span>
  </div>

  <div id="binArea">
    <div class="bin" style="background:#2ecc71;">可回收</div>
    <div class="bin" style="background:#e74c3c;">有害</div>
    <div class="bin" style="background:#f39c12;">厨余</div>
    <div class="bin" style="background:#34495e;">其他</div>
  </div>

  <div id="trashItem">纸</div>
  <p>点击正确垃圾桶！</p>

  <button id="startBtn">开始游戏</button>
</div>

<script>
let score=0, carbon=0, time=60, timer=null;
let items=[
  {text:"纸",type:0,co2:-5},
  {text:"电池",type:1,co2:10},
  {text:"果皮",type:2,co2:-3},
  {text:"塑料袋",type:3,co2:8},
  {text:"易拉罐",type:0,co2:-6},
  {text:"灯泡",type:1,co2:12},
  {text:"菜叶",type:2,co2:-2},
  {text:"烟头",type:3,co2:5}
];
let current=null;

const scoreEl=document.getElementById("score");
const carbonEl=document.getElementById("carbon");
const timeEl=document.getElementById("time");
const trashEl=document.getElementById("trashItem");
const startBtn=document.getElementById("startBtn");
const bins=document.querySelectorAll(".bin");

function randomItem(){
  current=items[Math.floor(Math.random()*items.length)];
  trashEl.textContent=current.text;
}

function updateUI(){
  scoreEl.textContent=score;
  carbonEl.textContent=carbon;
  timeEl.textContent=time;
}

function gameOver(msg){
  clearInterval(timer);
  alert(msg+"\n最终分数："+score);
  startBtn.disabled=false;
}

bins.forEach((bin,i)=>{
  bin.addEventListener("click",()=>{
    if(!current)return;
    if(i===current.type){
      score+=10;
      carbon=Math.max(0,carbon+current.co2);
    }else{
      carbon+=15;
    }
    if(carbon>=100)return gameOver("碳超标！游戏结束");
    randomItem();
    updateUI();
  });
});

startBtn.addEventListener("click",()=>{
  score=0;carbon=0;time=60;
  startBtn.disabled=true;
  randomItem();
  updateUI();
  timer=setInterval(()=>{
    time--;
    updateUI();
    if(time<=0)gameOver("时间到！");
  },1000);
});
</script>
</body>
</html>

Game Source: ♻️ 节能减排大作战

Creator: BlazingShark51

Libraries: none

Complexity: moderate (106 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: -blazingshark51" to link back to the original. Then publish at arcadelab.ai/publish.