11111111111111111111111111111111111111111 - 科学教育

<!DOCTYPE html>
<html lang="zh">
<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;
background-color: red;
border-radius: 15px;
line-height: 60px;
color: white;
font-weight: bold;
user-select: none;
cursor: default;
}
#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>
<h1>打鬼子小游戏</h1>
<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 probability = Math.random();
let typeIndex;
if (probability < 0.6) typeIndex = 0; // 60%简单
else if (probability < 0.9) typeIndex = 1; // 30%中等
else typeIndex = 2; // 10%困难
const type = ghostTypes[typeIndex];
// 创建鬼子div
const ghostDiv = document.createElement('div');
ghostDiv.classList.add('ghost');
ghostDiv.style.backgroundColor = type.color;
ghostDiv.textContent = type.name[0]; // 显示第一个字方便识别
// 随机水平位置在游戏区宽度内
const maxX = gameArea.clientWidth - 60;
const xPos = Math.floor(Math.random() * maxX);
ghostDiv.style.left = xPos + 'px';
ghostDiv.style.bottom = '10px';
gameArea.appendChild(ghostDiv);
// 鬼子属性
const ghost = {
element: ghostDiv,
type: type,
positionX: xPos,
bottom: 10,
alive: true,
lifePoints: type.difficulty, // 需要几次攻击才能打死
// 死得“惨”的程度，用不同的死法加分
deathStyle: null
};
ghosts.push(ghost);
}
// 鬼子移动，向上漂浮并慢慢消失
function moveGhosts() {
ghosts.forEach((ghost, index) => {
if (!ghost.alive) return;
ghost.bottom += 1; // 每次上升1px
if (ghost.bottom > gameArea.clientHeight) {
// 鬼子逃走了，少一条命
removeGhost(index);
loseLife();
message.textContent = "鬼子跑掉了，扣一条命！";
} else {
ghost.element.style.bottom = ghost.bottom + 'px';
}
});
}
// 移除鬼子
function removeGhost(index) {
if (ghosts[index]) {
gameArea.removeChild(ghosts[index].element);
ghosts.splice(index, 1);
}
}
// 失去生命
function loseLife() {
life--;
updateLife();
if (life <= 0) {
message.textContent = "游戏结束！你的积分：" + score;
clearInterval(gameLoop);
clearInterval(ghostCreator);
}
}
// 更新生命显示
function updateLife() {
lifeDisplay.textContent = "生命：" + life;
}
// 更新积分显示
function updateScore() {
scoreBoard.textContent = "积分：" + score;
}
// 计算打到鬼子的积分
function calculatePoints(ghost, attackType) {
// attackType是踢、踩、打
// 打得越惨积分越多，踢最高30%，踩次之，打基础
let multiplier = 1;
if (attackType === 'kick') multiplier = 1.3;
else if (attackType === 'step') multiplier = 1.2;
else multiplier = 1;
return Math.floor(ghost.type.basePoint * multiplier);
}
// 玩家攻击操作，参数是按什么键触发
function playerAttack(key) {
if (life <= 0) return; // 游戏结束不处理
if (ghosts.length === 0) {
message.textContent = "没有鬼子可以攻击！";
return;
}
let attackType = null;
if (key === 'ArrowUp') attackType = 'kick'; // 上箭头踢鬼子
else if (key === 'ArrowDown') attackType = 'step'; // 下箭头踩鬼子
else if (key === 'ArrowLeft' || key === 'ArrowRight') attackType = 'hit'; // 左右箭头打鬼子
else return;
// 攻击第一个鬼子（最先出现的）
const ghost = ghosts[0];
ghost.lifePoints--;
if (ghost.lifePoints <= 0) {
// 鬼子死了，获得积分
const gained = calculatePoints(ghost, attackType);
score += gained;
updateScore();
// 死得惨的提示
if (attackType === 'kick') {
message.textContent = "你踢死了" + ghost.type.name + "！得+" + gained + "分";
} else if (attackType === 'step') {
message.textContent = "你踩死了" + ghost.type.name + "！得+" + gained + "分";
} else {
message.textContent = "你打死了" + ghost.type.name + "！得+" + gained + "分";
}
// 移除鬼子
const index = ghosts.indexOf(ghost);
if (index >= 0) removeGhost(index);
} else {
message.textContent = "你" + (attackType === 'kick' ? '踢' : attackType === 'step' ? '踩' : '打') + "中了" + ghost.type.name + "，还需要" + ghost.lifePoints + "下";
}
}
// 游戏循环，每50毫秒移动鬼子
const gameLoop = setInterval(() => {
moveGhosts();
}, 50);
// 每2秒产生新鬼子
const ghostCreator = setInterval(() => {
createGhost();
}, 2000);
// 监听键盘事件
window.addEventListener('keydown', e => {
playerAttack(e.key);
});
updateLife();
updateScore();
</script>
</body>
</html>

复制代码

游戏名称	打鬼子
游戏主题	把走来的难度不同的鬼子打死。得积分。
游戏规则	1. 一共有三条命，被鬼子打倒一次，少一条命。 2. 打的鬼子的难度越大，得到的积分越多。 3. 鬼子死的越惨，积分越多。 4. 上键头是踢鬼子，下箭头是踩鬼子，左右箭头都是打鬼子。