内容纲要

世界上最难的游戏

1.游戏介绍

  • 介绍:世界上最难的游戏!什么?你不相信?那你来试试,恐怕第一关你都过不了吧!方向键移动红色方块到另外的绿色区域内就可以,简单吧,明了吧,可你就是过不去,干气猴!
    世界上最难的游戏插图

2.搭建开始界面

  • 打开cocos creator,新建文件夹,名为sjszdyx。
  • 单击assets文件夹,右键新建文件夹,重命名为Texture,将图片资源拖入。
  • 单击assets文件夹,右键新建文件夹,重命名为Scenes,单击Scenes文件夹,右键单击新建Scene,重命名为start。
  • 将“2018-12-07_102313”拖入Canvas,按F2改名为bg,大小设置为660,440。
    世界上最难的游戏插图(1)
  • 将“未标题-1”、“主界面”、“logo”拖入Canvas,用缩放工具调到合适大小。
    世界上最难的游戏插图(2)
    世界上最难的游戏插图(3)
    世界上最难的游戏插图(4)
  • 创建按钮
    • 选择层级管理器的Canvas,右键新建创建节点→创建UI节点→BUTTON,名为begin,选中Label,将string框中改为“开始游戏”。
      世界上最难的游戏插图(5)
    • 选择层级管理器的Canvas,右键新建创建节点→创建UI节点→BUTTON,名为load,选中Label,将string框中改为“游戏说明”。
      世界上最难的游戏插图(6)
  • 新建js脚本
    • 单击assets文件夹,右键新建文件夹,重命名为Scripts,单击Scripts文件夹,右键单击新建java script,重命名为startScene。
    • 双击startScene打开,
        properties: {
        begin: {
            type: cc.Node,
            default: null,
        },
    },
    onLoad() {
        this.begin.on('touchstart', function (event) {
            cc.director.loadScene('LV1');
        }, this);
    },
  • 单击begin,在属性管理器中设置。
    世界上最难的游戏插图(7)

    • 新建java script,重命名为load,双击打开
    properties: {
        load: {
            type: cc.Node,
            default: null,
        },
    },
    onLoad () {
        this.load.on('touchstart', function (event) {
            cc.director.loadScene('introduce');
        }, this);
    },
  • 单击load,在属性管理器中设置
    世界上最难的游戏插图(8)
  • 保存场景。

3.搭建游戏介绍场景

  • 创建游戏场景introduce
  • 将“2018-12-07_102313”拖入Canvas,按F2改名为bg,大小设置为660,440.
  • 将“未标题-1”拖入Canvas,重命名为fg,用缩放工具调到合适大小。
    世界上最难的游戏插图(9)
  • 右键新建节点→创建渲染节点→创建Lable节点,位置设为(0,170),Lable的string文本框内容为游戏介绍。
  • 右键新建节点→创建渲染节点→创建Lable节点,位置设为(0,-50),Lable的string文本框内容为按↑、↓、←、→移动,按开始游戏进入游戏
  • 点击Canvas创建UI节点→BUTTON,将Label的string文本框内容改为“返回”。
  • 新建脚本back
toScene:function(){
        cc.director.loadScene("start");
    },

将脚本back拖入按钮
世界上最难的游戏插图(10)

4.场景LV1搭建

  • 将“2018-12-06_113647”拖入层级管理器,重命名为bg,缩放都为1.71倍;将“lv1”拖入层级管理器,重命名为fg,缩放都为1.45倍。
  • 将blueball拖入层级管理器,重命名为lv1bb01,点击动画编辑器
    世界上最难的游戏插图(11)
  • 同理创建lv1bb02-lv1bb06.
  • 单击Canvas,右键创建空节点walk,选中walk右键新建空节点walk1,选中walk1,在属性检查器添加组件→物理→Collider→box
    世界上最难的游戏插图(12)
    按创建walk1的方法继续创建walk包围住游戏地图
  • 新建UI节点→Button,重命名为menu,将脚本back拖到menu上
    世界上最难的游戏插图(13)
  • 将selfarea拖到Canvas下,重命名为start。
    世界上最难的游戏插图(14)
  • 选中start节点,按Ctrl+D,复制一个start节点,重命名为tolv2
    世界上最难的游戏插图(15)
  • 在tolv2节点添加RigidBody组件和PhysicsBoxCollider组件
    世界上最难的游戏插图(16)
  • 将player图片拖入Canvas,在Script新建JS文件player,双击打开。
