背诵方歌demo

第一阶段

字

工作流程

ComponentBase

import Message from "../Message/Message";

const {ccclass, property} = cc._decorator;

@ccclass
export default class ComponentBase extends cc.Component {


    // LIFE-CYCLE CALLBACKS:

    // onLoad () {}

    start () {

    }

    // update (dt) {}

    ReceiveMessage(msg: Message){}
}

FangGe

const {ccclass, property} = cc._decorator;

@ccclass
export default class FangGe extends cc.Component {

    displayContent: string[] = [];
    tartgetContent: string[] = [];


    // LIFE-CYCLE CALLBACKS:

    // onLoad () {}

    start () {

    }

    // update (dt) {}


    getDisplayContent(){
        let content = "麻黄汤中臣桂枝杏仁甘草四般施发汗解表宣肺气伤寒表实无汗宜";
        this.tartgetContent = content.split('');
        console.debug(this.tartgetContent);
        let tmp: string[] = content.split('');
        tmp.sort(() => Math.random() - 0.5);
        this.displayContent = tmp;
        console.debug(this.displayContent);
        return this.displayContent;
    }

    getTargetContent(){
        let content = "麻黄汤中臣桂枝杏仁甘草四般施发汗解表宣肺气伤寒表实无汗宜";
        this.tartgetContent = content.split('');
        return this.tartgetContent;
    }


}

SwapController

import ComponentBase from "../Classes/ComponentBase";
import FangGe from "../Classes/FangGe";
import ZiManager from "../Manager/ZiManager";
import Message, { MessageCommand } from "../Message/Message";
import ZiMsg, { ZiState } from "../Message/ZiMsg";

const {ccclass, property} = cc._decorator;

@ccclass
export default class SwapController extends ComponentBase {

    // 收到的有效消息数
    msgCount: number = 0;
    // 有效消息内容
    msgContent: ZiMsg;

    //目标内容
    targetContent: string[] = [];
    //显示内容
    displayContent: string[] = [];
    

    // LIFE-CYCLE CALLBACKS:

    // onLoad () {}

    start () {
        // 注册为ZiManager的消息接受者
        ZiManager.Instance.RegisterReceiver(this);

        let fangGe: FangGe = new FangGe();
        this.displayContent = fangGe.getDisplayContent();

        this.targetContent = fangGe.getTargetContent();

        this.display();

    }

    update (dt) {
        this.cotentCorrect();
        
    }

    //接受消息
    ReceiveMessage(msg: Message): void {
        super.ReceiveMessage(msg);
        //如果全文正确
        if(this.cotentCorrect()){
            console.debug("全文正确");
        } else {
            // 判断是否为有效消息
            if(msg.Command == MessageCommand.FG_Swap){
                let content: ZiMsg = <ZiMsg>msg.Content;
                //如果字状态为可以改变 则为有效消息
                if(content.state == ZiState.EnableChange){
                    // 判断有效消息是否等于一条
                    if(this.msgCount == 1){
                        //等于一条， 交换值
                        this.swap(content);

                        // 将有效信息归0
                        this.msgCount = 0;
                        //调用display，重新显示内容。
                        this.display();

                    } else {
                        //不等于1条
                        // 存储该条消息内容
                        this.msgContent = content;
                        //将有效消息置为1
                        this.msgCount = 1;

                    }

                }
            }

        }

    }


    // 判断全文是否正确
    cotentCorrect(){
        let target = this.targetContent.toString();
        let display = this.displayContent.toString();
        return target == display;
    }

    //交换值
    swap(content: ZiMsg){
        console.debug("content.id" + content.id);
        let index1 = Number(content.id);
        let index2 = Number(this.msgContent.id);

        console.debug(index1 +"|" + index2);
        let value1: string = this.displayContent[index1];
        let value2: string = this.displayContent[index2];
        console.debug(value1 + "|" + value2);
        let tmp = value1;
        value1 = value2;
        value2 = tmp;
        this.displayContent[index1] = value1;
        this.displayContent[index2] = value2;
        console.debug("交换值完成");
        console.debug(this.displayContent);
    }

