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

 <!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. perl unload gbk oracle 数据库

    perl unload gbk Oracle 数据库 use Encode; if ( $#ARGV < 0 ){ print "请输入一个文件\n"; exit(-1); ...

  2. Android之最简单的ImageView加边框方法

    转自:http://www.th7.cn/Program/Android/201301/120345.shtml 通常情况下,如果我们要给ImageView加上边框,比如宽为3dp的灰色框,是自己定义 ...

  3. WCF中的由于目标计算机积极拒绝，无法连接

    1.第一种情况 百度上找到了这篇文章  http://blog.sina.com.cn/s/blog_6b44b2ba01016j0z.html 讲的是使用了using用完之后就释放了,得到启发,仔细 ...

  4. 【C++ in Qt5】一个简单的通讯录程序，支持文件存取

    https://github.com/shalliestera/AddressBook 使用Qt5完成了一些之前用DevCpp很难做到的事,比如更简单地实现“从文件读取”和“保存到文件”的功能.之前我 ...

  5. 常用SQL语句（增删查改、合并统计、模糊搜索）

    转自:http://www.cnblogs.com/ljianhui/archive/2012/08/13/2695906.html 常用SQL语句 首行当然是最基本的增删查改啦,其中最重要的是查. ...

  6. MonkeyRunner执行Python脚本实例——发送短信增强版

    很久之前就写好的了,准备写个自动执行Monkey的脚本时才想到去找它,还是写在博客里找起来方便. 这次更新了批处理自动连接设备后执行Py脚本,结构如下图: 其中shotscreen为存放截图文件夹,s ...

  7. ARM学习笔记11——GNU ARM汇编程序设计

    GNU ARM汇编程序设计中,每行的语法格式如下: [<label>:] [<instruction | directive | pseudo-instruction>] @c ...

  8. Android SeekBar 和 draw9patch 的使用

    今天要使用一个SeekBar控件,其实我觉得Android默认样式已经很不错了,无奈设计不同意,而且SeekBar左右两边也有图片,默认样式和图片也确实不协调,因此这里使用图片自定义SeekBar样式 ...

  9. 虚拟机之仅主机模式（HostOnly）链接外网设置

    我的环境: 虚拟机-VMware 虚拟系统-CentOS 现实主机-win7 具体设置步骤: 一.设置现实主机 (地址等不用额外设置,下面是我电脑正常上网的配置) 将本地链接设置共享(这步很重要) 二 ...

  10. 微信开发第5章 通过accesstoken获取用户基本信息并修改用户备注

    在关注者与公众号产生消息交互后,公众号可获得关注者的OpenID(加密后的微信号,每个用户对每个公众号的OpenID是唯一的.对于不同公众号,同一用户的openid不同).公众号可通过本接口来根据Op ...