首页 > 代码库 > H TML5 之 （7） 俄罗斯方块效果

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

2024-07-10 22:12:53   219人阅读

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

 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   //刷新作战莵E79     //清历篆布81 //}82 //run();83 window.setInterval("run()",100);87     </script>88 </html>

 

够对其进行控制，不过做的环形的还是不多


联系
我们