CreateJS实现打飞机小游戏

之前对createJs体验了一下，正好看到网上有一篇教程，试着也写了一个打飞机的小游戏，UI相对比较简单，主要记录下实现游戏逻辑的思路。

window.onload = function() {canvas = document.getElementById("canvas");stage = new createjs.Stage(canvas);preload = new createjs.LoadQueue(false);//如果载入声音，必须先注册createjs.Soundpreload.installPlugin(createjs.Sound);// 导入资源创建舞台game.init();
};

    init: function() {var progressText = new createjs.Text("", "20px Arial", "#dd4814");progressText.x = stage.canvas.width / 2;progressText.y = stage.canvas.height / 2;progressText.textAlign = 'center';stage.addChild(progressText);function startPreload() {var manifest = [{id: 'sprite',src: 'plane.png'}, {id: 'shot',src: 'shot.mp3'}, {id: "explosion",src: 'explosion.mp3'}];preload.setMaxConnections(3);preload.maintainScriptOrder = true;preload.on("progress", loadProgress);preload.on("error", loadError);preload.on("complete", loadComplete);preload.loadManifest(manifest);}startPreload();function loadProgress(e) {progressText.text = "已加载 " + (preload.progress * 100 | 0) + " %";console.log(progressText.text);}function loadError(e) {console.log(e);}function loadComplete(e) {stage.removeChild(progressText);game.handleComplete();}},

加载好需要用到的库以后，先运行init方法载入游戏资源；如果要播放声音，需先preload.installPlugin(createjs.Sound)注册createjs.Sound，不然后面直接调用方法播放音频文件会出错。

    // 创建游戏界面，设置按键handleComplete: function() {buildGame.init();buildGame.setContorl();game.startGame();},//开始游戏startGame: function() {createjs.Ticker.setFPS(60);createjs.Ticker.addEventListener('tick', function() {updateGame.init();stage.update();});}

在startGame方法里，设置帧频，stage.update()游戏更新场景。

buildGame.init();创建游戏场景，飞机的精灵动画对象。

init: function() {buildGame.buildMsg();buildGame.buildSpriteSheet();buildGame.buildPlayer();buildGame.buildEnemy();buildGame.buildSpace();},

用到的图片素材以及相应的帧数据：

    //创建精灵动画表buildSpriteSheet: function() {var data = {images: [preload.getResult('sprite')],frames: [[0, 0, 38, 42],[37, 0, 42, 42],[79, 0, 37, 42],[116, 0, 42, 42],[158, 0, 37, 42],[0, 70, 64, 64],[64, 70, 64, 64],[128, 70, 64, 64],[192, 70, 64, 64],[256, 70, 64, 64],[320, 70, 64, 64],[384, 70, 64, 64],[448, 70, 64, 64],[512, 70, 64, 64],[576, 70, 64, 64],[640, 70, 64, 64],[704, 70, 64, 64],[768, 70, 64, 64]],animations: {ship: 0,enemy1: 1,enemy2: 2,enemy3: 3,enemy4: 4,exp: {frames: [5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16],speed: .5}}};buildGame.spriteSheet = new createjs.SpriteSheet(data);},

这里要吐槽一下，createjs没有合适的动画转换工具可以直接生成图片素材与帧数据，美中不足啊。

素材中有5种飞机，选1个为我们可操作的主角后，剩下4个插入敌机种类的数组中。

//创建玩家的飞机buildPlayer: function() {Plane.player = new createjs.Sprite(buildGame.spriteSheet, 'ship');//getBounds方法返回当前对象宽高console.log(Plane.player.getBounds());Plane.width = Plane.player.getBounds().width;Plane.height = Plane.player.getBounds().height;Plane.player.x = (stage.canvas.width - Plane.width) / 2;Plane.player.y = stage.canvas.height - Plane.height;stage.addChildAt(Plane.player, 0);},//创建敌机buildEnemy: function() {var e1, e2, e3, e4;e1 = new createjs.Sprite(buildGame.spriteSheet, "enemy1");e2 = new createjs.Sprite(buildGame.spriteSheet, "enemy2");e3 = new createjs.Sprite(buildGame.spriteSheet, "enemy3");e4 = new createjs.Sprite(buildGame.spriteSheet, "enemy4");enemyPlane.enemyClip.push(e1, e2, e3, e4);},

游戏背景就更简单了，随机生成200个小圆点散落在场景中。

