Earth Rescue Journey 拯救地球
by StormPilot69315 lines9.1 KB
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
*{margin:0;padding:0;box-sizing:border-box;font-family:Arial, Helvetica, sans-serif}
html,body{width:100%;height:100%;overflow:hidden}
/* 核心：强制16:9铺满全屏，无小黑边 */
#game{
width:100vw;
height:100vh;
max-width:100%;
max-height:100%;
position:relative;
transform-origin:center center;
}
/* 双层背景 污染/清新切换 */
.dirty-bg{
width:100%;height:100%;
background:linear-gradient(#383a47,#222329);
position:absolute;top:0;left:0;
}
.clean-bg{
width:100%;height:100%;
background:linear-gradient(#7fc0ff,#76e076);
position:absolute;top:0;left:0;
opacity:0;transition:opacity 2.5s ease;
}
/* 人物放大2倍，超大清晰 */
.girl{
width:240px;
position:absolute;
bottom:120px;
left:150px;
}
.robot{
width:180px;
position:absolute;
bottom:220px;
left:360px;
animation:float 2s infinite ease-in-out;
}
@keyframes float{
0%,100%{transform:translateY(0)}
50%{transform:translateY(-20px)}
}
/* 开局科技对话框 超大文字 */
.talk-box{
position:absolute;
top:60px;
left:50%;
transform:translateX(-50%);
background:rgba(20,130,255,0.2);
border:3px solid #6cf;
border-radius:16px;
padding:24px 36px;
color:#fff;
font-size:24px;
text-align:center;
max-width:850px;
line-height:1.8;
backdrop-filter:blur(6px);
}
/* 垃圾放大2倍，清晰可见 */
.trash{
width:130px;
position:absolute;
cursor:grab;
transition:transform 0.1s;
}
.trash:active{transform:scale(1.15)}
/* 垃圾桶放大，4类齐全，带发光反馈 */
.bin-group{
position:absolute;
bottom:40px;
right:60px;
display:flex;
gap:25px;
}
.bin{
width:140px;height:170px;
border:3px solid #fff;
border-radius:10px;
color:#fff;
font-size:20px;
font-weight:bold;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
text-align:center;
transition:box-shadow 0.3s;
}
.bin.glow{
box-shadow:0 0 30px #6cf,0 0 60px #4cf;
}
/* 计分、提示文字放大 */
.score-text{
position:absolute;
top:40px;
left:40px;
color:#fff;
font-size:28px;
font-weight:bold;
}
.tips{
position:absolute;
bottom:20px;
left:30px;
color:#fff;
font-size:22px;
}
/* 机器人实时双语提示气泡 */
.robot-tip{
position:absolute;
left:520px;
top:120px;
background:#fff;
color:#222;
padding:14px 22px;
border-radius:12px;
font-size:20px;
display:none;
max-width:450px;
line-height:1.6;
}
/* 通关全屏弹窗 */
.win-pop{
width:100%;height:100%;
background:rgba(0,0,0,0.75);
position:absolute;top:0;left:0;
display:none;
flex-direction:column;
align-items:center;
justify-content:center;
color:#fff;
font-size:46px;
text-align:center;
}
button{
margin-top:30px;
padding:16px 40px;
font-size:24px;
background:#6cf;
border:none;
border-radius:8px;
cursor:pointer;
}
/* 全屏按钮 */
.full-btn{
position:absolute;
top:40px;
right:40px;
font-size:20px;
padding:10px 20px;
background:rgba(255,255,255,0.25);
color:#fff;
border:2px solid #fff;
border-radius:6px;
cursor:pointer;
}
</style>
</head>
<body>
<div id="game">
<!-- 全屏切换按钮 -->
<button class="full-btn" onclick="fullScreen()">Full Screen 全屏</button>
<!-- 双层背景 -->
<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>
<!-- 机器人实时双语提示气泡 -->
<div class="robot-tip" id="robotMsg"></div>
<!-- 计分板 -->
<div class="score-text">Score 分数：<span id="scoreNum">0</span></div>
<!-- 大量放大垃圾，4种分类，互动更多 -->
<img class="trash" style="top:180px;left:380px" data-type="recycle" src="https://assets.arcadelab.ai/assets/items/plastic-bottle.svg">
<img class="trash" style="top:300px;left:550px" data-type="recycle" src="https://assets.arcadelab.ai/assets/items/metal-can.svg">
<img class="trash" style="top:140px;left:720px" data-type="kitchen" src="https://assets.arcadelab.ai/assets/items/rotten-fruit.svg">
<img class="trash" style="top:400px;left:460px" data-type="paper" src="https://assets.arcadelab.ai/assets/items/paper.svg">
<img class="trash" style="top:260px;left:820px" data-type="harmful" src="https://assets.arcadelab.ai/assets/items/battery.svg">
<!-- 四大分类超大垃圾桶 -->
<div class="bin-group">
<div class="bin" style="background:#3399ff" data-bin="recycle">Recycle<br>可回收</div>
<div class="bin" style="background:#70b85d" data-bin="kitchen">Kitchen<br>厨余</div>
<div class="bin" style="background:#ffffff;color:#333" data-bin="paper">Paper<br>纸张</div>
<div class="bin" style="background:#ff4444" data-bin="harmful">Harmful<br>有害</div>
</div>
<div class="tips">Drag rubbish into correct bin | 拖动垃圾到对应垃圾桶加分</div>
<!-- 通关全屏弹窗 -->
<div class="win-pop" id="winPage">
You saved the Earth Successfully!<br>你成功拯救了地球！
<p style="font-size:26px;margin-top:15px;">Let's protect our blue home together</p>
<button onclick="restartGame()">Play Again 重新游玩</button>
</div>
</div>
<script>
const trashList = document.querySelectorAll('.trash');
const cleanBg = document.getElementById('cleanBg');
const winPage = document.getElementById('winPage');
const startText = document.getElementById('startText');
const robotMsg = document.getElementById('robotMsg');
const scoreNum = document.getElementById('scoreNum');
const gameBox = document.getElementById('game');
let totalTrash = trashList.length;
let clearCount = 0;
let score = 0;
// 3.8秒自动关闭开场剧情
setTimeout(()=>startText.style.display='none',3800);
// 全屏切换功能
function fullScreen(){
if(!document.fullscreenElement){
gameBox.requestFullscreen().catch(err=>console.log(err));
}else{
document.exitFullscreen();
}
}
// 机器人弹出双语提示
function showRobotTip(cn,en){
robotMsg.innerHTML = cn + "<br>" + en;
robotMsg.style.display = 'block';
setTimeout(()=>robotMsg.style.display='none',2200);
}
// 拖拽垃圾逻辑
trashList.forEach(trash=>{
let drag = false, offX, offY;
trash.onmousedown = e=>{
drag = true;
offX = e.offsetX;
offY = e.offsetY;
trash.style.zIndex = 9999;
}
document.onmousemove = e=>{
if(!drag) return;
const rect = gameBox.getBoundingClientRect();
trash.style.left = (e.clientX - rect.left - offX) + 'px';
trash.style.top = (e.clientY - rect.top - offY) + 'px';
}
document.onmouseup = ()=>{
if(!drag) return;
drag = false;
trash.style.zIndex = 1;
checkPut(trash);
}
})
// 判断投放垃圾桶对错+互动反馈
function checkPut(trash){
const tType = trash.dataset.type;
const bins = document.querySelectorAll('.bin');
let hitBin = null;
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){
hitBin = bin;
if(tType === bType){
// 投放正确：加分、发光、机器人鼓励提示
hitBin.classList.add('glow');
setTimeout(()=>hitBin.classList.remove('glow'),1200);
trash.style.display = 'none';
clearCount++;
score += 20;
scoreNum.innerText = score;
showRobotTip("太棒啦！分类正确，地球变干净一点啦！","Great job! Correct sorting, Earth is cleaner now!");
checkWin();
}else{
// 投放错误：机器人温柔提醒，不扣分
showRobotTip("放错垃圾桶啦，再试一次哦！","Wrong bin, please try again!");
}
}
})
}
// 全部清理完成，切换干净地球+弹出通关页面
function checkWin(){
if(clearCount >= totalTrash){
cleanBg.style.opacity = 1;
setTimeout(()=>winPage.style.display='flex',1500);
}
}
// 重新开始游戏
function restartGame(){
location.reload();
}
</script>
</body>
</html>Game Source: Earth Rescue Journey 拯救地球
Creator: StormPilot69
Libraries: none
Complexity: complex (315 lines, 9.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: earth-rescue-journey-stormpilot69-mqkblp1i" to link back to the original. Then publish at arcadelab.ai/publish.