    //显示内容
    display(){
        
        //清空之前的内容
        this.node.destroyAllChildren();
        
        let displayContent = this.displayContent;
        console.debug(displayContent);

    
        for(let i = 0; i < displayContent.length; i++){
            let node = new cc.Node();
            let label = node.addComponent(cc.Label);
            let ziPlayer = node.addComponent("ZiPlayer");
            



        

            label.node.color = cc.Color.BLACK;
            label.string = displayContent[i];


            node.name = i.toString();
            node.setContentSize(50, 50);
            node.setParent(this.node);

            

        }
        
    }


}

ManagerBase

import ComponentBase from "../Classes/ComponentBase";
import Message, { MessageType } from "../Message/Message";
import MessageCenter from "../Message/MessageCenter";


const {ccclass, property} = cc._decorator;

@ccclass
export default class ManagerBase extends ComponentBase{

    //管理类的消息接受者数组
    ReceiverList: ComponentBase[] = [];
    //当前管理类接收的具体消息类型
    messageType: number;


    // LIFE-CYCLE CALLBACKS:

    onLoad () {
        //设置当前管理类接收的消息类型
        this.messageType = this.SetMessageType();
        //把管理类添加到消息中心列表中
        MessageCenter.Managers.push(this);

    }

   

    // update (dt) {}
    //设置当前管理类接收的消息类型
    SetMessageType(){
        return MessageType.Type_FG;
    }

    //注册消息监听
    RegisterReceiver(cb: ComponentBase){
        this.ReceiverList.push(cb);
    }

    //接收消息
    ReceiveMessage(message: Message): void {
        super.ReceiveMessage(message);
        //判断消息类型
        if(message.Type != this.messageType){
            return;
        }
        //向下层分发消息
        for (let cb of this.ReceiverList) {
            cb.ReceiveMessage(message);
        }
    }


}

ZiManager

// Learn TypeScript:
//  - https://docs.cocos.com/creator/manual/en/scripting/typescript.html
// Learn Attribute:
//  - https://docs.cocos.com/creator/manual/en/scripting/reference/attributes.html
// Learn life-cycle callbacks:
//  - https://docs.cocos.com/creator/manual/en/scripting/life-cycle-callbacks.html

import { MessageType } from "../Message/Message";
import ManagerBase from "./ManagerBase";



const {ccclass, property} = cc._decorator;

@ccclass
export default class ZiManager extends ManagerBase{

    static Instance: ZiManager;
    

    onLoad(): void {
        super.onLoad();
        ZiManager.Instance = this;
    }

    // 接收消息类型
    SetMessageType(): number {
        return MessageType.Type_FG;
    }
}

Message

export default class Message {
    //类型
    Type: number;
    //命令
    Command: number;
    //参数
    Content: any;

    constructor(type: number, command: number, content: any){
        this.Type = type;
        this.Command = command;
        this.Content = content;
    }

}


export class MessageType{
    static Type_UI = 1;
    static Type_FG = 2;
}

export class MessageCommand{
    static FG_Display = 201;
    static FG_Swap = 202;
}

MessageCenter

import ComponentBase from "../Classes/ComponentBase";
import Message from "./Message";

export default class MessageCenter {

    //管理类列表
    static Managers: ComponentBase[] = [];


    //发送消息
    static SendMessage(msg: Message){
        for(let manager of this.Managers){
            manager.ReceiveMessage(msg);
        }
    }

    //发送消息
    static SendCustomMessage(type: number, command: number, content: any){
        let msg = new Message(type, command, content);
        this.SendMessage(msg);
    }

}

ZiMsg

export default class ZiMsg{

    state: number;
    id: string;

    constructor(state: number, id: string){
        this.state = state;
        this.id = id;
    }
   
}

export class ZiState{
    static EnableChange = 1;
    static UnEnableChange = 2;
    static Correcct = 3;
}

ZiPlayer

import { MessageCommand, MessageType } from "../Message/Message";
import MessageCenter from "../Message/MessageCenter";
import ZiMsg, { ZiState } from "../Message/ZiMsg";

const {ccclass, property} = cc._decorator;

@ccclass
export default class NewClass extends cc.Component {

    

    // LIFE-CYCLE CALLBACKS:

    // onLoad () {}

    start () {
        //触摸
        this.node.on(cc.Node.EventType.MOUSE_DOWN, (event) => {
            // 交换值
            MessageCenter.SendCustomMessage(MessageType.Type_FG, MessageCommand.FG_Swap, new ZiMsg(ZiState.EnableChange, this.node.name));
        })

    }

