游戏程序结构:计时器,绘制画面,数值刷新+碰撞检测
数值刷新:
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.各项技术综合,一个简易的超级玛丽就做好了。