<! DOCTYPE html>
<Html>
<Head>
<Meta charset = 'utf-8'/>
</Head>
<Body onkeydown = "changeDirect ()">
<Canvas id = 'tankmap' width = '500px 'height = '300px' style = 'background-color: black'>
Your browser does not support canvas labels </canvas>
</Body>
<Script>
// Start to draw our tanke
Var canvas = document. getElementById ('tankmap ');
// Equivalent to getting a paint brush
Var ctx = canvas. getContext ('2d ');
Var myX = 30;
Var myY = 30;
// Encapsulate the code that generates the ball into a function
Function createBall (){
Ctx. fillStyle = '# FF0000 ';
Ctx. beginPath ();
Ctx. arc (myX, myY, 5, 0, Math. PI * 2, true );
Ctx. closePath ();
Ctx. fill ();
}
CreateBall ();
Function changeDirect (){
// After the event is triggered, the parameter event is passed.
Var keycode = event. keyCode;
Switch (keycode ){
Case 87:
// Alert ('up ');
MyY --;
Break;
Case 68:
MyX ++;
Break;
Case 83:
MyY ++;
Break;
Case 65:
MyX --;
Break;
}
Ctx. clearRect (0, 0, 500,300 );
CreateBall ();
}
</Script>
</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