    // update (dt) {}
}

运行效果

第二阶段

优化

工作流程

FangGe

import { ZiState } from "../Message/ZiMsg";
import { Zi } from "./Zi";

const {ccclass, property} = cc._decorator;

@ccclass
export default class FangGe extends cc.Component {

    static displayContent: string[] = [];
    static tartgetContent: string[] = [];
    static title: string;


    // LIFE-CYCLE CALLBACKS:

    // onLoad () {}

    start () {

    }

    // update (dt) {}


    static getDisplayContent(){
        let content = "麻黄汤中臣桂枝杏仁甘草四般施发汗解表宣肺气伤寒表实无汗宜";
        this.tartgetContent = content.split('');
        console.debug(this.tartgetContent);
        let tmp: string[] = content.split('');
        tmp.sort(() => Math.random() - 0.5);
        this.displayContent = tmp;
        console.debug(this.displayContent);
        return this.displayContent;
    }

    static getTargetContent(){
        let content = "麻黄汤中臣桂枝杏仁甘草四般施发汗解表宣肺气伤寒表实无汗宜";
        FangGe.tartgetContent = content.split('');
        return FangGe.tartgetContent;
    }

    static getTitle(){
        FangGe.title = "麻黄汤";
        return FangGe.title;
    }

    static getZiDisplayContent(){
        let ZiDisplayContent: Zi [] = [];
        let content = "麻黄汤中臣桂枝杏仁甘草四般施发汗解表宣肺气伤寒表实无汗宜";
        let targetContent = content.split('');
        
        let tmp: string[] = content.split('');
        tmp.sort(() => Math.random() - 0.5);
        this.displayContent = tmp;
        console.debug(this.displayContent);

        for(let i = 0; i < tmp.length; i++){
            if(targetContent[i] == tmp[i]){
                ZiDisplayContent[i] = new Zi(ZiState.Correcct, tmp[i]);
            } else {
                ZiDisplayContent[i] = new Zi(ZiState.EnableChange, tmp[i]);
            }

        }


        return ZiDisplayContent;



    }


}

Zi

export class Zi {
    state: number;
    value: string;
    constructor(state: number, value: string){
        this.state = state;
        this.value = value;
    }
}

SwapController

import ComponentBase from "../Classes/ComponentBase";
import FangGe from "../Classes/FangGe";
import { Zi } from "../Classes/Zi";
import ZiManager from "../Manager/ZiManager";
import Message, { MessageCommand, MessageType } from "../Message/Message";
import MessageCenter from "../Message/MessageCenter";
import ZiMsg, { ZiState } from "../Message/ZiMsg";
import ZiUtil from "../Utils/ZiUtil";

const {ccclass, property} = cc._decorator;

@ccclass
export default class SwapController extends ComponentBase {

    // 收到的有效消息数
    msgCount: number = 0;
    // 有效消息内容
    msgContent: ZiMsg;

    //目标内容
    targetContent: string[] = [];
    //显示内容
    displayContent: string [] = [];

    ziDisplayContent: Zi[] = [];
    

    // LIFE-CYCLE CALLBACKS:

    // onLoad () {}

    start () {
        // 注册为ZiManager的消息接受者
        ZiManager.Instance.RegisterReceiver(this);

        
        

        this.displayContent = FangGe.getDisplayContent();
        this.targetContent = FangGe.getTargetContent();
        this.ziDisplayContent = FangGe.getZiDisplayContent();
        // this.displayContent = ZiUtil.targetContentTodisplayContent(this.targetContent);
        // let displayContent: Zi[];
        // let len = this.targetContent.length;
        // let tmp = this.targetContent;
        // tmp.sort(() => Math.random() -0.5);
        // console.debug("tmp: " + tmp);
        // console.debug("targetContent" + this.targetContent);
        // for(let i = 0; i < len; i++){
        //     if(this.targetContent[i] != tmp[i]){
        //         displayContent[i] = new Zi(ZiState.EnableChange, tmp[i]);
        //     } else {
        //         displayContent[i] = new Zi(ZiState.Correcct, tmp[i]);
        //     }
        // }


        // this.display();
        ZiUtil.display(this.node, this.ziDisplayContent);
        

    }

