CocosCreator零基础制作游戏《极限跳跃》四、添加游戏主场景控制脚本

前面简单的实现了主界面的UI设置，现在我们开始制作游戏的控制脚本。

在资源管理器的Script文件夹中，点击右键新建javascript文件，命名为GAME。

双击打开GAME脚本，在properties: 中添加属性代码。

//GAME.js

cc.Class({
    extends: cc.Component,
    properties: {
    
    // player 节点，用于获取主角弹跳的高度，和控制主角行动开关
        player: {
            default: null,
            type: cc.Node
        },
        // bgsprite1 节点，用于背景移动
        bgsprite1: {
            default: null,
            type: cc.Node
        },
        // bgsprite2 节点，用于背景移动
        bgsprite2: {
            default: null,
            type: cc.Node
        },
        // score label 的引用
        scoreDisplay: {
            default: null,
            type: cc.Label
        },
      },

保存好后，我们双击MainScene打开场景，点击Canvas，在右侧的属性检查器最底部，点击［添加组件］＝》［添加用户脚本组件］然后选择我们刚刚创建的脚本GAME.js。

添加好后就可以在属性检查器看到我们的属性组件来，然后我们把场景里的节点拖进对应的属性框即可实现节点绑定。不懂得可以多看看官方文档。

这样我门就可以在GAME脚本里来操作节点了。

二、创建HeroPlayer脚本用来操作玩家主角

//HeroPlayer.js

cc.Class({
    extends: cc.Component,
    properties: {
        //主角跳跃高度
        jumpHeight: 0,
        //主角跳跃持续时间
        jumpTimes: 0,
        //掉落速度
        maxMoveSpeed: 0,
    },
    //跳跃
    setJumpUpAction: function(){
        // 跳跃上升
        var jumpUp = cc.moveBy(this.jumpTimes, cc.p(0, this.jumpHeight));
        //jumpUp.reverse();
        return jumpUp;
    },
    //掉落
    setJumpDownAction: function(){
        //下落
        var jumpDown = cc.moveBy(this.jumpTimes, cc.p(0, - this.maxMoveSpeed));
        return jumpDown;
    },
    setJumpRunAction: function(){
        // 初始化跳跃动作
        this.jumpAction = this.setJumpUpAction();
        //掉落动作
        this.maxMoveSpeed = this.setJumpDownAction();
        //包装动作
        var seq = cc.sequence(this.jumpAction,this.maxMoveSpeed);
        this.node.runAction(seq);
    },
    //玩家不操作时，角色进行下坠
    heroDownMove: function(){
        //下落
        var heroDown = cc.moveBy(0.8, cc.p(0, - 5));
        return heroDown;
    },
    // use this for initialization
    onLoad: function () {
       
        this.setJumpRunAction();
        
    },

    // called every frame, uncomment this function to activate update callback
    update: function (dt) {
        this.node.runAction(this.heroDownMove());//精灵移动
    }
    
    
});

角色有2种状态，一种是玩家点击屏幕会实现角色的跳跃，第二种就是角色会受到引力会自动下落。我们在update来实现自动下落。添加好方法后，我门在层级管理器中点击hero节点。然后在右侧属性检查器中绑定脚本。

我门可以在里面初始化值。跳跃高度值，跳跃持续时间，掉落速度等。

脚本里主要实现了跳跃动作，掉落动作等。

然后回到我们的游戏主脚本也就是GAME脚本。添加触摸事件监听，实现监听触摸来调用主角的跳跃动作。

首先在顶部添加脚本引用，然后创建事件监听的方法。

//GAME.js
var HeroPlayer = require("HeroPlayer");
//－－－－－
//事件监听
    setEventControl: function(){
            var self = this;
        var hero = self.player.getComponent(HeroPlayer);//角色绑定控件
     
       cc.eventManager.addListener({
            event: cc.EventListener.TOUCH_ONE_BY_ONE,
            swallowTouches: true,
              // 设置是否吞没事件，在 onTouchBegan 方法返回 true 时吞没
            onTouchBegan: function (touch, event) {
                    //实现 onTouchBegan 事件回调函数
                var target = event.getCurrentTarget();
                    // 获取事件所绑定的 target
                
             var locationInNode = target.convertToNodeSpace(touch.getLocation());
             cc.log("当前点击坐标"+locationInNode);
                
                hero.node.runAction(hero.setJumpUpAction());//精灵移动
                //cc.log("跳跃：－－－－－－－－");
                
                
                
                return true;
            },
            onTouchMoved: function (touch, event) {            // 触摸移动时触发
                
            },
            onTouchEnded: function (touch, event) {            // 点击事件结束处理
               
                //  cc.log("跳跃后角色坐标：" + self.player.getPosition() );
            }
        
        }, self.node)
    },

然后在onload方法实现初始化调用。

 onLoad: function () {
        //触摸监听
        this.setEventControl();
        // 初始化计分
        this.score = 0;
        
    },

我们可以来运行下，看下效果。

搜索