最近突然想起小时候非常喜欢玩的网页文字游戏，发现完全可以用原生js来实现，而且也并不难，就自己写了一个比较丑的..因为实在找不到好看的素材
游戏界面就是这样。。 这个游戏可以优化的地方很多，我这里只添加了hp和速度属性，有精力的话还可以增加力量，敏捷等等属性，力量属性是可以跟自己的伤害成正比的，只要计算一个稍微平衡一点的数值就可以了，当然还可以增加回血的技能啊等等太多了只要能想到都能加进去。
html和css布局就不说了 ，非常的简答。
我是先定义了两个数组 ，一个用来保存对手的属性，一个数组用来存放技能。
var person = [
{
name : '东方不败',
hp : 105,
speed :70,
picture:'./img/img1.jpg'
},
{
name : '岳不群',
hp : 80,
speed :90,
picture:'./img/img2.jpg'
},
{
name : '林平之',
hp : 120,
speed :55,
picture:'./img/img3.jpg'
},
{
name : '令狐冲',
hp : 115,
speed :60,
picture:'./img/img4.jpg'
},
{
name : '西门吹雪',
hp : 90,
speed :80,
picture:'./img/img5.jpg'
}
];
var skill = ['挥剑向对面砍去，对方hp-','如来神掌，对方hp-','一记紫气东来，对方hp-','撸起了袖子给对面一顿胖揍，对方hp-','向对面吐了口唾沫，对方hp-','把鞋脱了扔向了对面，对方hp-','不说废话一电炮，对方hp-','向对面抛了个媚眼，对方hp-','悄悄地放了个屁，对方hp-'];
当按下开始比武就开始游戏了
oBtn.onclick = function(){
startPK();
pkReady();
}
开始游戏要生成对面的人物 ，并且开始游戏之后再按是无效的
这样就会生成对战对手的信息，然后我们需要根据人物属性中速度的快慢来决定谁先出招，
之后就是你一招我一招的回合制了，看谁的hp先掉到0，
function pk (){
if(person[index].hp > 0 && myHp.innerText >0){
if(circle){
console.log(1)
var index2 = parseInt(Math.random()*skill.length);
var index3 = parseInt(Math.random()*30);
var process = document.createElement('p');
process.innerText = '第'+ turn +'回合：'+'你使用了'+skill[index2] +index3;
person[index].hp -=index3;
oHp.innerText -= index3;
turn= turn+1;
middle.appendChild(process);
circle = false;
}else{
var index2 = parseInt(Math.random()*skill.length);
var index3 = parseInt(Math.random()*30);
var process = document.createElement('p');
process.innerText = '第'+ turn +'回合：'+person[index].name+skill[index2] +index3;
myHp.innerText -= index3;
turn= turn+1;
middle.appendChild(process);
circle = true;
}
}else{
if(myHp.innerText<= 0){
alert('you lose~~~~');
window.location.reload();
}else{
alert('you win~~~');
window.location.reload();
}
}
}
对面血先空了的话就会弹出窗口 you win 你要是没血了就弹出 you lose
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
list-style: none;
}
.box{
position: relative;
width: 800px;
height: 800px;
margin: 0 auto;
}
.p1{
display: inline-block;
width: 150px;
height: 100px;
text-align: center;
margin-left: 100px;
}
.p2{
position: absolute;
display: inline-block;
width: 150px;
height: 100px;
text-align: center;
right: 100px;
}
.vs{
position: absolute;
display: inline-block;
width: 100px;
height: 100px;
line-height: 100px;
left: 380px;
}
.main{
width: 800px;
height: 696px;
background-image: url('./img/background.jpg');
}
.main .left{
display: inline-block;
}
.main .right{
display: inline-block;
position: absolute;
top: 142px;
right: 20px;
}
.main .middle{
display: inline-block;
position: absolute;
width: 300px;
height: 400px;
top: 143px;
right: 250px;
}
.main .left img{
width: 200px;
height: 400px;
margin-top: 40px;
margin-left: 20px;
}
.main .right img{
width: 200px;
height: 400px;
}
.start{
position: absolute;
top: 102px;
left: 360px;
}
</style>
</head>
<body>
<div class="box">
<div class="p1"><p class="name">沙城霸主骨天乐</p><span>hp:</span><span id="myHp">100</span><span>速度</span><span id="mySpeed">75</span></div>
<div class="vs"><span>V S</span></div>
<div class="p2"><p class="name">对手</p><span>hp:</span><span id="hp">100</span><span>速度</span><span id="speed">75</span></div>
<div class="main">
<button class="start">开始比武</button>
<div class="left">
<img src="./img/img6.jpg" alt="">
</div>
<div class="middle"></div>
<div class="right">
<img src="./img/img5.jpg" alt="" id="aa">
</div>
</div>
</div>
</body>
<script>
var a =11,b = '11';
console.log(a=b)
var myHp = document.getElementById('myHp');
var mySpeed = document.getElementById('mySpeed');
var oName = document.getElementsByClassName('name')[1];
var oHp = document.getElementById('hp');
var oSpeed = document.getElementById('speed');
var oBtn = document.getElementsByClassName('start')[0];
var oImg = document.getElementById('aa');
var middle = document.getElementsByClassName('middle')[0];
var flag = true;
var turn = 1;
var circle = true;
var person = [
{
name : '东方不败',
hp : 105,
speed :70,
picture:'./img/img1.jpg'
},
{
name : '岳不群',
hp : 80,
speed :90,
picture:'./img/img2.jpg'
},
{
name : '林平之',
hp : 120,
speed :55,
picture:'./img/img3.jpg'
},
{
name : '令狐冲',
hp : 115,
speed :60,
picture:'./img/img4.jpg'
},
{
name : '西门吹雪',
hp : 90,
speed :80,
picture:'./img/img5.jpg'
}
];
var skill = ['挥剑向对面砍去，对方hp-','如来神掌，对方hp-','一记紫气东来，对方hp-','撸起了袖子给对面一顿胖揍，对方hp-','向对面吐了口唾沫，对方hp-','把鞋脱了扔向了对面，对方hp-','不说废话一电炮，对方hp-','向对面抛了个媚眼，对方hp-','悄悄地放了个屁，对方hp-'];
var index = parseInt(Math.random()*person.length);
oBtn.onclick = function(){
startPK();
pkReady();
}
function startPK(){
if(flag){
oName.innerText = person[index].name;
oHp.innerText = person[index].hp;
oSpeed.innerText = person[index].speed;
oImg.src = person[index].picture;
setInterval('pk()',1000);
flag = false;
}else{
}
}
console.log(circle)
function pkReady(){
if(person[index].speed > mySpeed.innerText){
var index2 = parseInt(Math.random()*skill.length);
var index3 = parseInt(Math.random()*30);
var process = document.createElement('p');
process.innerText = '第'+ turn +'回合：'+person[index].name+''+skill[index2] +index3;
myHp.innerText -= index3;
turn= turn+1;
middle.appendChild(process);
circle = true;
}else{
var index2 = parseInt(Math.random()*skill.length);
var index3 = parseInt(Math.random()*30);
var process = document.createElement('p');
process.innerText = '第'+ turn +'回合：'+'你'+skill[index2] +index3;
person[index].hp -=index3;
oHp.innerText -= index3;
turn= turn+1;
middle.appendChild(process);
circle = false;
}
}
function pk (){
if(person[index].hp > 0 && myHp.innerText >0){
if(circle){
console.log(1)
var index2 = parseInt(Math.random()*skill.length);
var index3 = parseInt(Math.random()*30);
var process = document.createElement('p');
process.innerText = '第'+ turn +'回合：'+'你使用了'+skill[index2] +index3;
person[index].hp -=index3;
oHp.innerText -= index3;
turn= turn+1;
middle.appendChild(process);
circle = false;
}else{
var index2 = parseInt(Math.random()*skill.length);
var index3 = parseInt(Math.random()*30);
var process = document.createElement('p');
process.innerText = '第'+ turn +'回合：'+person[index].name+skill[index2] +index3;
myHp.innerText -= index3;
turn= turn+1;
middle.appendChild(process);
circle = true;
}
}else{
if(myHp.innerText<= 0){
alert('you lose~~~~');
window.location.reload();
}else{
alert('you win~~~');
window.location.reload();
}
}
}
</script>
</html>