共计 2450 个字符,预计需要花费 7 分钟才能阅读完成。
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 500px;
margin:20px auto;
}
div.content{
height: 300px;
border:1px solid red;
position: relative;
}
span{
color: red;
font-size: 20px;
}
img{position: absolute;}
img:last-child{margin-top: 60px;}
</style>
<script type="text/javascript">
window.onload=function(){var btns=document.getElementsByTagName('button');
var imgs=document.images;
var span=document.getElementsByTagName("span")[0];
// 手动挪动
btns[0].onclick=function(){imgs[0].style.left=imgs[0].offsetLeft+10+"px";
}
// 发射
btns[1].onclick=function(){var num=Number(span.innerHTML);
var id=setInterval(function(){
span.innerHTML= --num;
if(num==0){clearInterval(id);
imgs[0].style.left=imgs[0].offsetLeft+100+"px";
}
},1000);
// 赛跑
btns[2].onclick=function(){var id=setInterval(function(){var random1=Math.round(Math.random()*10);
var random2=Math.round(Math.random()*10);
imgs[0].style.left=imgs[0].offsetLeft+random1+"px";
imgs[1].style.left=imgs[1].offsetLeft+random2+"px";
if(imgs[0].offsetLeft>400 || imgs[1].offsetLeft>400){clearInterval(id);
if(imgs[0].offsetLeft>400){alert("tanke1 胜出");
}else{alert("tanke2 胜出");
}
}
},100);
}
// 主动挪动
function run(){var tanke1=imgs[0];
var id0=setInterval(function(){
tanke1.style.left=tanke1.offsetLeft+10+"px";
if(tanke1.offsetLeft>390){clearInterval(id0);
tanke1.src='tanke_down.jpg';
var id1=setInterval(function(){
tanke1.style.top=tanke1.offsetTop+10+"px";
if(tanke1.offsetTop>200){clearInterval(id1);
tanke1.src='tanke_left.jpg';
var id2=setInterval(function(){
tanke1.style.left=tanke1.offsetLeft-10+"px";
if(tanke1.offsetLeft<10){clearInterval(id2);
tanke1.src='tanke_up.jpg'
var id3=setInterval(function(){
tanke1.style.top=tanke1.offsetTop-10+"px";
if(tanke1.offsetTop<10){clearInterval(id3);
tanke1.src='tanke_right.jpg';
run();}
},100)
}
},100)
}
},100);
}
},100);
}
btns[3].onclick=run;
}
</script>
</head>
<body>
<div class="btns">
<button> 手动挪动 </button>
<button> 发射 </button>
<button> 赛跑 </button>
<button> 主动挪动 </button>
<span>5</span>
</div>
<div class="content">
<img src="tanke_right.jpg" alt=""> <br>
<img src="tanke_right.jpg" alt="">
</div>
</body>
</html>
最初实现的效果图如下图所示:
性能: 这个网络游戏实现了对小坦克的手动挪动、主动挪动、赛跑以及发射的性能,其中发射还退出了倒计时的属性。
点击手动挪动第一个小坦克会向右挪动一小段距离,具体挪动的间隔依据所设置的值来确定。
点击发射会进入 5 秒倒计时,倒计时完结后第一个小坦克会向右霎时挪动一段距离,具体挪动多少间隔也须要看本人的设置。
点击赛跑两个小坦克会向右同时登程,通过间歇调用的设置,两个坦克会在某个工夫随机挪动随机的间隔,直到某一方将要贴近边框线则停下且胜出,同时弹框显示。
点击主动挪动第一个小坦克会向右登程,直至将要碰到右边框线时向下转向,接着将要碰到下边框线时向左转向,而后在将要碰到左边框线时向上转向,最初在将要碰到上边框线时向右转向,顺次循环(挪动的具体位置也需本人设置)。
正文完
发表至: javascript
2021-05-14