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

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

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

H TML5 之 （7） 俄罗斯方块效果的更多相关文章

  1. H TML5 之 （6）下雨效果

    在对HTML5进行研究之后,有了一点想法,思考出游戏其实感觉就是四个步骤 1.创建一个你需要的对象,赋予属性(一些影响方法的属性),方法(运动,叫....) 2.实例化这个对象,让它成为一个或者多个个 ...

  2. H TML5 之 （5） 一个在线画图板

    这里加入了点难度了,增加了对HTML很多时间的把握,对象的把握 index.html <!DOCTYPE HTML> <html> <head> <title ...

  3. H TML5 之 （3）转动的圆球

    HTML5 练手之二,一个能够为之圆心转动的圆球,原理和时钟的非常像,只是要把握转动的时间控制,同时加入了点渐变色 HTML5 练手之二,一个能够为之圆心转动的圆球,原理和时钟的非常像,只是要把握转动 ...

  4. H TML5 之 （4） 小项目一 时钟

    这里做一个HTML5 入门的练手,一个小时钟项目,可以再上面拓展很多,程序员培养的就是思想 <!DOCTYPE HTML> <html> <head> <ti ...

  5. H TML5 之 （2） 小试牛刀

    基本的HTML都认识到了,就开始运用下了,大的程序的开始,都是从一个一个表达式慢慢的堆积起来的 想开始玩HTML5,就开始理解,它所提供的画布函数各有什么作用,API的具体使用,才能完成自己想要完成的 ...

  6. H TML5 之 （1） 初识HTML5

    新特性 HTML5 中的一些有趣的新特性: 用于绘画的 canvas 元素 用于媒介回放的 video 和 audio 元素 对本地离线存储的更好的支持 新的特殊内容元素,比如 article.foo ...

  7. 你应该知道的10个奇特的 HTML5 单页网站

    网页设计师努力寻找新的方式来展现内容.其中一个大的趋势是单页网站,现在被世界上的一些大的品牌广泛采用,使用它们来为用户提供一个快速,干净和简单的而且​​美丽的网站. 下面是10个令人惊叹的单页 H​​ ...

  8. 值得 Web 开发人员收藏的16款 HTML5 工具

    HTML5 正在迅速改变创建和管理网站的方式.HTML5 在不同的领域让网页设计更强大的.快速,安全,响应式,互动和美丽,这些优点吸引更多的 Web 开发人员使用 HTML5 开发各种网站和应用程序. ...

  9. JavaScript中的文档对象模型

    1. DOM基本介绍1 什么是DOMDOM的英语全称为Document Object Model,翻译成中文就 是文档对象模型.也就是说,将整个文档看作是一个对象.而一个文档又是由很多节点组成的, 那 ...

随机推荐

  1. oracle查询转换_view merge

    oracle对于子查询的支持做的很好,oracle optimizer会对inline view进行query transfomation,即视图合并,不过也经常带来意想不到的问题.下面是一个inli ...

  2. v8 javascript engine

    https://code.google.com/p/v8-wiki/wiki/BuildingWithGYP vs2013git v8 http://github.com/v8/v8-git-mirr ...

  3. ☀【CSS3】icon

    Navicon Transformicons: Animated Navigation Icons with CSS Transformshttp://sarasoueidan.com/blog/na ...

  4. sql截取数据库数字字段内容

    round(columnName, precision) 四舍五入 trunc(columnName, precision) 强制截断

  5. Android4.0 -- UI控件之 Menu 菜单的的使用(三)

    上一讲 [Android 开发]:UI控件之 Menu 菜单的的使用(二) 我们讲解了创建上下文菜单的第一种使用方式:Creating a floating context menu [创建悬浮的上下 ...

  6. Linux上使用Qt Creator进行C/C++开发

    目录[-] 1.安装Qt Creator和基础构建环境(以Ubuntu为例): 2.把自动完成快捷键"Ctrl+空格"改为"Alt+/"或者"Shif ...

  7. Json数据异步绑定到界面的Table并且自动刷新

    转自:http://blog.csdn.net/jianxin1009/article/details/8565828‘ 做Winform习惯了,大家都习惯设置datasource这样的写法. 如果想 ...

  8. ARM学习笔记1——Arm寄存器与模式的关系

    ARM微处理器上有37个32位的寄存器,其中有6个状态寄存器(一个CPSR,5个SPSR),其它31个为通用寄存器.在ARM的不同模式下,可以访问的物理寄存器是不同,如下图所示: 从图中可知,用户模式 ...

  9. 批处理at命令--一切尽在计划中

    让计算机在自己规定的时间里干自己规定的事,一切尽在计划之中.所以at命令你一定不能错过. 概述 列出在指定的时间和日期在计算机上运行的已计划命令或计划命令和程序,以及设置在指定时间和日期在计算机上运行 ...

  10. linux IPC总结——管道

    管道 管道是unix ipc的最古老形式,是一种在内存中的特殊文件,只能在具有公共祖先的进程之间使用(即父子进程,兄弟进程). 管道由pipe函数创建 #include <unistd.h> ...