打飞机游戏雷电是一款经典的空战游戏,利用已知的CreateJS知识就可以很容易的做出一款类似的打飞机游戏。
首先,弄一些游戏需要的资源,做这样的一个小游戏,首先需要一架玩家操控的飞机图片,然后是可以击落的敌机图片,连续的爆炸图片来组成一个爆炸的动画Sprite,开枪的声音,爆炸的声音,星空的背景,然后使用TexturePacker把这些图片合并成一张图片,并获得一个json文件,其中的数据可以用做生成SpriteSheet的参数。
而后,有了资源之后,再构想一个大概的游戏框架,从最基础的CreateJS游戏框架开始,思考游戏的流程和逻辑,逐步的添加哪些功能来实现这个游戏,我的打飞机游戏最初的框架是这样的
var stage;
function init(){
//1.导入资源,并在资源加载完成后调用处理函数handleComplete
//2.创建舞台stage
}
function handleComplete(){
buildGame();//3.创建游戏界面,星空,玩家飞机,敌机,计分版等
setContorl();//4.设置按键控制,让玩家可以左右移动并发射子弹
startGame();//5.进入游戏循环,使用tick事件实现游戏的变化,发展
}
function startGame(event){
createjs.Ticker.setFPS(60);
createjs.Ticker.addEventListener('tick',function(){
updateGame();//6.更新游戏元素的位置,更新分数等
checkGame();//7.检查游戏中的元素是否发生碰撞,敌机被击落,还是飞出屏幕等等
stage.update();
});
}
按照思路,一切顺利的话,完成这7个步骤,一个简单的打飞机游戏就产生了。那么先从导入资源和创建舞台开始吧
1.准备好所用的图片和声音,首先把所用的图片合成到一起,准备两个声音文件,发射子弹shot.mp3和爆炸的声音explosion.mp3,创建好页面的Canvas并把背景设置为黑色的
<canvas id="game" width="500" height="700" style="background-color: black"></canvas>
2.初始化部分,创建舞台和导入文件
function init(){
stage = new createjs.Stage('game');
sWidth = stage.canvas.width;
sHeight = stage.canvas.height;
queue = new createjs.LoadQueue(true);
createjs.Sound.registerPlugins([createjs