快速编程JS初级教程2-2 游戏程序结构

游戏程序结构：计时器，绘制画面，数值刷新+碰撞检测

数值刷新：

1.动画效果的刷新，例如子弹飞行，不断修改子弹坐标。一路小兵出发，不断修改小兵的行动坐标。

2.计时类。技能在冷却，冷却计时。

碰撞种类：

1.碰到边界，一个游戏元素(Sprite,Item)消失，比如攻击的子弹

2.攻击元素碰到其他单位，比如，敌人，障碍物

3.玩家单位被其他单位碰到，比如，敌人发出的子弹，地图的陷阱

后两者，会产生数据的结算，玩家的生命值，游戏的胜利或失败。

做一个简单例子，飞行的子弹，碰到游戏画面边界后消失。效果如下：

代码如下：

<script type="text/javascript">
/////////数据
var itemsx=new Array();
var itemsy=new Array();
////////////////////////// 基本函数
function draw(x,y)
{
//创建div
 var div=document.createElement("div");
 div.innerHTML='<img src="bullet2.png" style="position:absolute;visibility:visible;left:'+x+'px;top:'+y+'px" />';
 document.body.appendChild(div); 
}

function updatedata()
{
	//move
	for(var i=0;i< itemsx.length; i++)
	{
		itemsx[i]+=10;		
	}	
	
	//check
	for(var i=itemsx.length-1;i>=0 ; i--)
	{
		if(itemsx[i]>600)
		{
			itemsx.splice(i,1);
			itemsy.splice(i,1);
		}
	}	
}
function paint()
{
	document.body.innerHTML=""; //清空内容

	var div=document.createElement("div");
 div.innerHTML='<div id="line_div" style="width:600px;height:400px;position:absolute;visibility:visible;left:0px;top:0px;border:2px solid #ff0000"></div>';
 document.body.appendChild(div); 
 
	for(var i=0;i< itemsx.length; i++)
	{
		draw(itemsx[i], itemsy[i] );
	}
	
	updatedata();
}
/////////////////////////////////// 事件函数
document.onmousedown =function(a) 
{ 

 //按下时创建一个事件
 if(!a) a=window.event;
 //获取x轴、y轴坐标
 var x=a.clientX;
 var y=a.clientY;
 
 //创建
 itemsx.push(x);
 itemsy.push(y);
}  
draw(100,50);

var int=self.setInterval("paint()",200);
</script>

休闲游戏，大型游戏，都是三件事：绘制画面，刷新数据，碰撞检测。

接下来的安排：

1.DIV图层和布局，游戏角色和地图。地图循环移动。

2.鼠标事件，键盘事件。

3.各项技术综合，一个简易的超级玛丽就做好了。