Comments: HTML5 has long been widely used and has powerful functions. This article describes how to implement a small tank that can be moved. For details, see below.
The Code is as follows:
<! DOCTYPE html>
<Html>
<Head>
</Head>
<Body onkeydown = "changeDirect ()">
<Canvas id = "tankMap" width = "500px" height = "300px" style = "border: 1px solid # d3d3d3;"> your browser does not support canvas labels </canvas>
<Script type = "text/javascript">
Var canvas1 = document. getElementById ('tankmap ');
Var ctx = canvas1.getContext ('2d ');
Var myX = 30;
Var myY = 30;
Function drawBall (){
Ctx. shadowBlur = 30, ctx. shadowColor = "#008C46 ";
Ctx. fillStyle = '#008C46 ';
Ctx. fillRect (myX, myY, 5, 30 );
Ctx. fillRect (myX + 17, myY, 5, 30 );
Ctx. fillRect (myX + 6, myY + 5, 10, 20 );
Ctx. beginPath ();
Ctx. fillStyle = '#004020 ';
Ctx. arc (myX + 11, myY + 15, 5, 0, Math. PI * 1.5 );
Ctx. closePath ();
Ctx. fill ();
Ctx. strokStyle = "#008C46 ";
Ctx. moveTo (myX + 11, myY + 15 );
Ctx. lineTo (myX + 11, myY-5 );
Ctx. stroke ();
}
DrawBall ();
Function changeDirect (){
Var code = event. keyCode;
Switch (code ){
Case 87:
MyY --;
Break;
Case 68:
MyX ++;
Break;
Case 83:
MyY ++;
Break;
Case 65:
MyX --;
Break;
}
Ctx. clearRect (0, 0, 500,300 );
// Redraw
DrawBall ();
}
</Script>
</Body>
</Html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
