科学教育
标题:
111111111111111111111111111111111111111111111111111111111111111
[打印本页]
作者:
朱益佳
时间:
2026-1-6 09:55
标题:
111111111111111111111111111111111111111111111111111111111111111
<!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>
把人改成人的形状，鬼子是鬼子的形状，点空格键是重来。
[color=rgb(51, 102, 153) !important]
作者:
kaia
时间:
2026-1-6 09:56
你好！你想让“打鬼子小游戏”里的人物变成人的形状，鬼子变成鬼子的形状，还能用空格键重新开始游戏，是吧？我来帮你一步步讲怎么做，保证简单又好懂！
---
### 1. 把人改成人的形状
原代码里鬼子是用一个红色的方块表示的，我们可以用图片或者用简单的图形代替。
**方法一：用图片显示人**
- 准备一张人的图片（比如`human.png`），然后在人物出现的位置放这张图片。
**方法二：用CSS画一个简单的人形**
比如做一个圆头加身体的小人：
.person {
position: absolute;
bottom: 10px;
width: 40px;
height: 80px;
cursor: default;
}
.person .head {
width: 40px;
height: 40px;
background-color: #ffcc99;
border-radius: 50%; /* 圆头 */
}
.person .body {
width: 30px;
height: 40px;
background-color: #3366cc;
margin: 0 auto;
border-radius: 10px;
}
复制代码
**用法**：
<div class="person">
<div class="head"></div>
<div class="body"></div>
</div>
复制代码
这样就做出了一个简单的人。
---
### 2. 让鬼子变成鬼子的形状
同样，我们也可以用图片或CSS来设计鬼子的样子。
**用图片：**
比如准备一张“鬼子”的图片叫`ghost.png`，在创建鬼子时候替换颜色背景为图片：
.ghost {
width: 60px;
height: 60px;
background-image: url('ghost.png');
background-size: cover;
border-radius: 15px;
position: absolute;
bottom: 10px;
cursor: pointer;
}
复制代码
这样鬼子就显示成鬼子的样子了。
---
### 3. 空格键重来游戏
我们给页面添加键盘监听，按空格键时，重置分数和生命，清除场上所有鬼子，重新开始。
**示例代码：**
window.addEventListener('keydown', e => {
if (e.code === 'Space') { // 按空格键
resetGame();
} else {
playerAttack(e.key);
}
});
function resetGame() {
// 清除所有鬼子
ghosts.forEach(g => {
gameArea.removeChild(g.element);
});
ghosts = [];
score = 0;
life = 3;
updateScore();
updateLife();
message.textContent = "游戏已重置，开始吧！";
// 开始新游戏循环
clearInterval(gameInterval);
gameInterval = setInterval(createGhost, 2000);
}
复制代码
> 注意：`gameInterval`是你用来不停生成鬼子的计时器，代码里要先把它定义为变量，比如`let gameInterval = setInterval(...);`
---
### 4. 小总结
- 用图片或者CSS画简单的“人”和“鬼子”
- 为空格键添加事件，可以重新开始游戏
- 注意动态创建和删除DOM元素，保持游戏流畅
---
如果你愿意，可以把你的完整代码发给我，我帮你写完具体代码示范哦！希望你玩得开心，网页编程其实很有趣，继续加油！????
欢迎光临 科学教育 (https://www.sci-edu.net/)
Powered by Discuz! X3.2