CocosCreator零基础制作游戏《极限跳跃》四、添加游戏主场景控制脚本
前面简单的实现了主界面的UI设置，现在我们开始制作游戏的控制脚本。
在资源管理器的Script文件夹中，点击右键新建javascript文件，命名为GAME。
双击打开GAME脚本，在properties: 中添加属性代码。
01 |
//GAME.js |
02 |
03 |
cc.Class({ |
04 |
extends: cc.Component,
|
05 |
properties: {
|
06 |
|
07 |
// player 节点，用于获取主角弹跳的高度，和控制主角行动开关
|
08 |
player: {
|
09 |
default: null,
|
10 |
type: cc.Node
|
11 |
},
|
12 |
// bgsprite1 节点，用于背景移动
|
13 |
bgsprite1: {
|
14 |
default: null,
|
15 |
type: cc.Node
|
16 |
},
|
17 |
// bgsprite2 节点，用于背景移动
|
18 |
bgsprite2: {
|
19 |
default: null,
|
20 |
type: cc.Node
|
21 |
},
|
22 |
// score label 的引用
|
23 |
scoreDisplay: {
|
24 |
default: null,
|
25 |
type: cc.Label
|
26 |
},
|
27 |
},
|
保存好后，我们双击MainScene打开场景，点击Canvas，在右侧的属性检查器最底部，点击［添加组件］＝》［添加用户脚本组件］然后选择我们刚刚创建的脚本GAME.js。
添加好后就可以在属性检查器看到我们的属性组件来，然后我们把场景里的节点拖进对应的属性框即可实现节点绑定。不懂得可以多看看官方文档。
这样我门就可以在GAME脚本里来操作节点了。
二、创建HeroPlayer脚本用来操作玩家主角
01 |
//HeroPlayer.js |
02 |
03 |
cc.Class({ |
04 |
extends: cc.Component,
|
05 |
properties: {
|
06 |
//主角跳跃高度
|
07 |
jumpHeight: 0,
|
08 |
//主角跳跃持续时间
|
09 |
jumpTimes: 0,
|
10 |
//掉落速度
|
11 |
maxMoveSpeed: 0,
|
12 |
},
|
13 |
//跳跃
|
14 |
setJumpUpAction: function(){
|
15 |
// 跳跃上升
|
16 |
var jumpUp = cc.moveBy(this.jumpTimes, cc.p(0, this.jumpHeight));
|
17 |
//jumpUp.reverse();
|
18 |
return jumpUp;
|
19 |
},
|
20 |
//掉落
|
21 |
setJumpDownAction: function(){
|
22 |
//下落
|
23 |
var jumpDown = cc.moveBy(this.jumpTimes, cc.p(0, - this.maxMoveSpeed));
|
24 |
return jumpDown;
|
25 |
},
|
26 |
setJumpRunAction: function(){
|
27 |
// 初始化跳跃动作
|
28 |
this.jumpAction = this.setJumpUpAction();
|
29 |
//掉落动作
|
30 |
this.maxMoveSpeed = this.setJumpDownAction();
|
31 |
//包装动作
|
32 |
var seq = cc.sequence(this.jumpAction,this.maxMoveSpeed);
|
33 |
this.node.runAction(seq);
|
34 |
},
|
35 |
//玩家不操作时，角色进行下坠
|
36 |
heroDownMove: function(){
|
37 |
//下落
|
38 |
var heroDown = cc.moveBy(0.8, cc.p(0, - 5));
|
39 |
return heroDown;
|
40 |
},
|
41 |
// use this for initialization
|
42 |
onLoad: function () {
|
43 |
|
44 |
this.setJumpRunAction();
|
45 |
|
46 |
},
|
47 |
48 |
// called every frame, uncomment this function to activate update callback
|
49 |
update: function (dt) {
|
50 |
this.node.runAction(this.heroDownMove());//精灵移动
|
51 |
}
|
52 |
|
53 |
|
54 |
}); |
角色有2种状态，一种是玩家点击屏幕会实现角色的跳跃，第二种就是角色会受到引力会自动下落。我们在update来实现自动下落。添加好方法后，我门在层级管理器中点击hero节点。然后在右侧属性检查器中绑定脚本。
我门可以在里面初始化值。跳跃高度值，跳跃持续时间，掉落速度等。
脚本里主要实现了跳跃动作，掉落动作等。
然后回到我们的游戏主脚本也就是GAME脚本。添加触摸事件监听，实现监听触摸来调用主角的跳跃动作。
首先在顶部添加脚本引用，然后创建事件监听的方法。
01 |
//GAME.js |
02 |
var HeroPlayer = require("HeroPlayer");
|
03 |
//－－－－－ |
04 |
//事件监听 |
05 |
setEventControl: function(){
|
06 |
var self = this;
|
07 |
var hero = self.player.getComponent(HeroPlayer);//角色绑定控件
|
08 |
|
09 |
cc.eventManager.addListener({
|
10 |
event: cc.EventListener.TOUCH_ONE_BY_ONE,
|
11 |
swallowTouches: true,
|
12 |
// 设置是否吞没事件，在 onTouchBegan 方法返回 true 时吞没
|
13 |
onTouchBegan: function (touch, event) {
|
14 |
//实现 onTouchBegan 事件回调函数
|
15 |
var target = event.getCurrentTarget();
|
16 |
// 获取事件所绑定的 target
|
17 |
|
18 |
var locationInNode = target.convertToNodeSpace(touch.getLocation());
|
19 |
cc.log("当前点击坐标"+locationInNode);
|
20 |
|
21 |
hero.node.runAction(hero.setJumpUpAction());//精灵移动
|
22 |
//cc.log("跳跃：－－－－－－－－");
|
23 |
|
24 |
|
25 |
|
26 |
return true;
|
27 |
},
|
28 |
onTouchMoved: function (touch, event) { // 触摸移动时触发
|
29 |
|
30 |
},
|
31 |
onTouchEnded: function (touch, event) { // 点击事件结束处理
|
32 |
|
33 |
// cc.log("跳跃后角色坐标：" + self.player.getPosition() );
|
34 |
}
|
35 |
|
36 |
}, self.node)
|
37 |
},
|
然后在onload方法实现初始化调用。
1 |
onLoad: function () {
|
2 |
//触摸监听
|
3 |
this.setEventControl();
|
4 |
// 初始化计分
|
5 |
this.score = 0;
|
6 |
|
7 |
},
|
我们可以来运行下，看下效果。
原文地址：https://www.byjth.com/jixiantiaoyue/69.html