代码如下：
<!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秒倒计时，倒计时结束后第一个小坦克会向右瞬间移动一段距离，具体移动多少距离也需要看自己的设置。
点击赛跑两个小坦克会向右同时出发，通过间歇调用的设置，两个坦克会在某个时间随机移动随机的距离，直到某一方将要贴近边框线则停下且胜出，同时弹框显示。
点击自动移动第一个小坦克会向右出发，直至将要碰到右边框线时向下转向，接着将要碰到下边框线时向左转向，然后在将要碰到左边框线时向上转向，最后在将要碰到上边框线时向右转向，依次循环（移动的具体位置也需自己设置）。