    update (dt) {
        this.cotentCorrect();
        
    }

    //接受消息
    ReceiveMessage(msg: Message): void {
        super.ReceiveMessage(msg);
        //如果全文正确
        if(this.cotentCorrect()){
            console.debug("全文正确");
        } else {
            // 判断是否为有效消息
            if(msg.Command == MessageCommand.FG_Swap){
                let content: ZiMsg = <ZiMsg>msg.Content;
                //如果字状态为可以改变 则为有效消息
                if(content.state == ZiState.EnableChange){
    
                    
                    // 判断有效消息是否等于一条
                    if(this.msgCount == 1){
                        //等于一条， 交换值
                        this.swap(content);

                        // 将有效信息归0
                        this.msgCount = 0;


                        //调用display，重新显示内容。
                        // this.display();
                        // ZiUtil.display(this.node, this.ziDisplayContent);
                        this.refreshState();
                        this.allZiDisplay();


                    } else {
                        //不等于1条
                        // 存储该条消息内容
                        this.msgContent = content;
                        //将有效消息置为1
                        this.msgCount = 1;
                        let index = Number(this.msgContent.id);
                        this.ziDisplayContent[index].state = ZiState.UnEnableChange;
                        
                        this.allZiDisplay();

                    }

                }
            }

        }

    }


    // 判断全文是否正确
    cotentCorrect(){
        let target = this.targetContent.toString();
        let display: string;
        let tmp: string[] = [];
        for(let i = 0; i < this.ziDisplayContent.length; i++){
            tmp[i] = this.ziDisplayContent[i].value;
        }
        display = tmp.toString();
        return target == display;
    }

    //交换值
    swap(content: ZiMsg){
        console.debug("content.id" + content.id);
        let index1 = Number(content.id);
        let index2 = Number(this.msgContent.id);

        console.debug(index1 +"|" + index2);
        // let value1: string = this.displayContent[index1];
        // let value2: string = this.displayContent[index2];
        let value1: string = this.ziDisplayContent[index1].value;
        let value2: string = this.ziDisplayContent[index2].value;
        console.debug(value1 + "|" + value2);
        let tmp = value1;
        value1 = value2;
        value2 = tmp;
        this.ziDisplayContent[index1].value = value1;
        this.ziDisplayContent[index2].value = value2;
        console.debug("交换值完成");
        // console.debug(this.displayContent);
        console.debug(this.ziDisplayContent);
    }

    //显示内容
    display(){
        
        //清空之前的内容
        this.node.destroyAllChildren();
        
        let displayContent = this.displayContent;
        console.debug(displayContent);

    
        for(let i = 0; i < displayContent.length; i++){
            let node = new cc.Node();
            // let label = node.addComponent(cc.Label);
            let ziPlayer = node.addComponent("ZiPlayer");
            
            
            let richText = node.addComponent(cc.RichText);


        

            // label.node.color = cc.Color.BLACK;
            // label.string = displayContent[i];

            richText.node.color = cc.Color.BLACK;
            richText.string =displayContent[i];


            node.name = i.toString();
            node.setContentSize(50, 50);
            node.setParent(this.node);

            

        }
        
    }

    allZiDisplay(){
        //清空之前的内容
        this.node.destroyAllChildren();
        
        let ziDisplayContent = this.ziDisplayContent;
        console.debug(ziDisplayContent);

    
        for(let i = 0; i < ziDisplayContent.length; i++){
            let node = new cc.Node();
            // let label = node.addComponent(cc.Label);
            let ziPlayer = node.addComponent("ZiPlayer");
            
            
            let richText = node.addComponent(cc.RichText);


        

            // label.node.color = cc.Color.BLACK;
            // label.string = displayContent[i];

            richText.node.color = cc.Color.BLACK;
            let ziState = ziDisplayContent[i].state;
            if(ziState == ZiState.Correcct){
                richText.node.color = cc.Color.GREEN;
            }
            if(ziState == ZiState.EnableChange){
                richText.node.color = cc.Color.BLACK;
            }
            if(ziState == ZiState.UnEnableChange){
                richText.node.color = cc.Color.BLUE;
            }


            richText.string =ziDisplayContent[i].value;


            node.name = i.toString();
            node.setContentSize(50, 50);
            node.setParent(this.node);
        }
    }


