代码如下：
<!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秒倒计时，倒计时完结后第一个小坦克会向右霎时挪动一段距离，具体挪动多少间隔也须要看本人的设置。
点击赛跑两个小坦克会向右同时登程，通过间歇调用的设置，两个坦克会在某个工夫随机挪动随机的间隔，直到某一方将要贴近边框线则停下且胜出，同时弹框显示。
点击主动挪动第一个小坦克会向右登程，直至将要碰到右边框线时向下转向，接着将要碰到下边框线时向左转向，而后在将要碰到左边框线时向上转向，最初在将要碰到上边框线时向右转向，顺次循环（挪动的具体位置也需本人设置）。
发表回复