碳减排小游戏
by BlazingShark51265 lines7.5 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;
font-family: "微软雅黑", sans-serif;
}
body {
background: linear-gradient(135deg, #e8f5e9, #c8e6c9);
overflow: hidden;
}
/* 顶部信息栏 */
.header {
width: 100%;
height: 60px;
background: #2e7d32;
color: #fff;
display: flex;
justify-content: space-around;
align-items: center;
font-size: 18px;
box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
/* 游戏主区域 */
#gameBox {
width: 100vw;
height: calc(100vh - 60px);
position: relative;
}
/* 通用球体样式 */
.ball {
position: absolute;
border-radius: 50%;
cursor: pointer;
transition: transform 0.1s;
}
.ball:active {
transform: scale(0.8);
}
/* 碳排放气泡 */
.carbon {
background: radial-gradient(#757575, #424242);
box-shadow: 0 0 10px #616161;
}
/* 绿植加分球 */
.plant {
background: radial-gradient(#81c784, #388e3c);
box-shadow: 0 0 10px #4caf50;
}
/* 污染减分球 */
.pollute {
background: radial-gradient(#ef9a9a, #c62828);
box-shadow: 0 0 10px #f44336;
}
/* 开始/结束弹窗 */
.modal {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: rgba(0,0,0,0.7);
display: flex;
justify-content: center;
align-items: center;
z-index: 999;
}
.modal-content {
background: #fff;
padding: 40px 30px;
border-radius: 16px;
text-align: center;
width: 90%;
max-width: 400px;
}
.modal h2 {
color: #2e7d32;
margin-bottom: 20px;
}
.modal p {
color: #666;
line-height: 1.8;
margin-bottom: 25px;
}
.btn {
padding: 12px 35px;
background: #4caf50;
color: #fff;
border: none;
border-radius: 8px;
font-size: 16px;
cursor: pointer;
transition: background 0.3s;
}
.btn:hover {
background: #2e7d32;
}
.hide {
display: none !important;
}
</style>
</head>
<body>
<!-- 顶部状态栏 -->
<div class="header">
<div>剩余时间：<span id="time">60</span> s</div>
<div>碳减排积分：<span id="score">0</span></div>
</div>
<!-- 游戏区域 -->
<div id="gameBox"></div>
<!-- 开始弹窗 -->
<div class="modal" id="startModal">
<div class="modal-content">
<h2>🌱 碳减排大挑战</h2>
<p>点击灰色气泡减少碳排放<br>点击绿色绿植额外加分<br>避开红色污染球，会扣除积分哦</p >
<button class="btn" onclick="startGame()">开始游戏</button>
</div>
</div>
<!-- 结束弹窗 -->
<div class="modal hide" id="endModal">
<div class="modal-content">
<h2>游戏结束！</h2>
<p>本次碳减排总积分：<br><span id="finalScore" style="font-size:24px;color:#2e7d32;font-weight:bold"></span></p >
<p>低碳生活，从我做起！</p >
<button class="btn" onclick="restartGame()">再来一局</button>
</div>
</div>
<script>
// 全局变量
let gameTimer;
let remainTime = 60;
let score = 0;
let isPlaying = false;
const gameBox = document.getElementById('gameBox');
const timeDom = document.getElementById('time');
const scoreDom = document.getElementById('score');
const startModal = document.getElementById('startModal');
const endModal = document.getElementById('endModal');
const finalScoreDom = document.getElementById('finalScore');
// 生成随机球体
function createBall() {
if (!isPlaying) return;
// 随机大小 30~70px
const size = Math.floor(Math.random() * 40) + 30;
const ball = document.createElement('div');
ball.className = 'ball';
ball.style.width = size + 'px';
ball.style.height = size + 'px';
// 随机位置
const maxX = gameBox.clientWidth - size;
const maxY = gameBox.clientHeight - size;
const x = Math.floor(Math.random() * maxX);
const y = Math.floor(Math.random() * maxY);
ball.style.left = x + 'px';
ball.style.top = y + 'px';
// 随机类型 碳排放/绿植/污染
const rand = Math.random();
if (rand < 0.6) {
ball.classList.add('carbon');
// 碳排放 +10分
ball.onclick = function() {
score += 10;
updateScore();
removeBall(ball);
}
} else if (rand < 0.85) {
ball.classList.add('plant');
// 绿植 +20分
ball.onclick = function() {
score += 20;
updateScore();
removeBall(ball);
}
} else {
ball.classList.add('pollute');
// 污染 -15分
ball.onclick = function() {
score -= 15;
if (score < 0) score = 0;
updateScore();
removeBall(ball);
}
}
gameBox.appendChild(ball);
// 球体自动消失 3秒
setTimeout(() => {
removeBall(ball);
}, 3000);
}
// 移除球体
function removeBall(ele) {
if (ele.parentNode) {
ele.parentNode.removeChild(ele);
}
}
// 更新分数
function updateScore() {
scoreDom.innerText = score;
}
// 开始游戏
function startGame() {
startModal.classList.add('hide');
isPlaying = true;
remainTime = 60;
score = 0;
updateScore();
timeDom.innerText = remainTime;
// 倒计时
gameTimer = setInterval(() => {
remainTime--;
timeDom.innerText = remainTime;
if (remainTime <= 0) {
endGame();
}
}, 1000);
// 持续生成球体
setInterval(createBall, 600);
}
// 结束游戏
function endGame() {
isPlaying = false;
clearInterval(gameTimer);
// 清空所有球体
gameBox.innerHTML = '';
finalScoreDom.innerText = score;
endModal.classList.remove('hide');
}
// 重新开始
function restartGame() {
endModal.classList.add('hide');
startGame();
}
</script>
</body>
</html>Game Source: 碳减排小游戏
Creator: BlazingShark51
Libraries: none
Complexity: complex (265 lines, 7.5 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-mpqn4uyo" to link back to the original. Then publish at arcadelab.ai/publish.