【游戏简介】
1985年推出的坦克大战（Battle City）由13×13大小的地图组成了35个关卡，地形包括砖墙、海水、钢板、森林、地板5种，玩家作为坦克军团仅存的一支精锐部队的指挥官，为了保卫基地不被摧毁而展开战斗。游戏中可以获取有多种功能的宝物，敌人种类则包括装甲车、轻型坦克、反坦克炮、重型坦克4种，且存在炮弹互相抵消和友军火力误伤的设定。
【easeljs介绍】
easeljs：a javascript library for working with the html5 canvas element 。The new Canvas element in HTML5 is powerful, but it can be difficult to work with. It has no internal concept of discrete display elements, so you are required to manage updates manually. The Easel Javascript library provides a retained graphics mode for canvas including a full, hierarchical display list, a core interaction model, and helper classes to make working with Canvas much easier.
【easeljs的优势】
1.我们知道，运动的本质是符合“在在”原理来欺骗人的眼睛，就是不同的时间处于不同的位置，来欺骗人的眼睛。而在Canvas下编程，要改变物体的位置需要，把原位置的图片擦除来制造运动的假象，然而我们用easeljs就不用关心擦除原图，只需关注位置的变化。2.easeljs提供了完善了粒子元素管理，Canvas里的所有物体都继承于displayobject，可以方便的移除增加元素，改变元素的属性，如透明度、位置、旋转角度。
4.easeljs提供了tick对动画的支持，当然这里我用Jscex代替，因为Jscex真的是无人能敌，秒杀一切异步类库。
【技术分析以及实现】
1.坦克的移动先捕获键盘事件，以右移为例子
document.onkeydown = handleKeyDown; document.onkeyup = handleKeyUp; function handleKeyDown(e) { if (!e) { var e = window.event; } switch (e.keyCode) { case KEYCODE_SPACE: shootHeld = true; break; case KEYCODE_A: case KEYCODE_LEFT: lfHeld = true; break; case KEYCODE_D: case KEYCODE_RIGHT: bmp.x += 10; stage.update(); break; case KEYCODE_W: case KEYCODE_UP: fwdHeld = true; break; } } function handleKeyUp(e) { if (!e) { var e = window.event; } switch (e.keyCode) { case KEYCODE_SPACE: shootHeld = false; break; case KEYCODE_A: case KEYCODE_LEFT: lfHeld = false; break; case KEYCODE_D: case KEYCODE_RIGHT: rtHeld = false; break; case KEYCODE_W: case KEYCODE_UP: fwdHeld = false; break; } }
stage.update();是更新舞台，对canvas做的所有操作变化要体现出来都要执行update方法。
2.坦克开火
我用Jscex把开火拆成了两步。
一步是产生炮弹，一步是炮弹飞行，其实这两步本来就是两件事情。
var bulletStream = new Array(); //生产炮弹 var addbulletAsync = eval(Jscex.compile("async", function () { var i = 0; while (true) { if (shootHeld == true) { bulletStream[i] = new Bitmap("image/tankmissile.gif"); bulletStream[i].x = bmp.x + 60; bulletStream[i].y = bmp.y + 21; 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) { bulletStream[bullet].x += 10; } stage.update(); $await(Jscex.Async.sleep(10)); } }))
【在线演示】
J是开火，D或者 right移动未完待续··········
最新的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版火拼俄罗斯
作者：张磊(zhanglei's Blog) 出处： http://www.cnblogs.com/iamzhanglei 本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。
最新评论