properties: {
        //移动方向,0=不移动,1=左,2=右,3=上,4=下
        dir: 0,
        moveSpeedX: 0,
        moveSpeedY: 0,
    },
keyDown(event) {
        var rb = this.getComponent(cc.RigidBody);

        switch (event.keyCode) {
            case cc.macro.KEY.left:
                this.dir = 1;
                break;
            case cc.macro.KEY.right:
                this.dir = 2;
                break;
            case cc.macro.KEY.up:
                this.dir = 3;
                break;
            case cc.macro.KEY.down:
                this.dir = 4;
                break;
        }
    },

    keyUp(event) {
        switch (event.keyCode) {
            case cc.macro.KEY.left:
                this.dir = 0;
                break;
            case cc.macro.KEY.right:
                this.dir = 0;
                break;
            case cc.macro.KEY.up:
                this.dir = 0;
                break;
            case cc.macro.KEY.down:
                this.dir = 0;
                break;
        }
    },
onLoad() {
        //物理碰撞开启
        cc.director.getPhysicsManager().enabled = true;

        // cc.director.getPhysicsManager().debugDrawFlags = cc.PhysicsManager.DrawBits.e_aabbBit |
        //     cc.PhysicsManager.DrawBits.e_pairBit |
        //     cc.PhysicsManager.DrawBits.e_centerOfMassBit |
        //     cc.PhysicsManager.DrawBits.e_jointBit |
        //     cc.PhysicsManager.DrawBits.e_shapeBit;

        //初始化键盘监听
        cc.systemEvent.on(cc.SystemEvent.EventType.KEY_DOWN, this.keyDown, this);
        cc.systemEvent.on(cc.SystemEvent.EventType.KEY_UP, this.keyUp, this);
    },

    onBeginContact(contact, selfCollider, otherCollider) {
        switch (otherCollider.node.name) {
            case 'lv1bb01':
                cc.director.loadScene('LV1');
                break;
            case 'lv1bb02':
                cc.director.loadScene('LV1');
                break;
            case 'lv1bb03':
                cc.director.loadScene('LV1');
                break;
            case 'lv1bb04':
                cc.director.loadScene('LV1');
                break;
            case 'lv1bb05':
                cc.director.loadScene('LV1');
                break;
            case 'lv1bb06':
                cc.director.loadScene('LV1');
                break;
        }
    },
update(dt) {
        if (this.dir == 1) {
            this.node.x -= this.moveSpeedX * dt;
        } else if (this.dir == 2) {
            this.node.x += this.moveSpeedX * dt;
        } else if (this.dir == 3) {
            this.node.y += this.moveSpeedY * dt;
        } else if (this.dir == 4) {
            this.node.y -= this.moveSpeedY * dt;
        }
    },
  • 在player节点下新建空节点gold,制作金币预制体
    世界上最难的游戏插图(17) 世界上最难的游戏插图(18)
  • 新建gold脚本和window脚本
window脚本
    module.exports = {
    gold: 0,
}
gold脚本
    var wi = require('window');

    properties: {
        gold: {
            type: cc.Prefab,
            default: [],
        },
        Score:0,
    },
    onLoad() {
        for (let i = 0; i < this.gold.length; i++) {
            if (wi.gold == 2) {
                var go = cc.instantiate(this.gold[0]);
                var go1 = cc.instantiate(this.gold[1]);
                var go2 = cc.instantiate(this.gold[2]);

                this.node.addChild(go);
                this.node.addChild(go1);
                this.node.addChild(go2);
            }
            if (wi.gold == 1) {
                var go = cc.instantiate(this.gold[0]);
                var go1 = cc.instantiate(this.gold[1]);
                this.node.addChild(go);
                this.node.addChild(go1);
            }
        }
    },
    onBeginContact(contact, selfCollider, otherCollider) {
        if (otherCollider.node.name == 'player') {
            this.Score+=1;
            this.node.destroy();
        }
    },
打开player脚本
properties: {
……
        gold: {
            type: cc.Node,
            default: null,
        },
    },
    onBeginContact(contact, selfCollider, otherCollider) {
        switch (otherCollider.node.name) {
            ……
            case 'tolv2':
                this.nextSound();
                cc.director.loadScene('LV2');
                wi.gold = 1;
                break;
        }
    },
  • 添加音效
