CocosCreator项目学习系列<一>摘星星的坑爹小游戏

来源：互联网发布：网络神曲爱情编辑：程序博客网时间：2024/05/16 15:50

CocosCreator项目学习系列<一>摘星星的坑爹小游戏<8/12/2017>

博主因老项目原因无奈学习CocosCreator引擎,,CocosCreator这个严重抄袭Unity的引擎,让人头皮发麻!学这个引擎并不是目的,目的是了解并掌握JavaScript这一脚本语言,好吧!起码公司付钱开工资给你学习,机会得好好珍惜,下面是基础项目演示:

<一>.先上游戏实际效果:

<二>.层级管理器和资源管理器:(抄的一模一样)

层级视图对象的Inspector,啊呀说错了,是属性管理器分别如下:

<三>.老规矩,上齐所有脚本:(不得不说VSCode还是很好用的!Cocos最大的优点就是中文文档教程写的非常到位)

Game.js

cc.Class({    extends: cc.Component,    properties: {        // 这个属性引用了星星预制资源        starPrefab: {            default: null,            type: cc.Prefab        },        // 星星产生后消失时间的随机范围        maxStarDuration: 0,        minStarDuration: 0,        // 地面节点，用于确定星星生成的高度        ground: {            default: null,            type: cc.Node        },        // player 节点，用于获取主角弹跳的高度，和控制主角行动开关        player: {            default: null,            type: cc.Node        },        // score label 的引用        scoreDisplay: {            default: null,            type: cc.Label        },        // 得分音效资源        scoreAudio: {            default: null,            url: cc.AudioClip        }    },    // use this for initialization    onLoad: function () {        // 获取地平面的 y 轴坐标        this.groundY = this.ground.y + this.ground.height/2;        // 初始化计时器        this.timer = 0;        this.starDuration = 0;        // 生成一个新的星星        this.spawnNewStar();        // 初始化计分        this.score = 0;    },    spawnNewStar: function() {        // 使用给定的模板在场景中生成一个新节点        var newStar = cc.instantiate(this.starPrefab);        // 将新增的节点添加到 Canvas 节点下面        this.node.addChild(newStar);        // 为星星设置一个随机位置        newStar.setPosition(this.getNewStarPosition());        // 将 Game 组件的实例传入星星组件        newStar.getComponent('Star').game = this;        // 重置计时器        this.starDuration = this.minStarDuration + cc.random0To1() * (this.maxStarDuration - this.minStarDuration);        this.timer = 0;    },    getNewStarPosition: function () {        var randX = 0;        // 根据地平面位置和主角跳跃高度，随机得到一个星星的 y 坐标        var randY = this.groundY + cc.random0To1() * this.player.getComponent('Player').jumpHeight + 50;        // 根据屏幕宽度，随机得到一个星星 x 坐标        var maxX = this.node.width/2;        randX = cc.randomMinus1To1() * maxX;        // 返回星星坐标        return cc.p(randX, randY);    },    // called every frame    update: function (dt) {        // 每帧更新计时器，超过限度还没有生成新的星星        // 就会调用游戏失败逻辑        if (this.timer > this.starDuration) {            this.gameOver();            return;        }        this.timer += dt;    },    gainScore: function () {        this.score += 1;        // 更新 scoreDisplay Label 的文字        this.scoreDisplay.string = 'Score: ' + this.score.toString();        // 播放得分音效        cc.audioEngine.playEffect(this.scoreAudio, false);    },    gameOver: function () {        this.player.stopAllActions(); //停止 player 节点的跳跃动作        cc.director.loadScene('game');    }});

Player.js

cc.Class({    extends: cc.Component,    properties: {        // 主角跳跃高度        jumpHeight: 0,        // 主角跳跃持续时间        jumpDuration: 0,        // 最大移动速度        maxMoveSpeed: 0,        // 加速度        accel: 0,        // 跳跃音效资源        jumpAudio: {            default: null,            url: cc.AudioClip        },    },    setJumpAction: function () {        // 跳跃上升        var jumpUp = cc.moveBy(this.jumpDuration, cc.p(0, this.jumpHeight)).easing(cc.easeCubicActionOut());        // 下落        var jumpDown = cc.moveBy(this.jumpDuration, cc.p(0, -this.jumpHeight)).easing(cc.easeCubicActionIn());        // 添加一个回调函数，用于在动作结束时调用我们定义的其他方法        var callback = cc.callFunc(this.playJumpSound, this);        // 不断重复，而且每次完成落地动作后调用回调来播放声音        return cc.repeatForever(cc.sequence(jumpUp, jumpDown, callback));    },    playJumpSound: function () {        // 调用声音引擎播放声音        cc.audioEngine.playEffect(this.jumpAudio, false);    },    setInputControl: function () {        var self = this;        //add keyboard input listener to jump, turnLeft and turnRight        cc.eventManager.addListener({            event: cc.EventListener.KEYBOARD,            // set a flag when key pressed            onKeyPressed: function(keyCode, event) {                switch(keyCode) {                    case cc.KEY.a:                        self.accLeft = true;                        self.accRight = false;                        break;                    case cc.KEY.d:                        self.accLeft = false;                        self.accRight = true;                        break;                }            },            // unset a flag when key released            onKeyReleased: function(keyCode, event) {                switch(keyCode) {                    case cc.KEY.a:                        self.accLeft = false;                        break;                    case cc.KEY.d:                        self.accRight = false;                        break;                }            }        }, self.node);    },    // use this for initialization    onLoad: function () {        // 初始化跳跃动作        this.jumpAction = this.setJumpAction();        this.node.runAction(this.jumpAction);        // 加速度方向开关        this.accLeft = false;        this.accRight = false;        // 主角当前水平方向速度        this.xSpeed = 0;        // 初始化键盘输入监听        this.setInputControl();    },    // called every frame    update: function (dt) {        // 根据当前加速度方向每帧更新速度        if (this.accLeft) {            this.xSpeed -= this.accel * dt;        } else if (this.accRight) {            this.xSpeed += this.accel * dt;        }        // 限制主角的速度不能超过最大值        if ( Math.abs(this.xSpeed) > this.maxMoveSpeed ) {            // if speed reach limit, use max speed with current direction            this.xSpeed = this.maxMoveSpeed * this.xSpeed / Math.abs(this.xSpeed);        }        // 根据当前速度更新主角的位置        this.node.x += this.xSpeed * dt;    },});

Star.js

cc.Class({    extends: cc.Component,    properties: {        // 星星和主角之间的距离小于这个数值时，就会完成收集        pickRadius: 0,        // 暂存 Game 对象的引用        game: {            default: null,            serializable: false        }    },    // use this for initialization    onLoad: function () {    },    getPlayerDistance: function () {        // 根据 player 节点位置判断距离        var playerPos = this.game.player.getPosition();        // 根据两点位置计算两点之间距离        var dist = cc.pDistance(this.node.position, playerPos);        return dist;    },    onPicked: function() {        // 当星星被收集时，调用 Game 脚本中的接口，生成一个新的星星        this.game.spawnNewStar();        // 调用 Game 脚本的得分方法        this.game.gainScore();        // 然后销毁当前星星节点        this.node.destroy();    },    // called every frame    update: function (dt) {        // 每帧判断和主角之间的距离是否小于收集距离        if (this.getPlayerDistance() < this.pickRadius) {            // 调用收集行为            this.onPicked();            return;        }        // 根据 Game 脚本中的计时器更新星星的透明度        var opacityRatio = 1 - this.game.timer/this.game.starDuration;        var minOpacity = 50;        this.node.opacity = minOpacity + Math.floor(opacityRatio * (255 - minOpacity));    },});

好了,场景一搭建,码好脚本,直接运行就OK了,主要是学习和掌握JavaScript脚本语言!其他的不重要,这引擎没有任何自己的东西

阅读全文

0 0