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

 <!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. NOI2005瑰丽华尔兹

    1499: [NOI2005]瑰丽华尔兹 Time Limit: 3 Sec  Memory Limit: 64 MBSubmit: 893  Solved: 508[Submit][Status] ...

  2. JW Player 现在支持 Azure 媒体服务

    Vishal Sood Azure媒体服务首席项目经理 此合作伙伴关系是关于什么内容? Azure媒体服务现已支持一些最常见的流媒体格式,其中包括 Microsoft SmoothStreaming ...

  3. jboss项目迁移至WebLogic12

    1 weblogic 使用jtds-1.2.3.jar驱动链接MS SQL Server 2008的数据源配置 1.1 拷贝jtds-1.2.3.jar至D:\Oracle\Middleware\wl ...

  4. 水题：HDU 5119 Happy Matt Friends

    Matt has N friends. They are playing a game together.Each of Matt's friends has a magic number. In t ...

  5. Legal or Not

    Legal or Not Time Limit : 2000/1000ms (Java/Other)   Memory Limit : 32768/32768K (Java/Other) Total ...

  6. 用户故事（User Story）

    摘要: 一件用户通过系统完成他一个有价值的目标(买一罐饮料)的事.这样的过程就叫“用户案例(user case)”或者“用户故事(user story)”.本文描述了敏捷开发的技巧:如何以用户故事管理 ...

  7. QT更改程序图标

    方法只要几个步骤就好了,如下: 1.准备好一个ico格式的图标文件,例如demo.ico 2.创建一个rc文件, 例如demo.rc. 并copy下面代码: // Generated by ResEd ...

  8. 前端模块化开发篇之grunt&webpack篇

    几个月前写了一篇有关gulp和browserify来做前端构建的博客,因为browserify用来做js的打包时可能有些麻烦(特别是在写React的时候),所以这里再强烈推荐一款js打包工具-webp ...

  9. Good Numbers

    Problem Description If we sum up every digit of a number and the result can be exactly divided by 10 ...

  10. Unity给力插件之ShaderForge（二）

    直接上实例: 一.自定义光照: 效果图(白色点光源照射时) 图片及参数 节点编辑 备注: 1.append为追加:两个一维数值合并为一个二维数值,一个二维数值与一个一维数值合并为一个三维数值,以此类推 ...