//星空背景buildSpace: function() {var i, star, starSky, w, h, alpha;for (i = 0; i < 200; i++) {starSky = new createjs.Container();star = new createjs.Shape();w = Math.floor(Math.random() * stage.canvas.width);h = Math.floor(Math.random() * stage.canvas.height);alpha = Math.random();star.graphics.beginFill("#45D0DE").drawCircle(0, 0, 2);star.x = w;star.y = h;star.alpha = alpha;starSky.addChild(star);updateGame.starSpace.push(star);stage.addChild(starSky);}},

敌机从种类数组中随机克隆种类放入编队数组，以编队的形式进入场景。

//敌机对象
var enemyPlane = {//敌机种类数组enemyClip: [],//敌机队列数组enemysQueue: [],//敌机增加时间（速度）addSpeed: 1000,//敌机移动时间（速度）moveSpeed: 5000,//敌机队列数量enemynNum: 15,//随机添加一类敌机进入战场addEnemy: function() {var random = Math.floor((Math.random() * enemyPlane.enemyClip.length));//克隆随机种类敌机放入队列数组var randomPlane = enemyPlane.enemyClip[random].clone();var randomPlaneWidth = randomPlane.getBounds().width;randomPlane.x = Math.floor((Math.random() * (stage.canvas.width - randomPlaneWidth * 2)));randomPlane.y = -100;enemyPlane.enemysQueue.push(randomPlane);stage.addChild(randomPlane);}
};

玩家飞机通过按键发射子弹，同时将发射的子弹插入一个数组。

//飞机对象
var Plane = {lives: 3,score: 0,speed: 9,player: {},width: 0,height: 0,fires: [],//发射子弹playFire: function() {if (updateGame.run) {var fire = new createjs.Shape();fire.graphics.beginFill('#FF0').drawRect(0, 0, 6, 6).endFill();fire.x = Plane.player.x - 3 + Plane.width / 2;fire.y = Plane.player.y;createjs.Sound.play('shot');Plane.fires.push(fire);stage.addChild(fire);}}
};

游戏运行时循环子弹数组和敌机编队数组就可以实现碰撞检测的逻辑了，把发生碰撞的子弹与敌机从场景清除并播放爆炸动画与音效，同时计分等。

    //子弹与敌机的碰撞检测checkCollision: function() {for (var i = 0; i < Plane.fires.length; i++) {var fire = Plane.fires[i];for (var j = 0; j < enemyPlane.enemysQueue.length; j++) {var enemy = enemyPlane.enemysQueue[j];var fx = fire.x;var fy = fire.y;var ex = enemy.x;var ey = enemy.y;var ew = enemy.getBounds().width;var eh = enemy.getBounds().height;//判断子弹有没有进入敌机矩形区域内var pt = fy < ey + eh && fy > ey && fx > ex && fx < ex + ew && ey > 0;if (pt) {Plane.score += 10;Plane.fires.splice(i, 1);enemyPlane.enemysQueue.splice(j, 1);stage.removeChild(fire);stage.removeChild(enemy);createjs.Sound.play('explosion');var exp1 = new createjs.Sprite(buildGame.spriteSheet, 'exp');exp1.x = enemy.x;exp1.y = enemy.y;stage.addChild(exp1);//爆炸动画结束时从舞台清除exp1.addEventListener('animationend', function(e) {stage.removeChild(e.target);});};};};},

