• 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>

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

  • 相关阅读:
    数据结构八树和森林
    数据结构 七 二叉树的遍历
    python 的 encode 、decode、字节串、字符串
    TCP/IP
    pg 数据库操作
    nginx + lua 的 跳转命令
    lua string 下的函数
    lua 的匹配规则
    nginx的 ngx.var ngx.ctx ngx.req
    docker 网络模式 和 端口映射
  • 原文地址:https://www.cnblogs.com/sunxun/p/3826191.html
Copyright © 2020-2023  润新知