The code is as follows:

<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, Word-wrap: break-word! Important; "> <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]; Onclick =function(){imgs[0].style. Left =imgs[0].offsetLeft+10+"px"; Onclick =function(){var num=Number(sp.innerhtml); var id=setInterval(function(){ span.innerHTML= --num; if(num==0){ clearInterval(id); imgs[0].style.left=imgs[0].offsetLeft+100+"px"; }}, 1000); 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 won "); }else{alert("tanke2 wins "); }}}, 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> Manual move </button> <button> </button> </button> race </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>Copy the code

The final effect picture is as follows:

Function: this network game realizes the small tank’s manual movement, automatic movement, race and launch functions, which launch also joined the countdown attribute.

Clicking to manually move the first small tank will move it a short distance to the right, depending on the value set.

Click launch to enter a 5 second countdown, after the countdown, the first small tank will teleport to the right a certain distance, depending on your Settings.

Click on race and both small tanks will start right at the same time. With the intermittent call setting, the two tanks will move at random distance at a certain time until one of them is close to the border line and stops and wins, while the popbox displays.

Click automatically move the first small tanks will set off to the right, until will be touched the right border lines to down, then will encounter the border lines, turn left, then turn up when will encounter left margin line, the border lines on will encounter turn to the right, in circulation (mobile location) also need to set themselves up.