打开player脚本
properties: {
……
        attackAudio: {
            type: cc.AudioClip,
            default: null,
        },
        dingAudio: {
            type: cc.AudioClip,
            default: null,
        },
        nextAudio: {
            type: cc.AudioClip,
            default: null,
        },
        gameclearAudio: {
            type: cc.AudioClip,
            default: null,
        },
    },
attackSound() {
        cc.audioEngine.playEffect(this.attackAudio, false);
    },
    dingSound() {
        cc.audioEngine.playEffect(this.dingAudio, false);
    },
    nextSound() {
        cc.audioEngine.playEffect(this.nextAudio, false);
    },
    gameclearSound() {
        cc.audioEngine.playEffect(this.gameclearAudio, false);
    },
onBeginContact(contact, selfCollider, otherCollider) {
        switch (otherCollider.node.name) {
            case 'lv1bb01':
                this.attackSound();
                cc.director.loadScene('LV1');
                break;
            case 'lv1bb02':
                this.attackSound();
                cc.director.loadScene('LV1');
                break;
            case 'lv1bb03':
                this.attackSound();
                cc.director.loadScene('LV1');
                break;
            case 'lv1bb04':
                this.attackSound();
                cc.director.loadScene('LV1');
                break;
            case 'lv1bb05':
                this.attackSound();
                cc.director.loadScene('LV1');
                break;
            case 'lv2bb06':
                this.attackSound();
                cc.director.loadScene('LV2');
                break;
            case 'tolv2':
                this.nextSound();
                cc.director.loadScene('LV2');
                wi.gold = 1;
                break;
        }
    },
打开gold脚本
    properties: {
        ……
        dingAudio:{
            type:cc.AudioClip,
            default:null,
        },
    },
    dingSound() {
        cc.audioEngine.playEffect(this.dingAudio, false);
    },
    onBeginContact(contact, selfCollider, otherCollider) {
        if (otherCollider.node.name == 'player') {
            ……
            this.dingSound();
            ……
        }
    },
打开startScene脚本
properties: {
        ……
        bgmAudio: {
            type: cc.AudioClip,
            default: null,
        },
    },
    bgmSound() {
        cc.audioEngine.playMusic(this.bgmAudio, false);
    },
    onLoad() {
        this.bgmSound();
        this.begin.on('touchstart', function (event) {
            cc.director.loadScene('LV1');
            wi.gold = 2;
        }, this);
    },
  • 选中player节点,将相应资源拖入属性管理器
    世界上最难的游戏插图(19)

5.场景LV2搭建

  • 将“2018-12-06_113647”拖入层级管理器,重命名为bg,缩放都为1.71倍;将“lv1”拖入层级管理器,重命名为fg,缩放都为1.45倍。
  • 将“lv2”拖入层级管理器,缩放都为1.06倍;
    世界上最难的游戏插图(20)
  • 将selfarea拖到Canvas下,重命名为start。
    世界上最难的游戏插图(21)
  • 选中start节点,按Ctrl+D,复制一个start节点,重命名为end
    世界上最难的游戏插图(22)
  • 给end添加rigidbody组件和physicsBoxCollider组件。
    世界上最难的游戏插图(23)
  • 单击Canvas,右键创建空节点walk,选中walk右键新建空节点walk1,选中walk1,在属性检查器添加组件→物理→Collider→box
    世界上最难的游戏插图(24)
    按创建walk1的方法继续创建walk包围住游戏地图
  • 新建空节点ball,将blueball拖入层级管理器,重命名为lv2bb01,点击动画编辑器
    世界上最难的游戏插图(25)
  • 按同样的方法创建lv2bb02、lv2bb03、lv2bb04。
  • 新建UI节点→Button,重命名为menu,将脚本back拖到menu上
    世界上最难的游戏插图(13)
  • 将player图片拖入Canvas,在player节点下新建空节点gold,制作金币预制体
    世界上最难的游戏插图(27)
  • 打开player脚本
onBeginContact(contact, selfCollider, otherCollider) {
        switch (otherCollider.node.name) {
                ……
                case 'end':
                this.gameclearSound();
                cc.director.loadScene('GameOver');
                break;
        }
    },

发表评论