Home > Developer > Web Develop
HTML code:
1<! DOCTYPE html>2"http://www.w3.org/1999/xhtml">34<meta http-equiv="Content-type"Content="text/html; Charset=utf-8"/>5<title> Tank Wars </title>6<script src="Tank.js"></script>78<body onkeydown="Movetank (Hero)">9<canvas id="Canvas"Width=" +"height=" -"style="border:1px solid red; display:block; margin:50px auto; background-color:black;"></canvas>Ten One<script type="Text/javascript"> A - varCanvas = document.getElementById ("Canvas"); - varContext = Canvas.getcontext ("2d"); the varHero =NewTank ( -, -,0,5); - - //Create a Hero object - varHero =NewTank ( -, +,0,5); + - function Movetank (tank) { + //move the tank up or down A Switch(Event. KeyCode) { at Case $://left -Tank.direct =3; - tank.moveleft (); - Break; - Case the://Right -Tank.direct =1; in tank.moveright (); - Break; to Case the://on +Tank.direct =0; - tank.moveup (); the Break; * Case the://under $Tank.direct =2;Panax Notoginseng Tank.movedown (); - Break; the default: + } A Drawtank (Hero); the } + - Drawtank (Hero); $</script> $</body> -JavaScript code:
function Tank (x, y, direct, speed) {//create tank class, horizontal ordinate, direction, speed This. x =x; This. y =y; This. Direct =Direct; This. Speed =Speed ; This. moveUp =function () { This. Y-= This. Speed; } This. MoveDown =function () { This. Y + = This. Speed; } This. MoveLeft =function () { This. x-= This. Speed; } This. MoveRight =function () { This. x + = This. Speed; }}function Drawtank (tank) {//Painting Tank Switch(tank.direct) { Case 0: Case 2: //up, down//Clear ScreenContext.clearrect (0,0, Canvas.width, canvas.height); //Painting Tank//Draw wheels and bodyContext.beginpath (); Context.fillstyle="Red"; Context.fillrect (tank.x, TANK.Y,5, -);//RevolverContext.fillrect (tank.x +6, Tank.y +5,8, -);//BodyContext.fillrect (tank.x + the, TANK.Y,5, -);//Right WheelContext.fill (); Context.closepath (); //Draw your head .Context.beginpath (); Context.fillstyle="Blue"; Context.arc (tank.x+Ten, Tank.y + the,4,0,2*Math.PI); Context.fill (); Context.closepath (); //painting a barrelContext.beginpath (); Context.strokestyle="Yellow"; Context.linewidth=2; Context.moveto (tank.x+Ten, Tank.y + the); if(Tank.direct = =0) {Context.lineto (tank.x+Ten, TANK.Y); } Else if(Tank.direct = =2) {Context.lineto (tank.x+Ten, Tank.y + -); } context.stroke (); Context.fill (); Context.closepath (); Break; Case 1: Case 3: //left, right//Clear ScreenContext.clearrect (0,0, Canvas.width, canvas.height); //Painting Tank//Draw wheels and bodyContext.beginpath (); Context.fillstyle="Red"; Context.fillrect (tank.x, TANK.Y, -,5);//RevolverContext.fillrect (tank.x +5, Tank.y +6, -,8);//BodyContext.fillrect (tank.x, Tank.y + the, -,5);//Right WheelContext.fill (); Context.closepath (); //Draw your head .Context.beginpath (); Context.fillstyle="Blue"; Context.arc (tank.x+ the, Tank.y +Ten,4,0,2*Math.PI); Context.fill (); Context.closepath (); //painting a barrelContext.beginpath (); Context.strokestyle="Yellow"; Context.linewidth=2; Context.moveto (tank.x+ the, Tank.y +Ten); if(Tank.direct = =1) {Context.lineto (tank.x+ -, Tank.y +Ten); } Else if(Tank.direct = =3) {Context.lineto (tank.x, Tank.y+Ten); } context.stroke (); Context.fill (); Context.closepath (); Break; default: }}HTML5 Tank Wars (2) Draw tank Review
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
