Cocos creator实现飞机大战空中大战《战击长空》小游戏资源及代码

Cocos creator实现飞机大战空中大战小游戏资源及代码
最近在学习Cocos Creator，作为新手，刚刚开始学习Cocos Creator，刚刚入门，这里记录一下飞机大战小游戏实现。搜索微信小游戏：战击长空。

https://wxaurl.cn/VEgRy2eTMyi

一安装CocosDashBoard

这里就不介绍如何安装了

二新建2D项目FlyWar

2.1、管理项目目录
在资源管理器中新建文件夹

anim 动画
preb 预制体
res 图片、语音资源
scene 场景
scripts 脚本资源
将资源文件拖到res目录下

三、关键步骤

3.1 实现背景的移动代码

背景的星空会有移动的效果

import GameConstant from "./GameConstant";const {ccclass, property} = cc._decorator;@ccclass
export default class MoveBackground extends cc.Component {    bgs : cc.Node[];@propertyspeed : number = 50;canvasWidth: number;canvasHeight: number;onLoad () {let canvas = cc.find('Canvas');this.canvasWidth = canvas.width;this.canvasHeight = canvas.height;// 注册特定事件cc.director.on(GameConstant.kUpdateGameStatus, this.listenGameStatus, this);}listenGameStatus() {}start () {this.node.width= this.canvasWidth;this.node.height = this.canvasHeight;this.bgs = this.node.children;for (let index = 0; index < this.bgs.length; index++) {let element = this.bgs[index];element.width = this.canvasWidth;element.height = this.canvasHeight;}// 设置默认if (this.bgs.length >= 2) {this.bgs[1].y = this.bgs[0].y + this.bgs[0].height; }}update (dt) {this.bgs[0].y -= this.speed * dt;this.bgs[1].y -= this.speed * dt;if (this.bgs[0].y < -this.canvasHeight) {this.bgs[0].y = this.bgs[1].y + this.bgs[1].height;}if (this.bgs[1].y < -this.canvasHeight) {this.bgs[1].y = this.bgs[0].y + this.bgs[0].height;}}
}

3.2 实现自己飞机的绑定击碰撞检测

首先将load方法中开启碰撞检测

// 碰撞检测
cc.director.getCollisionManager().enabled = true;

将手指移动飞机

start() {// touch inputthis.node.on(cc.Node.EventType.TOUCH_START, this.onTouchBegan, this);this.node.on(cc.Node.EventType.TOUCH_END, this.onTouchEnded, this);this.node.on(cc.Node.EventType.TOUCH_CANCEL, this.onTouchEnded, this);this.node.on(cc.Node.EventType.TOUCH_MOVE, this.onTouchMove, this);}// touch事件onTouchBegan(event) {if (this.isSelected == true) {return;}let position = event.getLocation();this.isSelected = true;this.touchStartX = position.x;this.touchStartY = position.y;}onTouchEnded() {this.isSelected = false;}onTouchMove(e: cc.Event.EventTouch) {let gameStatus = GameStateManager.instance().getGameStatus();if (this.isSelected && (GameConstant.GameStatus.BOSSBOOMFINISH != gameStatus)) {let position = e.getLocation();let moveX = position.x;let moveY = position.y;let disX = (moveX - this.touchStartX);let disY = (moveY - this.touchStartY);this.updateNodeX(disX, disY);this.touchStartX = position.x;this.touchStartY = position.y;}}// 更新位置updateNodeX(distanceX, distanceY) {this.playerRoot.x += distanceX;if (this.playerRoot.x < -this.canvasWidth / 2) {this.playerRoot.x = -this.canvasWidth / 2;}if (this.playerRoot.x > this.canvasWidth / 2) {this.playerRoot.x = this.canvasWidth / 2;}this.playerRoot.y += distanceY;if (this.playerRoot.y < -this.canvasHeight / 2) {this.playerRoot.y = -this.canvasHeight / 2;}if (this.playerRoot.y > this.canvasHeight / 2) {this.playerRoot.y = this.canvasHeight / 2;}this.playerBulletRoot.x = this.playerRoot.x;this.playerBulletRoot.y = this.playerRoot.y + 50;}

玩家飞机的碰撞，当碰撞到不同的敌机就会出现血量减少的

onCollisionEnter(other, self) {if (this.isDead == true) {return;}let deltax = 0;if (other.tag == 999) {// 撞击到敌机BOSS// dead，游戏结束，跳转到结果页面this.isDead = true;this.showPlaneBoom();return;}if (other.tag == 888) {// 获得金币，每个金币50分this.updateScore();}if (other.tag == 911) {// 获得血量this.updateBlood();}if (other.tag == 100 || other.tag == 914) {// 默认子弹 -1// 减去血量this.bloodNumber -= 1;deltax = 1;} else if (other.tag == 101 || other.tag == 102) {// boss大炮弹 -5this.bloodNumber -= 5;deltax = 5;} else if ((other.tag == 90 || other.tag == 91)) {// 敌机 -2this.bloodNumber -= 2;deltax = 2;}if (this.bloodNumber <= 0) {// dead，游戏结束，跳转到结果页面this.isDead = true;this.showPlaneBoom();}if (this.bloodNumber < 0) {this.bloodNumber = 0;}this.updateBloodUI(deltax);}

// 血量控制参考
https://blog.csdn.net/gloryFlow/article/details/130898462

3.2 实现当前飞机发射子弹的效果

当前子弹发射会有角度设置，代码如下

import EnemyPlane from "./EnemyPlane";const {ccclass, property} = cc._decorator;// 直线的Bullet类型
@ccclass
export default class BulletLiner extends cc.Component {// 角度，默认90@property(Number)rotation: number = 90;// 速度@property(Number)speed: number = 1000;// 时间@property(Number)time: number = 0.0;// 时间点lifeTime: number = 2.5;// LIFE-CYCLE CALLBACKS:// 初始位置originPos: any;canvasWidth: number;canvasHeight: number;isDead: boolean = false;onLoad() {let canvas = cc.find('Canvas');this.canvasWidth = canvas.width;this.canvasHeight = canvas.height;}start () {this.originPos = this.node.position;}update (dt) {this.onMove(dt);}// 移动onMove(dt) {let distance = dt * this.speed;let radian = this.rotation * Math.PI / 180;let v2 = this.node.position; let delta = cc.v2(distance * Math.cos(radian), distance * Math.sin(radian));v2.x += delta.x;v2.y += delta.y;this.node.position = v2;if (v2.y > this.canvasHeight) {this.node.removeFromParent();this.node.destroy();}}onCollisionEnter(other, self) {if ((other.tag != 110 && other.tag != 1111 && other.tag != 9911 && other.tag != 911 && other.tag != 888) && !this.isDead) {this.die();}}die() {this.isDead = true;this.node.removeFromParent();this.destroy();}
}

3.4 敌机的移动击及碰撞检测

import GameStateManager from "./GameStateManager";const { ccclass, property } = cc._decorator;// 敌人飞机
@ccclass
export default class EnemyPlane extends cc.Component {// 角度，默认90@property(Number)rotation: number = 90;// 速度@property(Number)speed: number = 1000;// 时间@property(Number)time: number = 0.0;// 时间点lifeTime: number = 2.5;// LIFE-CYCLE CALLBACKS:// 初始位置originPos: any;canvasWidth: number;canvasHeight: number;@property(cc.Prefab)enemyBoom: cc.Prefab = null;@property(cc.Prefab)enemyBullet: cc.Prefab = null;@property([cc.Prefab])coinPrebs: cc.Prefab[] = [];// 音效资源@property(cc.AudioClip)boomAudio: cc.AudioClip = null;isDead: boolean = false;isBoomAnimating: boolean = false;onLoad() {let canvas = cc.find('Canvas');this.canvasWidth = canvas.width;this.canvasHeight = canvas.height;}start() {this.originPos = this.node.position;this.enemyBulletSchedule();}update(dt) {this.onMove(dt);}// 移动onMove(dt) {// this.time += dt;// if (this.time >= this.lifeTime) {//     this.node.position = this.originPos;//     this.time = 0;// }let distance = dt * this.speed;let radian = this.rotation * Math.PI / 180;let v2 = this.node.position;let delta = cc.v2(distance * Math.cos(radian), distance * Math.sin(radian));v2.x -= delta.x;v2.y -= delta.y;this.node.position = v2;if (v2.y < -this.canvasHeight) {this.node.removeFromParent();this.node.destroy();}}// 动效效果showPlaneBoom() {if (this.isBoomAnimating) {return;}// 调用声音引擎播放声音cc.audioEngine.playEffect(this.boomAudio, false);this.isBoomAnimating = true;// 播放动画let boom;let callFunc = cc.callFunc(function () {this.createCoin();boom = cc.instantiate(this.enemyBoom);this.node.parent.addChild(boom);boom.setPosition(this.node.position);this.node.removeFromParent();let anim = boom.getComponent(cc.Animation);anim.play('enemy_boom');}, this);let aTime = cc.delayTime(0.1);let finish = cc.callFunc(function () {boom.removeFromParent();boom.destroy();this.isBoomAnimating = false;this.removeFromParent();this.destroy();}, this);// 创建一个缓动var tween = cc.tween()// 按顺序执行动作.sequence(callFunc, aTime, finish);cc.tween(this.node).then(tween).start();}onCollisionEnter(other, self) {if ((other.tag == 110 || other.tag == 1111) && !this.isDead) {this.die();}}die() {this.isDead = true;this.showPlaneBoom();this.updateScore();}// 更新得分updateScore() {// 每个敌机得分为10GameStateManager.instance().updateScore(10);}// 创建金币 每个金币10分createCoin() {let delta = 50;for (let index = 0; index < this.coinPrebs.length; index++) {let coin = cc.instantiate(this.coinPrebs[index]);this.node.parent.addChild(coin);coin.setPosition(this.node.position);coin.x = this.node.x + Math.random() * delta;coin.y = this.node.y;}}// 倒计时enemyBulletSchedule() {this.schedule(this.onCreateEnemyBullet, 1.5);}onCreateEnemyBullet() {let bullet = cc.instantiate(this.enemyBullet);this.node.parent.addChild(bullet);bullet.setPosition(this.node.position);bullet.x = this.node.x;bullet.y = this.node.y;}stopSchedule() {this.unschedule(this.onCreateEnemyBullet);}protected onDestroy(): void {this.stopSchedule();}
}

3.5 敌机BOSS

敌机BOSS有血量

当前敌机BOSS只要血量为0时候就是击败了该BOSS

// Learn TypeScript:
//  - https://docs.cocos.com/creator/2.4/manual/en/scripting/typescript.html
// Learn Attribute:
//  - https://docs.cocos.com/creator/2.4/manual/en/scripting/reference/attributes.html
// Learn life-cycle callbacks:
//  - https://docs.cocos.com/creator/2.4/manual/en/scripting/life-cycle-callbacks.htmlimport EnemyBossBoom from "./EnemyBossBoom";
import GameConstant from "./GameConstant";
import GameStateManager from "./GameStateManager";const {ccclass, property} = cc._decorator;@ccclass
export default class EnemyBossPlane extends cc.Component {@property(cc.Prefab)bloodBarPreb: cc.Prefab = null;// boss爆炸效果@property(cc.Prefab)bossBoomPreb: cc.Prefab = null;// 血量@property(Number)bloodCount: number = 100;@property(Number)bloodNumber: number = 100;// LIFE-CYCLE CALLBACKS:bloodBar: cc.ProgressBar = null;isDead: boolean = false;onLoad () {// 不同等级boss的血量不同// this.bloodNumber = 100;// this.bloodCount = 100;let blood = cc.instantiate(this.bloodBarPreb);blood.y = 100;blood.x = 0;this.node.addChild(blood);this.bloodBar = blood.getComponent(cc.ProgressBar);this.bloodBar.progress = 1.0;this.bloodBar.getComponentInChildren(cc.Label).string = ""+this.bloodNumber;}start () {this.bloodBar.getComponentInChildren(cc.Label).string = ""+this.bloodNumber;}update (dt) {}// 更新血量updateBloodCount(aBloodCount) {this.bloodNumber = aBloodCount;this.bloodCount = aBloodCount;}onCollisionEnter(other, self) {if (this.isDead == true) {return;}let deltax = 0;if (other.tag == 110) {// 默认子弹 -1// 减去血量this.bloodNumber -= 1;deltax = 1;} if (this.bloodNumber <= 0) {// dead，游戏结束，跳转到结果页面this.isDead = true;this.startBossBoom();}if (this.bloodNumber < 0) {this.bloodNumber = 0;}this.bloodBar.getComponentInChildren(cc.Label).string = ""+this.bloodNumber;let progress = this.bloodNumber/this.bloodCount;let totalLength = this.bloodBar.totalLength;this.bloodBar.getComponentInChildren(cc.Label).node.x -= deltax*(totalLength/this.bloodCount);this.bloodBar.progress = progress;}// boss爆炸了startBossBoom() {GameStateManager.instance().updateGameStatus(GameConstant.GameStatus.BOSSDISMISSING);let bossBoom = cc.instantiate(this.bossBoomPreb);bossBoom.y = 0;bossBoom.x = 0;this.node.addChild(bossBoom);bossBoom.getComponent(EnemyBossBoom).setBossBoomFinished(()=>{this.updateScore();this.bossBoomFinish();});bossBoom.getComponent(EnemyBossBoom).startPlayAnimation();}// 爆炸效果结束了bossBoomFinish() {this.node.removeAllChildren();this.node.removeFromParent();this.node.destroy();// 通知移除全部子弹、敌机飞机、暂停玩家飞机发射子弹后，GameStateManager.instance().updateIsWin(true);// 玩家飞机向上飞行后提示通关，继续创下一关GameStateManager.instance().updateGameStatus(GameConstant.GameStatus.BOSSBOOMFINISH);}// 更新得分updateScore() {// 每个BOSS得分为血量GameStateManager.instance().updateScore(this.bloodCount);}
}

3.6 敌机BOSS来回移动并且发射导弹

// 左右移动moveLeftRight() {// 让节点左右来回移动并一直重复var seq = cc.repeatForever(cc.sequence(cc.moveTo(5, cc.v2(-this.canvasWidth / 2, this.node.y)),cc.moveTo(5, cc.v2(this.canvasWidth / 2, this.node.y))));this.node.runAction(seq);}

// 每次创建一波Boss子弹startCreateBossBullet() {var time = 0.5;this.schedule(this.onCreateBossBullet, time);}onCreateBossBullet() {var bullet = cc.instantiate(this.getBossBullet());this.node.parent.addChild(bullet);var x = this.node.x;var y = this.node.y - this.node.height + bullet.height;bullet.setPosition(cc.v2(x, y));}stopSchedule() {this.unschedule(this.onCreateDBullet);this.unschedule(this.onCreateBossBullet);}onDestroy() {this.stopSchedule();}

四、最后可以扫码看下效果。

搜索微信小游戏：战击长空

五、下载地址

https://gitee.com/baibaime/plane-war.git

Cocos creator实现飞机大战空中大战《战击长空》小游戏资源及代码相关推荐

Cocos creator实现《滑雪趣挑战》滑雪小游戏资源及代码
Cocos creator实现<滑雪趣挑战>滑雪小游戏资源及代码最近在学习Cocos Creator,作为新手,刚刚开始学习Cocos Creator,上线了两个微信小游戏,刚刚入门,这 ...
用cocos creator实现像素风格的微信跳一跳小游戏。
用cocos creator实现像素风格的微信跳一跳小游戏. 微信扫描下方小程序码免费获取另外需要其他游戏源码的加博主微信,博主给你找,加了微信拉你进专业游戏开发交流群
Cocos creator小游戏实现套牛小游戏资源及代码
Cocos creator实现套牛小游戏资源及代码一安装CocosDashBoard 二新建2D项目RunCow 1.管理项目目录 2.搭建界面三上线微信小游戏 1.上线微信小游戏 2.Co ...
cocos creator 安卓原生平台环境_竞技对抗小游戏单挑篮球开发历程 | Cocos技术派第12期...
本文来自于"Cocos 荣耀讲师"征稿活动第1期,最先发表于 Cocos 中文社区,作者 ID:蟹老板,2017年加入社区,文章作品包括<猎头专家的开发历程>等. Co ...
Cocos creator（JavaScript）- 简单实现连线小游戏
步骤效果实现思路效果实现思路 * 游戏结束标志:所有灯被点亮,即所有灯均连接到电源.* * 第一步: 创建好整个棋盘(叫着比较方便,懒得起名字了)中的数据;* 第二步: 清空已通线路,查找所有 ...
Cocos Creator 3D v1.0.2 正式发布，新增小游戏平台支持
Hi,各位开发者,Cocos Creator 3D 为大家带来翘首以待的新平台和新功能支持,v1.0.2 已正式发布,欢迎大家移步官网下载使用! 升级之前请根据项目情况进行必要的技术评估和版本备份噢 ...
如何用Cocos Creator做一个胶体（果冻效果）小游戏（四）+测试收尾
一.游戏测试测试环节是检测游戏,发现游戏缺陷的一个必不可少的环节.通过进行游戏测试能够不断发现游戏存在的问题以及可能出现的问题,寻找有效可行的解决方案,不断改进,提升游戏的质量,让游戏趋于完善. 一 ...
cocos creator做一个儿童数字答题的微信小游戏（1）
接了个外包要做个数字答题的微信小游戏给小学生玩的准备大概15天完成吧,每天抽点一两个小时做一下今天第一天先做主界面,先用cocos creator拼一个主界面出来下面的每个按钮都是一个butt ...
cocos creator对接字节跳动（抖音）小游戏激励视频广告注意事项（审核不通过，次数不一致和重复获得奖励等）
首先是官方文档里的对接方式:(https://developer.open-douyin.com/docs/resource/zh-CN/mini-app/develop/api/open-inter ...

Cocos creator实现飞机大战空中大战《战击长空》小游戏资源及代码

一安装CocosDashBoard

二新建2D项目FlyWar

三、关键步骤

3.1 实现背景的移动代码

3.2 实现自己飞机的绑定击碰撞检测

3.2 实现当前飞机发射子弹的效果

3.4 敌机的移动击及碰撞检测

3.5 敌机BOSS

3.6 敌机BOSS来回移动并且发射导弹

四、最后可以扫码看下效果。

五、下载地址

Cocos creator实现飞机大战空中大战《战击长空》小游戏资源及代码相关推荐

最新文章

热门文章

Cocos creator实现飞机大战空中大战《战击长空》小游戏资源及代码

一 安装CocosDashBoard

二 新建2D项目FlyWar

三、关键步骤

3.1 实现背景的移动代码

3.2 实现自己飞机的绑定击碰撞检测

3.2 实现当前飞机发射子弹的效果

3.4 敌机的移动击及碰撞检测

3.5 敌机BOSS

3.6 敌机BOSS来回移动并且发射导弹

四、最后可以扫码看下效果。

五、下载地址

Cocos creator实现飞机大战空中大战《战击长空》小游戏资源及代码相关推荐

最新文章

热门文章

一安装CocosDashBoard

二新建2D项目FlyWar