您的位置：首页 > Web前端 > JavaScript

HTML5学习+javascript学习：打飞机游戏Service层Control层+源码

2013-06-29 16:30 405 查看

2.Service层

如前所述，Service层是Control层与Model层之间桥接的一层，它拥有所有要在屏幕上显示的实体（除了背景）的引用

我们知道，当游戏运行时，随时都可能发生碰撞，随时都可能发生飞行物的消失。而我们要想判定飞行物的状态，就必须把所有的飞行物都遍历一遍方可，那么我们要把所有的没消失的飞行物都放在一起。但是如果这些飞行物放在一起都放在control层里，control层会显得很庞大，又要处理飞机的销毁，又要给返回图片。然后如果我们想通过服务器根据条件获得新的飞机，我们是不是又要在control层中添加事件，添加代码。那control层会显得很乱。所以，保险起见，我们在control层和model层之间桥接了一个service层，它就只负责处理飞行物销毁和子弹发射等已有的事件，提供一些可供control层访问的接口（事件其实就是方法），并把图像返回到control层去，将来如果我们从服务器得到更多的飞机要来，那就把这些飞机给传到control层，然后由control层来调用service的接口就好啦。也就是把control层分成两部分，一部分处理业务，一部分处理显示。

我们已经介绍了Model层，我们知道model层的方法是由service来调用的，Model层的所有方法(除了访问其私有变量的方法外)均会返回一个array，而调用方法返回的这个array是如何被service抓取又是如何被service处理的呢？我们又如何来设计这个service层呢？

首先要有一个飞行物的数组来存放所有的飞行物，同时要有一个数组来缓存事件，另外一个数组来缓存图片。然后要有一个接口的方法update，之后要有一个draw方法来返回给control层更新图像的图片和坐标，还要有一些事件来处理Model返回的事件，其流程为：

update：1.遍历model，先判断model是否有可能发生碰撞，如果有（即碰撞体积有重合的部分），那么就调用model的碰撞方法，将返回的结果缓存到注册表中，然后调用draw方法（因为有可能新增飞行物，飞行物消失等改变飞行物数组的事件出现因此不可以一并处理，设想这样：如果一个飞行物已经消失了，还调用它的移动方法是没有意义的 ）2.遍历model调用它们的移动方法，更新它们的坐标，将返回的内容缓存到注册表中（因为如果出了边界也有可能出现消失，发射炮弹也有可能新增飞行物）。

draw：将注册表的事件逐个取出，执行，并返回一个图像的数组

下面给出service的代码

service.js

<!DOCTYPE HTML >
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">

<script type="text/javascript" src="jquery-1.3.1.js"></script>
<script type="text/javascript" src="js/fly.js"></script>
<script type="text/javascript" src="js/bullets.js"></script>
<script type="text/javascript" src="js/movition.js"></script>
<script type="text/javascript" src="js/background.js"></script>
<script type="text/javascript" src="js/planestage.js"></script>
<script type="text/javascript" src="js/service.js"></script>
<script type="text/javascript" src="js/friendplane.js"></script>

<script type="text/javascript">
/*$myplane=function(){
var movex=0;
var movey=0;
$(document).bind('keydown',function(event){
switch (event.which) {
case 37:
movex=-1;
movey=0;
break;
case 38:
movex=0;
movey=-1;
break;
case 39:
movex=1;
movey=0;
break;
case 40:
movex=0;
movey=1;
break;
}

});
return {
init:function(){
movex=0;
movey=0;
},
x:function(){
return movex;
},
y:function(){
return movey;
}
};
}();*/
$(function(){
var svc=service();
svc.newenemy();
svc.newenemy();

svc.newenemy();
svc.newenemy();
var bullet={
x:1,
y:CANVAS_HEIGHT-5,
hp:1,
index:svc.total(),
exploreImg:getImg("img/blasts3.png"),
img:getImg("img/mybullet2.png"),
target:0,
conflictSquare:20,
speedX:5,
speedY:10,
movex:0,
movey:0};
/*var flier=fly({
x:Math.random()*CANVAS_WIDTH,
y:Math.random()*CANVAS_HEIGHT,
hp:10,
index:svc.total(),
exploreImg:getImg("img/blasts3.png"),
img:getImg("img/mybullet1.png"),
target:0,
conflictSquare:4,
speedX:5,
speedY:5,
movex:0,
movey:0
});
flier.onMove=function(x,y){
//if(x!=0||y!=0){
this.judgeBundle();
this.move($myplane.x(),$myplane.y());
//$myplane.init();

return {type:"drawimg",func:"drawimg",params:[flier.img(),flier.x(),flier.y()]};
//}
//return;
};
*/
var flier=playerplane({
x:Math.random()*CANVAS_WIDTH,
y:Math.random()*CANVAS_HEIGHT,
hp:100,
index:svc.total(),
exploreImg:getImg("img/blasts3.png"),
img:getImg("img/dplayerplane.png"),
target:0,
conflictSquare:5,
speedX:5,
speedY:5,
movex:0,
movey:0,
bullet:bullet
});
svc.newfly(flier);
for(i=0;i<20;i++)
{
svc.newbullets();
}
var backParam={
speedY:-5,
imgHeight:250
};
$planestage.initCanvas();
var back=$background(backParam);
back.setImg("img/back_img.png",2500,470);
$planestage.push(back);
$planestage.push(svc);
$planestage.start();
});
</script>
</head>

<body>

</body>
</html>


应用层
至于view层，就是HTML5的Canvas，这里就不多介绍，API文档很全很全。最后给个截图



代码在这里：

博客园自己的文件下载可能有问题，我分享到百度网盘了
http://pan.baidu.com/share/link?shareid=496950718&uk=604524374

软件开发，其乐无穷啊~~大家，enjoy it！~~~~
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航