    //刷新状态
    refreshState(){
        for(let i = 0; i < this.ziDisplayContent.length; i++ ){
            if(this.targetContent[i] == this.ziDisplayContent[i].value){
                this.ziDisplayContent[i].state = ZiState.Correcct;
            } else {
                this.ziDisplayContent[i].state = ZiState.EnableChange;
            }
        }
    }

    

}

titleController

import FangGe from "../Classes/FangGe";

const {ccclass, property} = cc._decorator;

@ccclass
export default class NewClass extends cc.Component {

    

    @property(cc.Label)
    titleLabel: cc.Label = null;
    // LIFE-CYCLE CALLBACKS:

    // onLoad () {}

    start () {
        this.titleLabel.string = FangGe.getTitle();

    }

    // update (dt) {}
}

Message

export default class Message {
    //类型
    Type: number;
    //命令
    Command: number;
    //参数
    Content: any;

    constructor(type: number, command: number, content: any){
        this.Type = type;
        this.Command = command;
        this.Content = content;
    }

}


export class MessageType{
    static Type_UI = 1;
    static Type_FG = 2;
}

export class MessageCommand{
    static FG_Display = 201;
    static FG_Swap = 202;
    static FG_SetZiColor = 203;
    static FG_SetZiState = 204;
    static FG_getZiColor = 205;
    static FG_getZiState = 206;
    static FG_getZiInfo = 207;
}

ZiMsg

export default class ZiMsg{

    state: ZiState;
    id: string;
    color: cc.Color;

    constructor(state: ZiState, id: string, color: cc.Color){
        this.state = state;
        this.id = id;
        this.color = color;

    }
   
}

export class ZiState{
    static EnableChange = 1;
    static UnEnableChange = 2;
    static Correcct = 3;
}

ZiUtil

import { Zi } from "../Classes/Zi";
import { ZiState } from "../Message/ZiMsg";

const {ccclass, property} = cc._decorator;

@ccclass
export default class ZiUtil extends cc.Component {

  
    // LIFE-CYCLE CALLBACKS:

    // onLoad () {}

    start () {

    }

    // update (dt) {}
    static ZiDisplay(richText: cc.RichText, zi: Zi){
        if(zi.state == ZiState.Correcct){
            richText.node.color = cc.Color.GREEN;
        }
        if(zi.state == ZiState.EnableChange){
            richText.node.color = cc.Color.BLACK;
        }
        if(zi.state == ZiState.UnEnableChange){
            richText.node.color = cc.Color.BLUE;
        }

        richText.string = zi.value;

    }


    static display(parentNode: cc.Node,displayContent: Zi[]){
        parentNode.destroyAllChildren();
        for(let i = 0; i < displayContent.length; i++){
            let node = new cc.Node();
            let ziPlayer = node.addComponent("ZiPlayer");
            let richText = node.addComponent(cc.RichText);

            ZiUtil.ZiDisplay(richText, displayContent[i]);

            node.name = i.toString();
            node.setContentSize(50, 50);
            node.setParent(parentNode);
            
        }
    }


    // static targetContentTodisplayContent(tartgetContent: string []){


    //     let displayContent: Zi[];
    //     let len = tartgetContent.length;
    //     let tmp = tartgetContent;
    //     tmp.sort(() => Math.random() -0.5);
    //     console.debug("tmp: " + tmp);
    //     console.debug("targetContent" + tartgetContent);
    //     for(let i = 0; i < len; i++){
    //         if(tartgetContent[i] != tmp[i]){
    //             displayContent[i] = new Zi(ZiState.EnableChange, tmp[i]);
    //         } else {
    //             displayContent[i] = new Zi(ZiState.Correcct, tmp[i]);
    //         }
    //     }

    //     return displayContent;

    // }
}

运行效果

第三阶段

方歌录入设计

方歌详细内容

const {ccclass, property} = cc._decorator;

@ccclass
export default class FangGeDetail {

    title: string;
    content: string;
    proficiencey: number;



    constructor(title: string, content: string, proficencey: number){
        this.title = title;
        this.content = content;
        this.proficiencey = proficencey;
    }



}

方歌录入

CollectFangge

import FangGeDetail from "../Classes/FangGeDetail";
import FanggeLib from "../Classes/FanggeLib";

const {ccclass, property} = cc._decorator;