由于createjs提供的碰撞检测方法并不是特别好用，所以这里实现的并不算太好。还剩下的一些逻辑代码就随便贴一下吧。

    //子弹飞行updateFire: function() {for (var i = 0; i < Plane.fires.length; i++) {var nextY = Plane.fires[i].y - 10;if (nextY <= 0) { //如果子弹飞出场景，在子弹数组中去掉，并在stage中删除元素console.log(Plane.fires[i]);stage.removeChild(Plane.fires[i]);Plane.fires.splice(i, 1);continue;}Plane.fires[i].y = nextY;};},//敌机飞行updateEnemy: function() {var pl = Plane.player;var plx = Plane.player.x;var ply = Plane.player.y;var plw = Plane.player.getBounds().width;var plh = Plane.player.getBounds().height;//队列内的敌机依次出现for (var i = 0; i < enemyPlane.enemysQueue.length; i++) {var ep = enemyPlane.enemysQueue[i];var randomPlaneWidth = ep.getBounds().width;var randomPlaneHeight = ep.getBounds().height;createjs.Tween.get(ep).wait(enemyPlane.addSpeed * i).to({x: Math.floor((Math.random() * (stage.canvas.width - randomPlaneWidth * 2))),y: stage.canvas.height}, enemyPlane.moveSpeed, createjs.Ease.sineInOut(-2));// 敌机飞出场景移除if (ep.x >= stage.canvas.width || ep.y >= stage.canvas.height) {enemyPlane.enemysQueue.splice(ep, 1);stage.removeChild(ep);console.log(enemyPlane.enemysQueue);continue;}//玩家飞机与敌机碰撞处理var pz_x = Math.abs(ep.x - plx) <= randomPlaneWidth / 2 + plw / 2;var pz_y = Math.abs(ep.y - ply) <= randomPlaneHeight / 2 + plh / 2;if (pz_x && pz_y && updateGame.run) {Plane.lives--;createjs.Sound.play('explosion');var exp1 = new createjs.Sprite(buildGame.spriteSheet, 'exp');exp1.x = plx;exp1.y = ply;stage.addChild(exp1);//爆炸动画结束时从舞台清除exp1.addEventListener('animationend', function(e) {stage.removeChild(e.target);if (Plane.lives == 0) {createjs.Ticker.setPaused(true); //暂停游戏alert('游戏结束');} else {var setTime = setTimeout(function() {buildGame.buildPlayer();updateGame.run = true;clearTimeout(setTime);}, 1000);};});stage.removeChild(Plane.player);updateGame.run = false;break;};};//如果队列内没有敌机添加敌机if (enemyPlane.enemysQueue.length == 0) {for (var i = 0; i < enemyPlane.enemynNum; i++) {enemyPlane.addEnemy();};};},

最终运行效果，还算勉强能玩。

CreateJS实现打飞机小游戏相关推荐

用JAVA写个飞机小游戏玩玩吧
闲来无事写了个飞机小游戏. 设定很简单,子弹打到飞机就结束游戏. 实现步骤如下,有问题可以评论区讨论: 首先建立一个PlayGame项目和它之下的包: MyGameFrame(游戏实现)类: pack ...
C语言射击类打飞机小游戏
使用c语言编写一个打飞机小游戏,使用键盘按键来进行游戏,击中敌机可获得积分,被敌机撞中死亡一次,每次游戏有3次机会. 在网上查询资料并且和同学讨论之后,对原来的代码有了一些改进, 改进:增加了颜色函数 ...
视频教程-JavaScript打飞机小游戏视频教程-JavaScript
JavaScript打飞机小游戏视频教程拥有6年web前端和后端开发经验,4年授课经验,还曾在百度专业培训过网络营销课程,曾就职于联想集团和当当网,不仅有丰富的项目实战经验还有营销经验,综合实力较强 ...
Android 打飞机小游戏的实现 - 画面移动对象封装碰撞效果
打飞机小游戏 *1.画背景 *2.画飞机 *3.画小怪 *4.画子弹 *--背景,飞机.小怪.子弹各有draw和move方法 public class MainActivity extends ...
微信打飞机小游戏的尝试
微信打飞机小游戏的尝试问题:微信打飞机游戏出现不断跳出的问题原因:未加return.
c语言射击类打飞机小游戏感悟
c语言:简单飞机射击小游戏使用c语言编写一个打飞机小游戏,使用键盘按键来进行游戏,操作方法是"a""d""w"或者"←" ...
C语言打飞机小游戏
C语言实现简单的打飞机小游戏编译环境:vs2019 需求: 在同一个平面内,控制大炮发射的三个方向,空格发射炮弹,敌军和友军飞机会一直随机在天上飞过,击中天上飞行的敌军飞机加一分,击中友军飞机减一分 ...
Python编写微信打飞机小游戏（三）
如果觉得这篇文章对您有所启发,欢迎关注我的公众号,我会尽可能积极和大家交流,谢谢. Python编写微信打飞机小游戏(一) Python编写微信打飞机小游戏(二) Python编写微信打飞机小游戏(三 ...
js 实现微信打飞机小游戏小练习
还是想练习js 的内容看见了一个关于微信打飞机小游戏的例子,就照着做了一点,发现看懂和自己写真的是不一样,很多问题都是对函数理解不够透彻. 这次是使用了面向对象的方法创建了敌机类,在学习这个的时候也 ...

CreateJS实现打飞机小游戏

CreateJS实现打飞机小游戏相关推荐

最新文章

热门文章