简单实例：小键盘模拟

最新推荐文章于 2024-05-15 15:47:10 发布

冏尼

最新推荐文章于 2024-05-15 15:47:10 发布

阅读量2k

点赞数

分类专栏： CocosCreator 游戏开发文章标签： js javascript

本文链接：https://blog.csdn.net/qq_45236472/article/details/108630970

版权

CocosCreator 游戏开发专栏收录该内容

3 篇文章 2 订阅

订阅专栏

简单实例：小键盘模拟

开发环境：

CocosCreator v2.3.1

node.js v10.16.0

vscode 1.46.1

文档内容：使用CocosCreator和JavaScript制作一个老少皆宜的（easy）小键盘，用类似的方法可以制作游戏物品栏，日后分享

预览图：

在这里插入图片描述

miniKeyBoard结构解析：

miniKeyBoard ------------ 主节点，绑定脚本miniKeyBoard.js
bg ------------ 背景节点
title ------------ “请输入房间ID”
shield ------------ 屏蔽层，屏蔽点击事件，弹窗式的页面需要注意，防止误触底层按钮
displayLayer ------------ 输入显示层
num0 ------------ 为了方便调整显示效果，将待输入数字拆分为四个节点
num1
num2
num3
buttonLayer ------------ 按键预置将被实例化12次，并添加到此层级。
quit ------------ 退出按钮
label

其中buttonLayer节点添加了Layout组件，选择网格型，且根据子节点大小自动对容器的大小进行缩放

在这里插入图片描述

miniKeyBoard.js

cc.Class({

  extends: cc.Component,



  properties: {



  },



  //消息提示

  popUpTip(input) {

    // let node = cc.instantiate(g_Res.getRes("commonPrefab", "tip"));

    // node.getChildByName("label").getComponent(cc.Label).string = input;

    // this.node.addChild(node);

  },



  //对数字列表进行插入操作

  doInput(num) {

    if (this.list.length < 4) {

      this.list.push(num);

    }

  },



  //对数字列表进行插入操作

  doDeleteInput() {

    if (this.list.length) {

      this.list.pop();

    }

  },



  //更新数字显示

  syncDisplay() {

    for (let i = 0; i < 4; i++) {

      let name = "num" + i;

      let node = this.displayLayer.getChildByName(name);

      node.getComponent(cc.Label).string = i < this.list.length ? this.list[i] : "";

    }

  },



  //初始化

  init() {

    this.list = [];

    let buttonList = [7, 8, 9, 4, 5, 6, 1, 2, 3, 0, "del", "cfm"];

    for (let value of buttonList) {

      let button = cc.instantiate(g_Res.getRes("commonPrefab", "button"));

      this.buttonLayer.addChild(button);

      button.getComponentInChildren(cc.Label).string = value;

      button.on(cc.Node.EventType.TOUCH_END, () => {

        this.onClickButton(value);

      });

    };

    this.quit.on(cc.Node.EventType.TOUCH_END, () => {

      this.doQuit();

    })

  },



  //退出

  doQuit() {

    this.node.destroy();

  },



  //按钮响应回调函数

  onClickButton(value) {

    if (value <= 9) {

      this.doInput(value);

    }

    else if (value == "del") {

      this.doDeleteInput();

    }

    else if (value == "ok") {

      this.doJoinRoom(this.list);

    }

    this.syncDisplay();

  },



  //原项目的服务端通讯部分

  doJoinRoom(list) {

    if (list.length < 4) {    //输入房间号长度不够

      this.popUpTip("请输入完整的房间号");

    }

    else {

      let roomID = list.join("");   //将数组拼接成字符串

      g_Net.send({

        key: "room",

        sub: 2,

        data: { roomID, }

      })

    }

  },



  // LIFE-CYCLE CALLBACKS:



  // onLoad() {},



  start() {

    this.displayLayer = cc.find("displayLayer", this.node);

    this.buttonLayer = cc.find("buttonLayer", this.node);

    this.quit = cc.find("quit", this.node);

    this.init();

  },



  // update (dt) {},

});

    this.displayLayer = cc.find("displayLayer", this.node);

    this.buttonLayer = cc.find("buttonLayer", this.node);

    this.quit = cc.find("quit", this.node);

    this.init();

  },



  // update (dt) {},

});