@ccclass
export default class collectFangge extends cc.Component {

    title: string;
    content: string;
    proficiency: number = 0;
    fangGeLib: FanggeLib;
    fangGeDetails: FangGeDetail[] = [];
    

    @property(cc.EditBox)
    titleEdit: cc.EditBox = null;
    @property(cc.EditBox)
    contentEdit: cc.EditBox = null;
    @property(cc.Label)
    successLabel: cc.Label = null;

    // LIFE-CYCLE CALLBACKS:

    // onLoad () {}

    start () {
       

    }

    // update (dt) {}

    // 录入方歌
    collectFangge(){
        this.title = this.titleEdit.string;
        this.content = this.contentEdit.string;
        let fangGeDetail = new FangGeDetail(this.title, this.content, this.proficiency);
       
       this.fangGeDetails.push(fangGeDetail);
       this.fangGeLib = new FanggeLib(this.fangGeDetails);
        
        let json = JSON.stringify(fangGeDetail);
        let str = json.toString();
        console.debug(json);
        this.successLabel.string = "录入成功";
        let obj = JSON.parse(json);
        console.debug("obj" + obj.content);

        //将fangGeLib转为json
        let jsonLib = JSON.stringify(this.fangGeLib);

        //存入本地
        // cc.sys.localStorage.setItem("lib", jsonLib);
        this.storeFangge(fangGeDetail);
        
        

        //读取本地文件
        let fanggeLib = this.getFanggeLib();
        //遍历
        for(let i = 0; i < fanggeLib.myfanggeLib.length; i++){
            let content = fanggeLib.myfanggeLib[i].content;
            console.debug("content -> " + content);
        }
        
        

    }

    // 重置
    resetFangGe(){
        this.successLabel.string = "重新录入";
        this.titleEdit.string = "";
        this.contentEdit.string = "";
    }

    //录入下一个
    collectNext(){
        this.resetFangGe();
        this.successLabel.string = "录入中";
    }

    //将方歌存入本地
    storeFangge(fangGeDetail: FangGeDetail){
        //获取FanggeLib
        let fanggeLib = this.getFanggeLib();
        //加入方歌
        fanggeLib.myfanggeLib.push(fangGeDetail);

        // 转为json
        let json = JSON.stringify(fanggeLib);

        //存入本地
        cc.sys.localStorage.setItem("lib", json);



    }

    //读取存储的方歌
    getFanggeLib(){
        let FanggeLib = cc.sys.localStorage.getItem("lib");
        //转为对象
        this.fangGeLib = <FanggeLib>JSON.parse(FanggeLib);

        return this.fangGeLib;
    }
}

FanggeLib

import FangGeDetail from "./FangGeDetail";


export default class FanggeLib {

    myfanggeLib: FangGeDetail[] = [];
    constructor(fangGeLib: FangGeDetail[]){
        
        this.myfanggeLib = fangGeLib;
    }
  

    addFangGeDetail(fangGeDetail: FangGeDetail){
        this.myfanggeLib.push(fangGeDetail);
    }

    //获取方歌个数
   getFanggeCount(){
        return this.myfanggeLib.length;
    }

}

FanggeLibUtil

import FanggeLib from "../Classes/FanggeLib";


export default class FangGeLibUtil {

  
    // 获取方歌
    static getFangGeDeTail(){
        let FanggeLib = cc.sys.localStorage.getItem("lib");
        //转为对象
        let fangGeLib = <FanggeLib>JSON.parse(FanggeLib);
        let index = Math.random() * fangGeLib.myfanggeLib.length;
        index = Math.floor(index);


        return fangGeLib.myfanggeLib[index];
    }
}

更新FangGe

方歌背诵工作流程

方歌录入工作流程

方歌录入运行效果

第四阶段

主页设计

小bug

用trycatch处理即可

ReceiveMessage(message: Message): void {
    super.ReceiveMessage(message);
    //判断消息类型
    if (message.Type != this.messageType) {
      return;
    }

    //向下层分发消息
    // for (let cb of this.ReceiverList) {
    //     cb.ReceiveMessage(message);
    //   }

    try {
      //向下层分发消息
      for (let cb of this.ReceiverList) {
        cb.ReceiveMessage(message);
      }
    } catch (error) {
        console.debug("error in ManagerBase: " + error);
    }
  }