H TML5 之（7）俄罗斯方块效果

下载是模拟的俄罗斯方法的效果，在下落的情况下，能

 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） 俄罗斯方块效果

H TML5 之（7）俄罗斯方块效果