在对HTML5进行研究之后，有了一点想法，思考出游戏其实感觉就是四个步骤

1.创建一个你需要的对象，赋予属性（一些影响方法的属性），方法（运动，叫....）

2.实例化这个对象，让它成为一个或者多个个体

3.画图方法，画出你所需要画出的对象的外形

4.调用画图方法，将实例化后的对象传进去，一个对象实例化后的外形就出来了，剩下的就是思考该在合适显示这个外形，

就达到游戏的基本思想了，

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

    您的浏览器不支持眮E薹吹交?

    </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;

    }

  }

  //实例化对象，放入数组中

  var shots = new Array();

  for(var i =1;i<50;i++){

     var shot = new Shot(i*50*Math.random(),i*50*Math.random(),i);

     shots[i] = shot;

  }

  //画子弹的方法

   function drawShot(tank){

              cxt.fillStyle = "#ded284";

              cxt.beginPath();

              cxt.fillRect(tank.x,tank.y,5,5);

              cxt.closePath();

  }

  //调用子弹的画出的方法

function run(){

    cxt.clearRect(0,0,880,400);

    for(var i =1;i<50;i++){

        shots[i].move();

        drawShot(shots[i]);

    }

}

window.setInterval("run()",100);

    </script>

</html>

H TML5 之 （6）下雨效果的更多相关文章

  1. 6 cocos2dx粒子效果，类图关系，系统原生粒子和自己定义粒子效果，粒子编译器软件，爆炸粒子效果，烟花效果，火焰效果，流星效果，漩涡粒子效果，雪花效果，烟雾效果，太阳效果，下雨效果

     1 粒子 演示样例 2 类图关系 3 系统原生粒子 CCParticleSystem 全部粒子系统的父类 CCParticleSystemPoint. CCParticleSystemQuad ...

  2. 使用 Canvas 和 JavaScript 创建逼真的下雨效果

    HTML5 规范引进了很多新特性,其中最令人期待的之一就是 Canvas 元素,HTML5 Canvas 提供了通过 JavaScript 绘制图形的方法,非常强大.这里向大家展示一个使用 Canva ...

  3. 使用Unity3D自带动画系统制作下雨效果

    之前看了以前版本的unity3d demo AngryBots ,觉得里面的下雨效果不错,刚好前段时间学习了,写出来跟大家分享下,直接开始. 使用自带动画系统制作下雨效果. 先制作下雨的雨滴涟漪 步骤 ...

  4. Unity3d中使用自带动画系统制作下雨效果(二)

    接着昨天的(一),今天上下雨效果的后半部分.在最后附上网盘链接,有使用的素材及本次的工程源文件,想看看的童鞋可以下载~~ 下雨效果分两部分:地上的涟漪和空中的雨滴.那么现在就开始,是使用unity3d ...

  5. Unity3d中使用自带动画系统制作下雨效果(一)

    之前看了以前版本的unity3d demo AngryBots ,觉得里面的下雨效果不错,刚好前段时间学习了,写出来跟大家分享下,直接开始. 使用自带动画系统制作下雨效果. 先制作下雨的雨滴涟漪. 步 ...

  6. css3写下雨效果

    css3写下雨效果<pre><div class="xiayuxiaoguo"></div></pre> <pre>.x ...

  7. 有趣的css—简单的下雨效果

    简单的下雨效果 前言 最近在b站上看到一个下雨效果的视频,感觉思路很清奇,我也按照自己的思路做了一个简单的下雨效果. 由于我制作GIF图片的工具最多只支持制作33FPS的GIF图,所以看起来可能有一点 ...

  8. 有趣的css—简单的下雨效果2.0版

    简单的下雨效果2.0版 前言 笔者上一篇发布的文章有趣的css-简单的下雨效果中有位老哥给我提了一个很棒的建议,大致意思是波纹应该产生于雨滴的消失处. 这是按照老哥的建议完善后的效果图: 由于我制作G ...

  9. H TML5 之 （7） 俄罗斯方块效果

    下载是模拟的俄罗斯方法的效果,在下落的情况下,能 <!DOCTYPE HTML> <html> <head> <title>Shot</title ...

随机推荐

  1. svn 规范apk的生成命名

    第一步:新建SVNVersion.gradle  放置于build.gradle统计目录下面 /*task svnversion { description 'Get SVN revision num ...

  2. Linux的线程同步对象：互斥量Mutex，读写锁，条件变量

        进程是Linux资源分配的对象,Linux会为进程分配虚拟内存(4G)和文件句柄等 资源,是一个静态的概念.线程是CPU调度的对象,是一个动态的概念.一个进程之中至少包含有一个或者多个线程.这 ...

  3. BZOJ_3196_二逼平衡树_(树套树,线段树+Treap)

    描述 http://www.lydsy.com/JudgeOnline/problem.php?id=3196 可以处理区间问题的平衡树. 3196: Tyvj 1730 二逼平衡树 Time Lim ...

  4. 【转】xcode APP 打包以及提交apple审核详细流程(新版本更新提交审核)

    原文网址:http://blog.csdn.net/mad1989/article/details/8167529 最近项目到了最后的阶段,测试完一切ok后,准备打包以及提交,不料看到网上众教程,好多 ...

  5. Java I/O学习（一）

    写作目的 自学Java,Java中流的概念比较复杂,故专门作一整理.期望开始学习的童鞋,看完本文后对Java流有一个大致的认识.主要分三个小篇: 一.概述.输入/输出字节流 二.输入/输出字符流.装饰 ...

  6. Android 网络通信框架Volley简介(Google IO 2013)

    1. 什么是Volley 在这之前,我们在程序中需要和网络通信的时候,大体使用的东西莫过于AsyncTaskLoader,HttpURLConnection,AsyncTask,HTTPClient( ...

  7. 2D游戏编程2--windows高级编程

      windows应用程序布局 编译流程 响应菜单事件消息 菜单消息处理实例: LRESULT CALLBACK WindowProc(HWND hwnd, UINT msg, WPARAM wpar ...

  8. Mac下快捷键列表

    主界面 command + tab 切换程序 command + ` 在程序内切换界面 command + w 关闭界面 command + q 关闭程序 command + option + esc ...

  9. usaco 购买饲料 && 修剪草坪

    购买饲料 Description 如约翰在镇上,沿着公路开车回家,他的家离起点有E公里.他顺便准备买K吨饲料回家.运送饲料是要花油钱的,如果他的车上有X吨饲料,行驶一公里需要X^2元,行驶D公里就 需 ...

  10. hdoj 1787 GCD Again【欧拉函数】

    GCD Again Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total S ...