用html和js写一个对战页面
时间: 2023-12-25 13:02:53 浏览: 29
抱歉,作为一个语言模型AI,我无法编写HTML和JS代码,但是我可以提供一个参考,希望对你有所帮助。
HTML代码:
```
<!DOCTYPE html>
<html>
<head>
<title>对战页面</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
<div class="player player1">
<h2>玩家1</h2>
<p>选择你的角色:</p>
<select id="player1-select">
<option value="warrior">战士</option>
<option value="mage">法师</option>
<option value="rogue">盗贼</option>
</select>
<button onclick="player1Select()">确定选择</button>
<div id="player1-image"></div>
<p>当前血量:<span id="player1-health"></span></p>
</div>
<div class="player player2">
<h2>玩家2</h2>
<p>选择你的角色:</p>
<select id="player2-select">
<option value="warrior">战士</option>
<option value="mage">法师</option>
<option value="rogue">盗贼</option>
</select>
<button onclick="player2Select()">确定选择</button>
<div id="player2-image"></div>
<p>当前血量:<span id="player2-health"></span></p>
</div>
<div class="battlefield">
<button onclick="startBattle()">开始战斗</button>
<div id="battle-log"></div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
```
JS代码:
```
// 玩家1选择角色
function player1Select() {
var select = document.getElementById("player1-select");
var image = document.getElementById("player1-image");
var health = document.getElementById("player1-health");
var value = select.value;
switch (value) {
case "warrior":
image.style.backgroundImage = "url('warrior.png')";
health.innerText = "100";
break;
case "mage":
image.style.backgroundImage = "url('mage.png')";
health.innerText = "80";
break;
case "rogue":
image.style.backgroundImage = "url('rogue.png')";
health.innerText = "60";
break;
}
}
// 玩家2选择角色
function player2Select() {
var select = document.getElementById("player2-select");
var image = document.getElementById("player2-image");
var health = document.getElementById("player2-health");
var value = select.value;
switch (value) {
case "warrior":
image.style.backgroundImage = "url('warrior.png')";
health.innerText = "100";
break;
case "mage":
image.style.backgroundImage = "url('mage.png')";
health.innerText = "80";
break;
case "rogue":
image.style.backgroundImage = "url('rogue.png')";
health.innerText = "60";
break;
}
}
// 开始战斗
function startBattle() {
var log = document.getElementById("battle-log");
var player1Health = parseInt(document.getElementById("player1-health").innerText);
var player2Health = parseInt(document.getElementById("player2-health").innerText);
while (player1Health > 0 && player2Health > 0) {
var player1Damage = Math.floor(Math.random() * 10) + 1;
var player2Damage = Math.floor(Math.random() * 10) + 1;
player2Health -= player1Damage;
player1Health -= player2Damage;
log.innerHTML += "<p>玩家1攻击了玩家2,造成了" + player1Damage + "点伤害,玩家2当前血量为" + player2Health + "</p>";
log.innerHTML += "<p>玩家2攻击了玩家1,造成了" + player2Damage + "点伤害,玩家1当前血量为" + player1Health + "</p>";
}
if (player1Health <= 0) {
log.innerHTML += "<p>玩家2获胜!</p>";
} else {
log.innerHTML += "<p>玩家1获胜!</p>";
}
}
```
CSS代码:
```
.container {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
.player {
display: flex;
flex-direction: column;
align-items: center;
margin: 20px;
}
.player1 {
border: 2px solid red;
}
.player2 {
border: 2px solid blue;
}
.player h2 {
margin: 0;
}
.player p {
margin: 10px 0;
}
.player select {
margin-bottom: 10px;
}
.player button {
margin-bottom: 20px;
}
.player div {
width: 100px;
height: 100px;
background-size: cover;
margin-bottom: 10px;
}
.battlefield {
display: flex;
flex-direction: column;
align-items: center;
margin: 20px;
}
.battlefield button {
margin-bottom: 20px;
}
#battle-log {
width: 400px;
height: 300px;
overflow-y: scroll;
border: 1px solid black;
padding: 10px;
}
```
这个对战页面包含两个玩家选择角色和开始战斗的按钮,以及一个用于显示战斗日志的区域。玩家选择角色时,角色的图片和当前血量会随之改变。开始战斗后,每个玩家每次攻击会随机造成1到10点伤害,直到有一方的血量降为0,比赛结束并宣布胜者。