1111111111111111111111111111111111111111111111111111111111111111111 - 科学教育

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>打鬼子小游戏</title>
<style>
body {
background-color: #f0f0f0;
text-align: center;
font-family: "微软雅黑", sans-serif;
}
#gameArea {
position: relative;
width: 600px;
height: 400px;
background: #a3d9ff;
margin: 20px auto;
border: 3px solid #333;
overflow: hidden;
}
.ghost {
position: absolute;
bottom: 10px;
width: 60px;
height: 60px;
border-radius: 15px;
line-height: 60px;
color: white;
font-weight: bold;
user-select: none;
cursor: pointer; /* 鼠标变成手形 */
text-align: center;
font-size: 14px;
}
#scoreBoard {
font-size: 20px;
margin-top: 10px;
}
#life {
font-size: 18px;
margin-top: 5px;
}
#message {
color: green;
font-weight: bold;
margin-top: 10px;
height: 24px;
}
</style>
</head>
<body>
<h2>打鬼子小游戏</h2>
<div id="gameArea"></div>
<div id="scoreBoard">积分：0</div>
<div id="life">生命：3</div>
<div id="message"></div>
<script>
const gameArea = document.getElementById('gameArea');
const scoreBoard = document.getElementById('scoreBoard');
const lifeDisplay = document.getElementById('life');
const message = document.getElementById('message');
let score = 0;
let life = 3;
// 鬼子类型：名字、颜色、难度等级、基础分数
const ghostTypes = [
{ name: '简单鬼子', color: '#44aa44', difficulty: 1, basePoint: 10 },
{ name: '中等鬼子', color: '#ffaa00', difficulty: 2, basePoint: 20 },
{ name: '困难鬼子', color: '#cc0000', difficulty: 3, basePoint: 40 }
];
let ghosts = []; // 当前屏幕上的鬼子数组
// 随机生成鬼子并添加到游戏区域
function createGhost() {
if (life <= 0) return; // 生命用完停止生成
// 随机选一个鬼子类型
const type = ghostTypes[Math.floor(Math.random() * ghostTypes.length)];
// 创建鬼子的DOM元素
const ghostElem = document.createElement('div');
ghostElem.classList.add('ghost');
ghostElem.style.backgroundColor = type.color;
ghostElem.textContent = type.name;
// 左边位置随机，保证鬼子不会超出容器宽度
ghostElem.style.left = Math.random() * (gameArea.clientWidth - 60) + 'px';
ghostElem.style.bottom = '10px';
gameArea.appendChild(ghostElem);
// 鬼子对象
const ghost = {
element: ghostElem,
bottom: 10,
type: type,
alive: true
};
// 点击鬼子时触发攻击
ghostElem.addEventListener('click', () => {
if (ghost.alive) {
ghost.alive = false;
removeGhost(ghost);
addScore(type.basePoint);
message.textContent = '打中了！得分 +'+type.basePoint;
}
});
ghosts.push(ghost);
}
// 更新所有鬼子的位置，让它们不断上升
function updateGhosts() {
ghosts.forEach(ghost => {
if (!ghost.alive) return;
ghost.bottom += ghost.type.difficulty; // 根据难度速度不同
if (ghost.bottom > gameArea.clientHeight) {
// 鬼子跑掉了，失去一条命
ghost.alive = false;
removeGhost(ghost);
loseLife();
message.textContent = '鬼子逃走了，扣一条命！';
} else {
ghost.element.style.bottom = ghost.bottom + 'px';
}
});
}
// 移除鬼子元素和数组中的鬼子对象
function removeGhost(ghost) {
if (ghost.element.parentNode === gameArea) {
gameArea.removeChild(ghost.element);
}
ghosts = ghosts.filter(g => g !== ghost);
}
// 增加积分
function addScore(points) {
score += points;
scoreBoard.textContent = '积分：' + score;
}
// 失去生命
function loseLife() {
life--;
updateLife();
if (life <= 0) {
message.textContent = '游戏结束！你的最终得分是：' + score;
clearInterval(gameLoop);
clearInterval(createGhostInterval);
}
}
// 更新生命显示
function updateLife() {
lifeDisplay.textContent = '生命：' + life;
}
// 游戏循环，每20ms刷新鬼子位置
const gameLoop = setInterval(() => {
if (life > 0) {
updateGhosts();
}
}, 20);
// 每2秒生成一个新鬼子
const createGhostInterval = setInterval(() => {
if (life > 0) {
createGhost();
}
}, 2000);
updateLife();
scoreBoard.textContent = '积分：' + score;
</script>
</body>
</html>

复制代码