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

时间：2024-04-16 18:36:11

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

 <!DOCTYPE HTML>

 <html>

 <head>

 <title>Shot</title>

 <meta charset="gbk" />

 <link  type="text/css" href="canvas.css" rel="stylesheet"/>

 </head>

 <body onkeydown="getCommand();">

     <canvas id="canvas" width="880" height="400" style="background:black">

     您的浏览器不支持

     </canvas>

 </body>

 <script >

   var canvas = document.getElementById("canvas");

   var cxt = canvas.getContext("2d");

   function Shot(x,y,speed){

     this.x = x;

     this.y = y;

     this.speed = speed;

     this.move = function (){

     if(this.y > 400){

         this.y = 40;

          }

     this.y +=speed;

     }

     this.moveRight = function (){

      this.x +=speed;

     }

     this.moveLeft = function (){

      this.x -=speed;

     }

     this.moveUP = function (){

      this.y -=speed;

     }

   }

   var shot = new Shot(40,40,10);

   //var shots = new Array();

    function drawShot(tank){

               cxt.fillStyle = "#ded284";

               cxt.beginPath();

               cxt.fillRect(tank.x,tank.y,5,10);

               cxt.closePath();

   }

 function getCommand(){

  var code = event.keyCode;

      switch(code) {

         case 87:  //上

           shot.moveUP();

       break;

         case 68:  //右

         shot.moveRight();

       break;

         case 83:  //下

         shot.move();

       break;

         case 65:  //左enemyTanks[i]

        shot.moveLeft();

       break;

       case 74:

       break;

      }

      drawShot(shot);

 }

 function run(){

     cxt.clearRect(0,0,880,400);

         //cxt.clearRect(0,0,880,400);

         shot.move();

         drawShot(shot);

 }

   //function flashTankMap(){

   //刷新作战莵E

     //清历篆布

 //}

 //run();

 window.setInterval("run()",100);

     </script>

 </html>

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

相关文章