下载是模拟的俄罗斯方法的效果，在下落的情况下，能
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <title>Shot</title> 5 <meta charset="gbk" /> 6 <link type="text/css" href="canvas.css" rel="stylesheet"/> 7 </head> 8 <body onkeydown="getCommand();"> 9 <canvas id="canvas" width="880" height="400" style="background:black"> 10 您的浏览器不支持 11 </canvas> 12 </body> 13 <script > 14 var canvas = document.getElementById("canvas"); 15 var cxt = canvas.getContext("2d"); 16 17 function Shot(x,y,speed){ 18 this.x = x; 19 this.y = y; 20 this.speed = speed; 21 this.move = function (){ 22 if(this.y > 400){ 23 this.y = 40; 24 } 25 this.y +=speed; 26 } 27 this.moveRight = function (){ 28 this.x +=speed; 29 } 30 this.moveLeft = function (){ 31 this.x -=speed; 32 } 33 this.moveUP = function (){ 34 this.y -=speed; 35 } 36 } 37 var shot = new Shot(40,40,10); 38 //var shots = new Array(); 39 40 function drawShot(tank){ 41 cxt.fillStyle = "#ded284"; 42 cxt.beginPath(); 43 cxt.fillRect(tank.x,tank.y,5,10); 44 cxt.closePath(); 45 } 49 function getCommand(){ 50 var code = event.keyCode; 51 switch(code) { 52 case 87: //上 53 shot.moveUP(); 54 break; 55 case 68: //右 56 shot.moveRight(); 57 break; 58 case 83: //下 59 shot.move(); 60 break; 61 case 65: //左enemyTanks[i] 62 shot.moveLeft(); 63 break; 64 case 74: 65 break; 66 } 67 drawShot(shot); 68 } 70 function run(){ 71 cxt.clearRect(0,0,880,400); 72 //cxt.clearRect(0,0,880,400); 73 shot.move(); 74 drawShot(shot); 75 76 } 77 //function flashTankMap(){ 78 //刷新作战莵E 79 //清历篆布 81 //} 82 //run(); 83 window.setInterval("run()",100); 87 </script> 88 </html>
够对其进行控制，不过做的环形的还是不多
H TML5 之 （7） 俄罗斯方块效果,布布扣,bubuko.com
原文：http://www.cnblogs.com/sunxun/p/3826191.html