以下是一个基于 HTML + CSS + JavaScript 实现的“电子决斗场”挑战赛游戏，包含四个角色：董、邱、郭、陆。游戏为**全自动运行模式**（无需玩家操作），支持多种玩
法（如淘汰赛、混战、团队战等），并带有动态视觉效果，模拟一场炫酷的电子风格角色对决。
---
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>电子决斗场 - 四人挑战赛</title>
<style>
body {
margin: 0;
padding: 0;
font-family: 'Courier New', monospace;
background-color: #000;
color: #0f0;
overflow: hidden;
text-align: center;
}
h1 {
margin: 20px;
text-shadow: 0 0 10px #0f0, 0 0 20px #0f0;
font-size: 2.5em;
}
#arena {
width: 80vw;
height: 60vh;
margin: 20px auto;
border: 3px solid #0f0;
position: relative;
background: radial-gradient
(circle, #0a0a0a, #000
);
box-shadow: 0 0 20px #0f0;
overflow: hidden;
}
.character {
position: absolute;
width: 60px;
height: 60px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
font-size: 1.2em;
color: white;
text-shadow: 1px 1px 3px black;
transition: all 0.5s ease;
box-shadow: 0 0 10px rgba
(255,255,255,0.8
);
}
#log {
width: 80%;
margin: 20px auto;
height: 150px;
background: rgba
(0, 20, 0, 0.7
);
border: 1px solid #0f0;
color: #0f0;
padding: 10px;
overflow-y: scroll;
text-align: left;
font-family: 'Courier New';
white-space: pre-line;
}
button {
background: #0f0;
color: black;
border: none;
padding: 10px 20px;
margin: 5px;
cursor: pointer;
font-weight: bold;
border-radius: 5px;
}
button:hover {
background: #00ff00cc;
box-shadow: 0 0 10px #0f0;
}
</style>
</head>
<body>
<h1>⚡ 电子决斗场 ⚡</h1>
<div id="arena"></div>
<div id="log">【系统】欢迎来到电子决斗场！比赛即将开始...</div>
<div>
<button onclick="startGame
('elimination'
)">开始淘汰赛</button>
<button onclick="startGame
('freeforall'
)">开始混战</button>
<button onclick="startGame
('team'
)">开始团队战（董&郭 vs 邱&陆）</button>
<button onclick="resetArena
()">重置场地</button>
</div>
<script>
const characters = [
{ name: "董", color: "#f44336", hp: 100, atk: 20, spd: 3 },
{ name: "邱", color: "#2196F3", hp: 90, atk: 25, spd: 4 },
{ name: "郭", color: "#FFC107", hp: 110, atk: 18, spd: 2 },
{ name: "陆", color: "#673AB7", hp: 95, atk: 22, spd: 5 }
];
let arena = document.getElementById
("arena"
);
let log = document.getElementById
("log"
);
let gameRunning = false;
let characterElements = {};
function resetArena
() {
if
(gameRunning
) {
alert
("比赛正在进行中！"
);
return;
}
arena.innerHTML = "";
characterElements = {};
log.innerHTML = "【系统】场地已重置。\n";
}
function logMessage
(msg
) {
log.innerHTML += msg + "\n";
log.scrollTop = log.scrollHeight;
}
function createCharacter
(char
) {
const el = document.createElement
("div"
);
el.className = "character";
el.innerText = char.name;
el.style.backgroundColor = char.color;
el.id = "char-" + char.name;
// 初始随机位置
const x = 100 + Math.random
() *
(arena.clientWidth - 200
);
const y = 100 + Math.random
() *
(arena.clientHeight - 200
);
el.style.left = x + "px";
el.style.top = y + "px";
arena.appendChild
(el
);
characterElements[char.name] = { element: el, data: char };
}
function moveToward
(a, b
) {
const ax = parseFloat
(a.style.left
);
const ay = parseFloat
(a.style.top
);
const bx = parseFloat
(b.style.left
);
const by = parseFloat
(b.style.top
);
const dx = bx - ax;
const dy = by - ay;
const dist = Math.sqrt
(dx*dx + dy*dy
);
if
(dist < 10
) return true; // 已接触
const step = 5;
a.style.left =
(ax +
(dx / dist
) * step
) + "px";
a.style.top =
(ay +
(dy / dist
) * step
) + "px";
return false;
}
function attack
(attacker, defender
) {
const dmg = attacker.data.atk;
defender.data.hp -= dmg;
logMessage
(`💥 ${attacker.data.name} 攻击了 ${defender.data.name}，造成 ${dmg} 点伤害！${defender.data.name} 剩余生命值：${defender.data.hp}`
);
// 闪烁特效
defender.element.style.transform = "scale
(1.2
)";
defender.element.style.filter = "brightness
(1.5
)";
setTimeout
(() => {
defender.element.style.transform = "scale
(1
)";
defender.element.style.filter = "brightness
(1
)";
}, 200
);
if
(defender.data.hp <= 0
) {
defender.element.style.opacity = "0.3";
defender.element.style.border = "2px dashed red";
logMessage
(`💀 ${defender.data.name} 被击败了！`
);
return true;
}
return false;
}
function startGame
(mode
) {
if
(gameRunning
) {
alert
("比赛正在进行中，请等待结束或重置！"
);
return;
}
resetArena
();
characters.forEach
(createCharacter
);
gameRunning = true;
logMessage
(`\n【系统】${getModeName
(mode
)} 开始！`
);
setTimeout
(() => runGame
(mode
), 1000
);
}
function getModeName
(mode
) {
switch
(mode
) {
case "elimination": return "单败淘汰赛";
case "freeforall": return "自由混战";
case "team": return "团队对抗赛";
default: return "未知模式";
}
}
function runGame
(mode
) {
const alive =
() => Object.values
(characterElements
).filter
(c => c.data.hp > 0
);
const isTeamDead =
(team
) => team.every
(name => !alive
().some
(c => c.data.name === name
));
const team1 = ["董", "郭"];
const team2 = ["邱", "陆"];
const checkWinner =
() => {
const remaining = alive
();
if
(mode === "team"
) {
if
(isTeamDead
(team1
)) {
endGame
(`🎉 队伍【邱&陆】获胜！`
);
return true;
} else if
(isTeamDead
(team2
)) {
endGame
(`🎉 队伍【董&郭】获胜！`
);
return true;
}
} else if
(remaining.length <= 1
) {
if
(remaining.length === 1
) {
endGame
(`🎉 【${remaining[0].data.name}】是最后的胜者！`
);
} else {
endGame
("🎉 所有人
同归于尽，平局！"
);
}
return true;
}
return false;
};
function gameLoop
() {
if
(checkWinner
()) return;
const fighters = alive
();
if
(fighters.length < 2
) return;
for
(let attacker of fighters
) {
let targets;
if
(mode === "team"
) {
// 打敌方队伍
const myTeam = team1.includes
(attacker.data.name
) ? team1 : team2;
targets = fighters.filter
(f => !myTeam.includes
(f.data.name
));
} else {
// 自由选择非自己目标
targets = fighters.filter
(f => f !== attacker
);
}
if
(targets.length === 0
) continue;
// 选最近的目标
let closest = null;
let minDist = Infinity;
for
(let t of targets
) {
const dx = parseFloat
(attacker.element.style.left
) - parseFloat
(t.element.style.left
);
const dy = parseFloat
(attacker.element.style.top
) - parseFloat
(t.element.style.top
);
const d = dx*dx + dy*dy;
if
(d < minDist
) {
minDist = d;
closest = t;
}
}
if
(closest && moveToward
(attacker.element, closest.element
)) {
// 接触后攻击
if
(Math.random
() < 0.5
) { // 攻击频率控制
attack
(attacker, closest
);
}
}
}
setTimeout
(gameLoop, 600 - Math.min
(...characters.map
(c => c.spd
)) * 50
); // 速度影响节奏
}
gameLoop
();
}
function endGame
(msg
) {
logMessage
(msg
);
logMessage
("【系统】比赛结束。\n"
);
gameRunning = false;
}
</script>
</body>
</html>
```
---
### ✅ 功能说明：
1. **四个角色**：
- 董、邱、郭、陆，各自拥有不同的属性（生命值、攻击力、速度）。
- 每个角色用不同颜色代表，在决斗场中自动移动。
2. **三种玩
法模式**：
- **淘汰赛**：所有人互相战斗，直到只剩一人。
- **混战**：与淘汰赛类似，但更强调自由攻击逻辑。
- **团队战**：董 & 郭 vs 邱 & 陆，只能攻击敌方队伍成员。
3. **全自动运行**：
- 角色会自动向最近敌人移动。
- 接触后有一定概率发动攻击。
- 受伤时有视觉反馈（闪烁、缩放）。
- 生命值归零即被淘汰。
4. **日志系统**：
- 显示每一步攻击和结果。
- 最终宣布胜者。
5. **炫酷视觉风格**：
- 黑底绿光电子风。
- 发光边框、阴影、渐变背景。
- 移动和攻击动画。
---
### 🔧 使用方
法：
将上述代码保存为 `duel.html`，用浏览器打开即可运行。点击不同按钮切换玩
法。
---
### 💡 可扩展方向：
- 添加技能系统（如大招、闪避）。
- 加入血条显示。
- 增加音效和背景音乐。
- 引入AI策略（如优先攻击最弱者）。
- 支持回放或回合记录。
---
本文介绍了如何使用C++编程解决寻找数组中多数元素的问题，利用同归于尽的思想，通过比较元素和当前多数元素，减少计数并找出最终的多数元素。
扫一扫
826
到【灌水乐园】发言
