码迷,mamicode.com
首页 > 其他好文 > 详细

H TML5 之 (7) 俄罗斯方块效果

时间:2014-07-05 22:10:17      阅读:314      评论:0      收藏:0      [点我收藏+]

标签:style   blog   color   width   os   cti   

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

 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

H TML5 之 (7) 俄罗斯方块效果

标签:style   blog   color   width   os   cti   

原文地址:http://www.cnblogs.com/sunxun/p/3826191.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!