标签：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
标签：style blog color width os cti
原文地址：http://www.cnblogs.com/sunxun/p/3826186.html
