🎮ArcadeLab

Earth Rescue Journey 拯救地球

by StormPilot69
135 lines5.3 KB
▶ Play
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<style>
*{margin:0;padding:0;box-sizing:border-box;font-family:Arial}
body{overflow:hidden}
#game{width:100vw;height:100vh;position:relative}
/* 污染/干净双层背景 */
.dirty-bg{width:100%;height:100%;background:#3a3c44;position:absolute;top:0;left:0}
.clean-bg{width:100%;height:100%;background:linear-gradient(#87ceeb,#73d873);position:absolute;top:0;left:0;opacity:0;transition:opacity 2s}
/* 角色 */
.girl{width:120px;position:absolute;bottom:100px;left:180px}
.robot{width:90px;position:absolute;bottom:170px;left:310px;animation:float 2s infinite ease-in-out}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
/* 科技对话框 */
.talk-box{position:absolute;top:50px;left:50%;transform:translateX(-50%);background:rgba(40,160,255,0.15);border:2px solid #6cf;border-radius:12px;padding:14px 20px;color:#fff;text-align:center;max-width:680px;line-height:1.6;font-size:17px}
/* 可拖动垃圾 */
.trash{width:65px;position:absolute;cursor:grab}
/* 垃圾桶区域 */
.bin-group{position:absolute;bottom:25px;right:80px;display:flex;gap:18px}
.bin{width:85px;height:105px;background:#555;border:2px solid #fff;border-radius:8px;color:#fff;font-weight:bold;display:flex;align-items:center;justify-content:center;text-align:center;font-size:14px}
/* 底部提示文字 */
.tips{position:absolute;bottom:15px;left:20px;color:#fff;font-size:15px}
/* 通关弹窗 */
.win-pop{width:100%;height:100%;background:rgba(0,0,0,0.7);position:absolute;top:0;left:0;display:none;flex-direction:column;align-items:center;justify-content:center;color:#fff;font-size:30px;text-align:center}
button{margin-top:18px;padding:10px 26px;font-size:17px;background:#6cf;border:none;border-radius:6px;cursor:pointer}
</style>
</head>
<body>
<div id="game">
  <div class="dirty-bg"></div>
  <div class="clean-bg" id="cleanBg"></div>

  <!-- 角色图片（平台内置可用卡通图，无需外链） -->
  <img class="girl" src="https://assets.arcadelab.ai/assets/characters/girl-student.svg">
  <img class="robot" src="https://assets.arcadelab.ai/assets/robots/cute-mini-robot.svg">

  <!-- 开局双语剧情弹窗 -->
  <div class="talk-box" id="startText">
你好，宿主，你已穿越到地球毁灭时代，现在请开启你的旅程来去拯救地球，如果任务失败，地球将毁灭。<br>
Hello, Host. You have traveled to the era of Earth's destruction. Now, start your journey to save the Earth. If the mission fails, the Earth will be destroyed.
  </div>

  <!-- 可拖动垃圾，数量精简，降低难度 -->
  <img class="trash" style="top:200px;left:420px" data-type="recycle" src="https://assets.arcadelab.ai/assets/items/plastic-bottle.svg">
  <img class="trash" style="top:300px;left:600px" data-type="recycle" src="https://assets.arcadelab.ai/assets/items/metal-can.svg">
  <img class="trash" style="top:160px;left:760px" data-type="kitchen" src="https://assets.arcadelab.ai/assets/items/rotten-fruit.svg">

  <!-- 两类垃圾桶 -->
  <div class="bin-group">
    <div class="bin" data-bin="recycle">Recycle<br>可回收</div>
    <div class="bin" data-bin="kitchen">Kitchen<br>厨余</div>
  </div>

  <div class="tips">Drag rubbish into correct bin | 拖动垃圾到对应垃圾桶</div>

  <!-- 通关页面 -->
  <div class="win-pop" id="winPage">
You saved the Earth!<br>你成功拯救了地球！
<p style="font-size:19px;margin-top:8px">Let's protect our home together</p>
<button onclick="restart()">Play Again 重新游玩</button>
  </div>
</div>

<script>
const trashs = document.querySelectorAll('.trash');
const cleanBg = document.getElementById('cleanBg');
const winPage = document.getElementById('winPage');
const startText = document.getElementById('startText');
let total = trashs.length;
let clearNum = 0;

// 3.5秒自动关闭开场台词
setTimeout(()=>startText.style.display='none',3500);

// 拖拽垃圾逻辑
trashs.forEach(item=>{
  let drag = false, offX, offY;
  item.onmousedown = e=>{
    drag = true;
    offX = e.offsetX;
    offY = e.offsetY;
    item.style.zIndex = 999;
  }
  document.onmousemove = e=>{
    if(!drag) return;
    const gameDom = document.getElementById('game').getBoundingClientRect();
    item.style.left = (e.clientX - gameDom.left - offX) + 'px';
    item.style.top = (e.clientY - gameDom.top - offY) + 'px';
  }
  document.onmouseup = ()=>{
    if(!drag) return;
    drag = false;
    item.style.zIndex = 1;
    checkPut(item);
  }
})

// 判断投放垃圾桶是否正确
function checkPut(trash){
  const tType = trash.dataset.type;
  const bins = document.querySelectorAll('.bin');
  bins.forEach(bin=>{
    const bType = bin.dataset.bin;
    const tRect = trash.getBoundingClientRect();
    const bRect = bin.getBoundingClientRect();
    // 碰撞判定
    if(tRect.left < bRect.right && tRect.right > bRect.left && tRect.top < bRect.bottom && tRect.bottom > bRect.top){
      if(tType === bType){
        trash.style.display = 'none';
        clearNum++;
        checkAllClear();
      }else{
        alert('Wrong bin! Try again\n放错垃圾桶啦，重新分类');
      }
    }
  })
}

// 全部清理完毕，切换干净地球+弹出通关
function checkAllClear(){
  if(clearNum >= total){
    cleanBg.style.opacity = 1;
    setTimeout(()=>winPage.style.display='flex',1200);
  }
}

// 重新开局
function restart(){
  location.reload();
}
</script>
</body>
</html>

Game Source: Earth Rescue Journey 拯救地球

Creator: StormPilot69

Libraries: none

Complexity: moderate (135 lines, 5.3 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: earth-rescue-journey-stormpilot69" to link back to the original. Then publish at arcadelab.ai/publish.