码迷,mamicode.com
首页 > 其他好文 > 详细

H TML5 之 (6)下雨效果

时间:2014-07-05 21:58:00      阅读:300      评论:0      收藏:0      [点我收藏+]

标签:style   blog   color   width   os   cti   

在对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)下雨效果,布布扣,bubuko.com

H TML5 之 (6)下雨效果

标签:style   blog   color   width   os   cti   

原文地址:http://www.cnblogs.com/sunxun/p/3826186.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!