用HTML和js写一个简易格斗游戏
时间: 2023-05-19 11:02:14 浏览: 66
好的，以下是一个简单的HTML和JS格斗游戏的代码示例：
HTML代码：
```
<!DOCTYPE html>
<html>
<head>
<title>简易格斗游戏</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
}
h1 {
margin-top: 50px;
}
#player1, #player2 {
display: inline-block;
margin: 50px;
padding: 20px;
background-color: #eee;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0,0,0,0.3);
}
#player1 {
border: 5px solid #f00;
}
#player2 {
border: 5px solid #00f;
}
#attack, #reset {
margin-top: 50px;
padding: 10px 20px;
background-color: #333;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
}
#attack:hover, #reset:hover {
background-color: #555;
}
</style>
</head>
<body>
<h1>简易格斗游戏</h1>
<div id="player1">
<h2>玩家1</h2>
<p>生命值：<span id="player1-health">100</span></p>
<p>攻击力：<span id="player1-attack">10</span></p>
</div>
<div id="player2">
<h2>玩家2</h2>
<p>生命值：<span id="player2-health">100</span></p>
<p>攻击力：<span id="player2-attack">10</span></p>
</div>
<button id="attack">攻击</button>
<button id="reset">重新开始</button>
<script src="game.js"></script>
</body>
</html>
```
JS代码：
```
var player1 = {
health: 100,
attack: 10
};
var player2 = {
health: 100,
attack: 10
};
var player1Health = document.getElementById("player1-health");
var player2Health = document.getElementById("player2-health");
var player1Attack = document.getElementById("player1-attack");
var player2Attack = document.getElementById("player2-attack");
var attackButton = document.getElementById("attack");
var resetButton = document.getElementById("reset");
attackButton.addEventListener("click", function() {
// 玩家1攻击玩家2
player2.health -= player1.attack;
player2Health.innerHTML = player2.health;
// 玩家2攻击玩家1
player1.health -= player2.attack;
player1Health.innerHTML = player1.health;
// 更新攻击力
player1.attack += 5;
player1Attack.innerHTML = player1.attack;
player2.attack += 5;
player2Attack.innerHTML = player2.attack;
// 判断游戏是否结束
if (player1.health <= 0) {
alert("玩家2获胜！");
reset();
} else if (player2.health <= 0) {
alert("玩家1获胜！");
reset();
}
});
resetButton.addEventListener("click", function() {
reset();
});
function reset() {
player1.health = 100;
player2.health = 100;
player1.attack = 10;
player2.attack = 10;
player1Health.innerHTML = player1.health;
player2Health.innerHTML = player2.health;
player1Attack.innerHTML = player1.attack;
player2Attack.innerHTML = player2.attack;
}
```
这个游戏有两个玩家，每个玩家有100点生命值和10点攻击力。每次点击“攻击”按钮，玩家1会攻击玩家2并减少其生命值，然后玩家2会攻击玩家1并减少其生命值。每次攻击后，玩家的攻击力会增加5点。当一个玩家的生命值降至0以下时，游戏结束，另一个玩家获胜。点击“重新开始”按钮可以重新开始游戏。
相关推荐
最新推荐
用html5的canvas和JavaScript创建一个绘图程序的简单实例
下面小编就为大家带来一篇用html5的canvas和JavaScript创建一个绘图程序的简单实例。小编觉得挺不错的， 现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
用JavaScript做简易的购物车的代码示例
主要介绍了用JavaScript做简易的购物车的代码示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
JS构造一个html文本内容成文件流形式发送到后台
let html = <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title>X-Find迅聘选才</...
通过JS动态创建一个html DOM元素并显示
近日，因工作需要，需要通过点击某个元素后， 动态创建一个DOM元素并显示，因此写了一些相关的JS函数，在此记录，以作备忘： /**//* 动态创建DOM元素的相关函数支持 www.jcodecraeer.com */ /**//* 获取以某个元素...
.2.【方法1】隐藏的弦图 (1)【课程出自拼多多店铺：北大网课资料店】
.2.【方法1】隐藏的弦图 (1)【课程出自拼多多店铺：北大网课资料店】
zigbee-cluster-library-specification
最新的zigbee-cluster-library-specification说明文档。
管理建模和仿真的文件
管理Boualem Benatallah引用此版本：布阿利姆·贝纳塔拉。管理建模和仿真。约瑟夫-傅立叶大学-格勒诺布尔第一大学，1996年。法语。NNT：电话：00345357HAL ID：电话：00345357https://theses.hal.science/tel-003453572008年12月9日提交HAL是一个多学科的开放存取档案馆，用于存放和传播科学研究论文，无论它们是否被公开。论文可以来自法国或国外的教学和研究机构，也可以来自公共或私人研究中心。L’archive ouverte pluridisciplinaire
MATLAB正态分布协方差分析：揭示正态分布变量之间的协方差
# 1. 正态分布概述
正态分布，又称高斯分布，是统计学中最重要的连续概率分布之一。它广泛应用于自然科学、社会科学和工程领域。
正态分布的概率密度函数为：
```
f(x) = (1 / (σ√(2π))) * exp(-(x - μ)² / (2σ²))
```
其中：
- μ：正态分布的均值
- σ：正态分布的标准差
- π：圆周率
正态分布具有以下特性：
- 对称性：
我正在开发一款个人碳足迹计算app，如何撰写其需求分析文档，请给我一个范例
为了更全面、清晰地定义个人碳足迹计算app的需求，需求分析文档应该包含以下内容：
1.项目简介：对该app项目的概述及目标进行说明。
2.用户分析：包括目标用户群、用户需求、行为等。
3.功能需求：对app的基本功能进行定义，如用户登录、数据录入、数据统计等。
4.非功能需求：对使用app的性能和质量等进行定义，如界面设计、数据安全、可扩展性等。
5.运行环境：包括app的开发环境和使用环境。
下面是一个范例：
需求分析文档
1. 项目简介
该app项目旨在为用户提供一款方便、易用、可定制的个人碳足迹计算平台，以促进环保和可持续性发展。
2. 用户分析
目标用户群：全球关
JSBSim Reference Manual
JSBSim参考手册，其中包含JSBSim简介，JSBSim配置文件xml的编写语法，编程手册以及一些应用实例等。其中有部分内容还没有写完，估计有生之年很难看到完整版了，但是内容还是很有参考价值的。