版本1：屏幕上方随机出现怪物，怪物向下移动；由屏幕底部某处随机方向不断发射能量小球（原力）；小球碰到怪物，怪物减血，小球消失，怪物血光后消失，计分
版本3：屏幕上方随机出现怪物（身大血长行动迟缓，身小血短行动快捷），怪物向下移动；由屏幕底部某处随机方向不断发射能量小球（火焰，冰冻，雷电，原力），小球碰到怪物，怪物减血，小球消失，怪物血光后消失，计分
版本1 效果如下：（引擎版本 cc v1.10.1）
 |
得分： 消灭怪物会增加积分，显示在此处 |
|
怪物： 1场景上方随机位置不断出现的怪物 2怪物自带血条 3血可以设置 |
|
|
子弹： 1 子弹在一定偏移角度内，向上移动 2 遇到怪物后销毁 |
|
|
按钮： 子弹发射初始点 点击可发射子弹 |
场景布置和资源准备
1 分辨率调整 高1920 宽1080：模拟器分辨率（文件->设置->预览运行）；设计分辨率（项目->项目设置->项目预览）；canvas中设计分辨率。
2 层级管理器和场景编辑器对应设置
层级编辑器说明：
bulletGroup:空节点，子弹控制层，脚本 shotmon_bulletGroup
monGroup：空节点，怪物控制层 ，脚本 shotmon_monGroup
lbScore：label,分数显示
banner：空节点，底部UI条
bg：图片，底部UI条背景图
TD1：按钮，点击生成子弹，子弹初始化位置
gameController：空节点，游戏控制，脚本 shotmon_gameController
3 制作 怪物 预制体
3.1 挂脚本：shotmon_mon
3.2 挂碰撞盒
3.3 增加血值显示，分成两部分，bl 背景条 （红色 ），tl血条（黄色）
4 制作 子弹 预制体，挂脚本
脚本
shotmon_gameController
//shotmon_gameController
cc.Class({
extends: cc.Component,
properties:()=>( {
bulletGroup:{
default:null,
type:require('shotmon_bulletGroup'),
},
monGroup:{
default:null,
type:require('shotmon_monGroup'),
},
}),
btn_click_firingPoint(){
this.bulletGroup.spawn();
},
});
shotmon_monGroup
//shotmon_monGroup
var shotmon_monG=cc.Class({
name:'shotmon_monG',
properties:{
name:'', //名字
HP:10,
freqTime:1, //出生频率
score:0,
prefab:cc.Prefab //预制体
}
});
cc.Class({
extends: cc.Component,
properties: {
lbScore:cc.Label,
monG:{
default:[],
type:shotmon_monG
},
},
onLoad () {
for(let ii=0;ii<this.monG.length;++ii){
var freqTime = this.monG[ii].freqTime;
var fname = 'callback' + ii;
this[fname] = function(e){this.initMon(this.monG[e]);}.bind(this,ii);
this.schedule(this[fname],freqTime);
}
},
initMon(monInfo){
var newNode = cc.instantiate(monInfo.prefab);
newNode.getComponent('shotmon_mon').HP = monInfo.HP;
newNode.getComponent('shotmon_mon').score = monInfo.score;
this.node.addChild(newNode);
newNode.setPosition(cc.v2(cc.randomMinus1To1()*200,cc.random0To1()*200+200));
},
shotmon_mon.js
cc.Class({
extends: cc.Component,
properties: {
HP:1,
HPLine:cc.Node,
score:{
default:0,
type:cc.Integer
},
},
onLoad () {
cc.director.getCollisionManager().enabled = true;
this.HPLineW = this.HPLine.width;
this._HP = this.HP;
},
onCollisionEnter(other,self){
var hp = this.HP;
//this.node.active = false;
if(this.HP<=0){
var num = this.node.parent.getComponent('shotmon_monGroup').lbScore.string;
this.node.parent.getComponent('shotmon_monGroup').lbScore.string = parseInt(num) + parseInt(this.score);
this.node.destroy();
}else{
hp = hp -1 ;
}
this.HP = hp ;
this.HPLine.width = this.HPLineW *(hp/this._HP);
},
});shotmon_bulletGroup
var shotmon_bulletG=cc.Class({
name:'shotmon_bulletG',
properties:{
name:'', //子弹名字
freqTime:1, //发射频率
angle:{ //发射角度范围-1~1 => 0~180
default:0,
type:cc.Float,
tooltip:'子弹发射角度:0~1 代表中线偏移值 '
},
prefab:cc.Prefab //子弹预制体
}
});
cc.Class({
extends: cc.Component,
properties:()=>( {
//子弹类型
bulletG:{
default:[],
type:shotmon_bulletG
},
//火力点
firingPoint:{
default:[],
type:cc.Node
},
}),
onLoad () {
// 取到火力点的坐标值
var banner = this.firingPoint[0].parent //获得火力点的父级banner
this.pose = banner.convertToWorldSpaceAR(cc.v2(this.firingPoint[0].x,this.firingPoint[0].y));//以banner锚点为原点坐标系，获得火力点的坐标值
this.poseAR = this.node.convertToNodeSpace(cc.v2(this.pose.x,this.pose.y));//在子弹管理层上，以锚点为原点，取得火力点坐标值的对应值
this.schedule(this.spawn,this.bulletG[0].freqTime);
},
//发射子弹
spawn(){
var nodeO = cc.instantiate(this.bulletG[0].prefab);
nodeO.getComponent('shotmon_bullet').angle = this.bulletG[0].angle*cc.randomMinus1To1();
this.node.addChild(nodeO);
nodeO.setPosition(cc.v2(this.poseAR.x,this.poseAR.y));
},
});
shotmon_bullet
cc.Class({
extends: cc.Component,
properties: {
speedy:100,
speedx:100,
},
onLoad () {
cc.director.getCollisionManager().enabled = true;
},
onCollisionEnter(other,self){
this.node.destroy();
},
update (dt) {
this.node.y += dt*this.speedy;
this.node.x += dt*this.speedx*this.angle;
},
});
转载自原文链接, 如需删除请联系管理员。
原文链接：CocosCreator学习笔记：小游戏练习《小球射怪物》版本1，转载请注明来源！