zoukankan      html  css  js  c++  java
  • 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>

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

  • 相关阅读:
    遗传基因有多大?
    【Unity3D】【NGUI】怎样动态给EventDelegate加入參数
    怎样通过Java程序提交yarn的mapreduce计算任务
    Cocos2D-X2.2.3学习笔记9(处理重力感应事件,移植到Android加入两次返回退出游戏效果)
    java多线程----拒绝策略
    java多线程-----volatile
    java多线程----JUC集合”01之 框架
    java多线程----Semaphore信号量
    java多线程---CyclicBarrier
    java多线程----CountDownLatch
  • 原文地址:https://www.cnblogs.com/sunxun/p/3826191.html
Copyright © 2011-2022 走看看