【回顾】
上面介绍了一下Easeljs以及其优势，并且利用Easeljs+Jscex实现了坦克的右移以及开炮，但是还存在许多问题，比如移动不能开炮，开炮不能移动。【本篇内容】
这篇主要利用Jscex并行编程模型搭起游戏的基本框架，并且解决坦克的转弯和开火。【架构设计】
昨天我仔细想了想，不管是任何东西，拆得越细就越好控制。如果使用Easeljs的tick（也就相当于Jscex的while(true)），任何东西都往里面丢，函数冗长，不能灵活控制。Jscex有个很明显的优势，它可以轻松挂起一个while(true)，用于监听，然后根据监听的结果做出相应的操作。所以，我把坦克大战拆成以下七个异步任务，游戏的所有元素都在下面七个异步任务当中：a.坦克的移动
b.子弹的生产
c.子弹的飞行
d.碰撞检测，比如击中墙壁，击中敌方坦克
e.宝物的生成，比如增加火力的宝物，增加生命的宝物
f.统计任务，比如消灭敌军坦克获取积分
g. GameOver监听，比如老巢被灭，比如自己牺牲并且剩余生命条数为0
这七个任务同时执行，看似相互独立，其实是相互影响，比如
碰撞检测到击中敌方坦克，就会触发统计任务，
击中掉宝坦克，触发宝物的生成
被敌方坦克消灭老巢，触发GameOver
【转弯和开火】
开始打算用rotation属性来旋转图片，实现转弯，并且带有转弯动画，这也算超越了以前的坦克大战。然后rotation旋转图片不会以图片的中心旋转，而会以图片左上角为基准点旋转，这叫我情何以堪！旋转效果如下：
好吧，我还是用四张图片吧，反正素材就提供了4张图片。
我们把转弯与开火拆成三个异步任务：
a.坦克的移动
b.子弹的生产
c.子弹的飞行
坦克的移动：var moveAsync = eval(Jscex.compile("async", function () { var i = 0; while (true) { if (goRight == true) { bmpR.visible = true; bmpL.visible = false; bmpD.visible = false; bmpU.visible = false; bmpL.x += 1; bmpR.x += 1; bmpD.x += 1; bmpU.x += 1; } if (goLeft == true) { bmpR.visible = false; bmpL.visible = true; bmpD.visible = false; bmpU.visible = false; bmpR.x -= 1; bmpL.x -= 1; bmpD.x -= 1; bmpU.x -= 1; } if (goUp == true) { bmpR.visible = false; bmpL.visible = false; bmpD.visible = false; bmpU.visible = true; bmpR.y -= 1; bmpL.y -= 1; bmpD.y -= 1; bmpU.y -= 1; } if (goDown == true) { bmpR.visible = false; bmpL.visible = false; bmpD.visible = true; bmpU.visible = false; bmpR.y += 1; bmpL.y += 1; bmpD.y += 1; bmpU.y += 1; } stage.update(); $await(Jscex.Async.sleep(10)); } }))
生成子弹：
var bulletStream = new Array(); var createBulletAsync = eval(Jscex.compile("async", function () { var i = 0; while (true) { if (shootHeld == true) { bulletStream[i] = new Bitmap("image/tankmissile.gif"); if (bmpD.visible == true) { bulletStream[i].direction = "down"; bulletStream[i].x = bmpR.x + 21; bulletStream[i].y = bmpR.y + 60; } if (bmpL.visible == true) { bulletStream[i].direction = "left"; bulletStream[i].x = bmpR.x ; bulletStream[i].y = bmpR.y + 21; } if (bmpR.visible == true) { bulletStream[i].direction = "right"; bulletStream[i].x = bmpR.x + 60; bulletStream[i].y = bmpR.y + 21; } if (bmpU.visible == true) { bulletStream[i].direction = "up"; bulletStream[i].x = bmpR.x + 21; bulletStream[i].y = bmpR.y ; } stage.addChild(bulletStream[i]); i++; } stage.update(); $await(Jscex.Async.sleep(200)); } }))
我们要在生成子弹的时候，告诉子弹的方向，也许以后会扩展一个子弹的速度。
子弹的飞行：
var fireAsync = eval(Jscex.compile("async", function () { while (true) { for (bullet in bulletStream) { if (bulletStream[bullet].direction == "up") { bulletStream[bullet].y -= 10; } if (bulletStream[bullet].direction == "down") { bulletStream[bullet].y += 10; } if (bulletStream[bullet].direction == "right") { bulletStream[bullet].x += 10; } if (bulletStream[bullet].direction == "left") { bulletStream[bullet].x -= 10; } } stage.update(); $await(Jscex.Async.sleep(50)); } }))
元素初始化，并行任务开始：
function init() { canvas = document.getElementById("testCanvas"); stage = new Stage(canvas); bmpR = new Bitmap("image/p1tankR.gif"); bmpL = new Bitmap("image/p1tankL.gif"); bmpD = new Bitmap("image/p1tankD.gif"); bmpU = new Bitmap("image/p1tankU.gif"); bmpL.visible = false; bmpD.visible = false; bmpU.visible = false; stage.addChild(bmpR); stage.addChild(bmpL); stage.addChild(bmpD); stage.addChild(bmpU); Ticker.addListener(stage); createBulletAsync().start(); fireAsync().start(); moveAsync().start(); }
【在线演示】
操作指南：WSAD+J未完待续··········
最新的Jscex 库，请上http://github.com/JeffreyZhao/jscex或者http://www.sndacode.com/projects/jscex/wiki下载吧····
【更多javascript异步编程系列】
javascript异步编程系列【一】----用Jscex画圆
javascript异步编程系列【二】----Jscex模拟重力场与google苹果logo的比较
javascript异步编程系列【三】----Jscex无创痕切入JqueryUI
javascript异步编程系列【四】----Jscex+Jquery UI打造游戏力度条
javascript异步编程系列【五】----Jscex制作愤怒的小鸟
javascript异步编程系列【六】----Jscex版愤怒的小鸟之冲锋陷阵鸟
javascript异步编程系列【七】----扫盲，我们为什么要用Jscex
javascript异步编程系列【八】--Jscex版火拼俄罗斯
javascript异步编程系列【九】--Jscex+Easeljs制作坦克大战【一】
作者：张磊(zhanglei's Blog) 出处： http://www.cnblogs.com/iamzhanglei 本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。
最新评论