H TML5 之 （6）下雨效果

时间：2023-03-08 21:06:23

在对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>

相关文章