H TML5 之 （6）下雨效果
在对HTML5进行研究之后，有了一点想法，思考出游戏其实感觉就是四个步骤
1.创建一个你需要的对象，赋予属性（一些影响方法的属性），方法（运动，叫....）
2.实例化这个对象，让它成为一个或者多个个体
3.画图方法，画出你所需要画出的对象的外形
4.调用画图方法，将实例化后的对象传进去，一个对象实例化后的外形就出来了，剩下的就是思考该在合适显示这个外形，
就达到游戏的基本思想了，
DOCTYPE HTML>
<html>
<head>
<title>Shottitle>
<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>
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！