簡(jiǎn)單的JS鴻蒙小游戲—飛行棋之游戲邏輯

作者：Looker_song 2022-11-01 15:17:48

系統(tǒng) OpenHarmony

今天我們接著來講下如何實(shí)現(xiàn)飛行棋的游戲邏輯。

??51CTO 開源基礎(chǔ)軟件社區(qū)??

??https://ost.51cto.com??

前言

我們之前完成了??游戲的基本布局??，今天我們接著來講下如何實(shí)現(xiàn)飛行棋的游戲邏輯。

游戲邏輯

擲骰子：隨機(jī)地?cái)S出點(diǎn)數(shù)1~6，根據(jù)骰子點(diǎn)數(shù)和當(dāng)前陣營(yíng)的棋子狀態(tài)改變對(duì)應(yīng)棋子的disabled屬性，以控制該棋子是否可交互移動(dòng)，若無符合交互條件的棋子可操作則進(jìn)行回合輪替。

todice() {
    this.dice_dab = true;
    this.dice_num = Math.floor(Math.random()*6+1);
    switch(this.dice_num) {
        case 1:
            this.dice_pic = "point1";
            break;
        case 2:
            this.dice_pic = "point2";
            break;
        case 3:
            this.dice_pic = "point3";
            break;
        case 4:
            this.dice_pic = "point4";
            break;
        case 5:
            this.dice_pic = "point5";
            break;
        case 6:
            this.dice_pic = "point6";
            break;
        default:
            console.log("骰子意外出錯(cuò)");
            break;
    }
    // 骰子點(diǎn)數(shù)小于6，若有飛行狀態(tài)的棋子可點(diǎn)擊，該回合可操作，否則回合輪替
    if(6 > this.dice_num) {
        var operable = false;
        for(var i=0; i<4; i++) {
            if("flying" == thetype[i].type) {
                thetype[i].chess_dab = false;
                operable = true;
            }
        }
        if(false == operable) {
            this.rotate();
        }
        else {}
    }
    // 骰子點(diǎn)數(shù)為6，除已到達(dá)的棋子都可點(diǎn)擊
    else {
        for(var i=0; i<4; i++) {
            if("arrive" != thetype[i].type) {
                thetype[i].chess_dab = false;
            }
        }
    }
},

選擇棋子：玩家選擇可移動(dòng)的棋子行動(dòng)，根據(jù)棋子狀態(tài)移動(dòng)棋子。若棋子還未“起飛”，則移動(dòng)到起點(diǎn)；若棋子已經(jīng)行走在航線上，則移動(dòng)與骰子點(diǎn)數(shù)對(duì)應(yīng)的步數(shù)，若超過終點(diǎn)則回退多余步數(shù)。

// 選中棋子行動(dòng)
appoint(thecamp, num) {
    for(var i=0; i<4; i++) {
        thecamp[i].chess_dab = true;
    }
    // 若該棋子已進(jìn)入航線
    if(null != thecamp[num].step) {
        for(var t=0; t<MapData[Route[this.theround%4][thecamp[num].step]].chess.length; t++) {
            if(thecamp[num].index == MapData[Route[this.theround%4][thecamp[num].step]].chess[t].index) {
                MapData[Route[this.theround%4][thecamp[num].step]].chess.splice(t, 1);
                break;
            }
        }
    }
    // 如果該棋子處于待機(jī)狀態(tài)，進(jìn)入起點(diǎn)，最后結(jié)束
    if("wait" == thecamp[num].type) {
        MapData[thecamp[num].index].chess.pop();
        thecamp[num].step = 0;
        thecamp[num].type = "flying";
        thecamp[num].x = MapData[Route[this.theround%4][thecamp[num].step]].x;
        thecamp[num].y = MapData[Route[this.theround%4][thecamp[num].step]].y;
        thecamp[num].angle = MapData[Route[this.theround%4][thecamp[num].step]].angle;
        MapData[Route[this.theround%4][thecamp[num].step]].chess.push(thecamp[num]);
        this.dice_num = 0;
        this.dice_dab = false;
        this.dice_pic = "dice";
        return;
    }
    temp = this.dice_num;
    // 若走不到終點(diǎn)
    if(56 >= (thecamp[num].step + this.dice_num)) {
        forward = temp;
    }
    // 超過終點(diǎn)，回退幾步
    else {
        forward = 56 - thecamp[num].step;
        backward = temp - forward;
    }
    // 0.5秒執(zhí)行一次走棋方法
    onestep = setInterval(()=> {
        this.move(thecamp[num]);
    }, 500);
},

棋子移動(dòng)：重復(fù)定時(shí)器執(zhí)行棋子移動(dòng)方法，一步一步走完后確認(rèn)落點(diǎn)，先后進(jìn)行是否觸發(fā)踩棋子判定或位移判定，之后再進(jìn)行回合輪替。當(dāng)有棋子行至終點(diǎn)時(shí)更新左側(cè)的飛行進(jìn)度，若其中三名玩家完成游戲則游戲結(jié)束，彈出排行榜，未完成的一方為最后一名。

#打卡不停更# 簡(jiǎn)單的JS鴻蒙小游戲——飛行棋之游戲邏輯-開源基礎(chǔ)軟件社區(qū)

// 移動(dòng)棋子
move(thechess) {
    // 若前進(jìn)步數(shù)為0，且需要后退
    if((0 == forward) && (0 != backward)) {
        thechess.step -= 1;
        backward --;
    }
    // 若需要前進(jìn)
    if(forward != 0) {
        thechess.step += 1;
        forward --;
    }
    thechess.x = MapData[Route[this.theround%4][thechess.step]].x;
    thechess.y = MapData[Route[this.theround%4][thechess.step]].y;
    thechess.angle = MapData[Route[this.theround%4][thechess.step]].angle;
    temp -= 1;

    // 若步數(shù)走完
    if(0 == temp) {
        clearInterval(onestep);
        forward = 0;
        backward = 0;
        this.complex(thechess);     // 踩棋子判斷
        this.getjump(thechess);     // 位移判斷

        // 向棋子當(dāng)前落點(diǎn)寫入棋子信息
        ruzhan = setTimeout(()=> {
            MapData[Route[this.theround%4][thechess.step]].chess.push(thechess);
        }, 1200);

        // 延遲后進(jìn)行回合輪替
        changeturn = setTimeout(()=> {
            // 若該棋子到達(dá)終點(diǎn)，更新進(jìn)度
            if(56 == thechess.step) {
                thechess.type = "arrive";
                this.flylog[this.theround%4].progress += 1;

                // 若該棋子走完后剛好全部到達(dá)，計(jì)入排行榜
                if(4 == this.flylog[this.theround%4].progress) {
                    this.allrank.push(
                        {
                            rank: this.allrank.length + 1,
                            chess: this.flylog[this.theround%4].camp,
                            round: "用時(shí)" + this.theround + "回合",
                        }
                    )
                    if(3 == this.allrank.length) {
                        for(var i=0; i<4; i++) {
                            if(this.flylog[i].progress < 4) {
                                var chesstemp = this.flylog[i].camp;
                            }
                        }
                        this.allrank.push(
                            {
                                rank: this.allrank.length + 1,
                                chess: chesstemp,
                                round: "未完成",
                            }
                        )
                        this.dice_dab = true;
                        this.result = true;
                        return;
                    }
                }
            }
            this.rotate();
        }, 1500);
    }
},

踩棋事件判定：當(dāng)棋子落點(diǎn)處已有其它棋子時(shí)判斷是否異色，若為同方陣營(yíng)的棋子則共處一格；若為其它陣營(yíng)的棋子則會(huì)被擊落回到起點(diǎn)。

#打卡不停更# 簡(jiǎn)單的JS鴻蒙小游戲——飛行棋之游戲邏輯-開源基礎(chǔ)軟件社區(qū)

// 落點(diǎn)是否有棋子
complex(thechess) {
    if(52 > MapData[Route[this.theround%4][thechess.step]].index) {
        if(0 != MapData[Route[this.theround%4][thechess.step]].chess.length) {
            // 我方棋子
            if(thechess.color == MapData[Route[this.theround%4][thechess.step]].chess[0].color) {
            }
            // 敵方棋子，踩回起點(diǎn)
            else {
                for(var i=0; i<MapData[Route[this.theround%4][thechess.step]].chess.length; i++) {
                    MapData[Route[this.theround%4][thechess.step]].chess[i].type = "wait";
                    MapData[Route[this.theround%4][thechess.step]].chess[i].step = null;
                    MapData[Route[this.theround%4][thechess.step]].chess[i].x =
                    MapData[MapData[Route[this.theround%4][thechess.step]].chess[i].index].x;
                    MapData[Route[this.theround%4][thechess.step]].chess[i].y =
                    MapData[MapData[Route[this.theround%4][thechess.step]].chess[i].index].y;
                    MapData[Route[this.theround%4][thechess.step]].chess[i].angle =
                    MapData[MapData[Route[this.theround%4][thechess.step]].chess[i].index].angle;
                    this.flylog[this.theround%4].hit += 1;
                }
                MapData[Route[this.theround%4][thechess.step]].chess.splice(0, MapData[Route[this.theround%4][thechess.step]].chess.length);
            }
        }
    }
},

位移事件判定：若棋子與落點(diǎn)處棋格顏色相同，則觸發(fā)跳躍移動(dòng)到下一個(gè)同色棋格位置，接著再進(jìn)行一次踩棋事件判定。

#打卡不停更# 簡(jiǎn)單的JS鴻蒙小游戲——飛行棋之游戲邏輯-開源基礎(chǔ)軟件社區(qū)

// 判斷觸發(fā)位移
getjump(thechess) {
    // 在進(jìn)入最后的直航線前的轉(zhuǎn)角前都有可能觸發(fā)位移
    if(46 >= thechess.step) {
        if(thechess.color == MapData[Route[this.theround%4][thechess.step]].color) {
            if(18 == thechess.step) {
                thechess.step += 12;
            }
            else {
                thechess.step += 4;
            }
            jump1 = setTimeout(()=> {
                thechess.x = MapData[Route[this.theround%4][thechess.step]].x;
                thechess.y = MapData[Route[this.theround%4][thechess.step]].y;
                thechess.angle = MapData[Route[this.theround%4][thechess.step]].angle;
                // 第二次踩棋子
                this.complex(thechess);
                if(18 == thechess.step) {
                    jump2 = setTimeout(()=> {
                        thechess.step += 12;
                        thechess.x = MapData[Route[this.theround%4][thechess.step]].x;
                        thechess.y = MapData[Route[this.theround%4][thechess.step]].y;
                        thechess.angle = MapData[Route[this.theround%4][thechess.step]].angle;
                        // 第三次踩棋子
                        this.complex(thechess);
                    }, 500);
                }
            }, 500);
        }
    }
},

回合輪替：以回合數(shù)%4的方式進(jìn)行回合輪替，若玩家擲出點(diǎn)數(shù)6則追加一次擲骰子機(jī)會(huì)。

// 回合輪替
rotate() {
    // 剛剛是否投出6，是則再來一次，否則回合數(shù)加一，進(jìn)行輪替
    if(6 == this.dice_num) {
        if(4 == this.flylog[this.theround%4].progress) {
            this.theround += 1;
        }
    }
    else {
        this.theround += 1;
    }
    this.dice_num = 0;
    this.dice_pic = "dice";
    this.dice_dab = false;

    switch(this.theround % 4) {
        case 0:     // 紅的回合
            thetype = this.RED;
            this.roundtitle = "紅色方的回合";
            break;
        case 1:     // 綠的回合
            thetype = this.GREEN;
            this.roundtitle = "綠色方的回合";
            break;
        case 2:     // 黃的回合
            thetype = this.YELLOW;
            this.roundtitle = "黃色方的回合";
            break;
        case 3:     // 藍(lán)的回合
            thetype = this.BLUE;
            this.roundtitle = "藍(lán)色方的回合";
            break;
        default:
            console.log("意外出錯(cuò)");
            break;
    }

    // 若該顏色的4枚棋子都已到達(dá)終點(diǎn)，直接進(jìn)行回合輪替
    var win = 0;
    for(var i=0; i<4; i++) {
        if("arrive" == thetype[i].type) {
            win += 1;
        }
    }
    if(4 == win) {
        this.rotate();
    }
},

重新開始游戲：為了避免誤觸，將按鈕事件設(shè)定為長(zhǎng)按觸發(fā)，長(zhǎng)按后重置游戲各個(gè)變量為初始值。

#打卡不停更# 簡(jiǎn)單的JS鴻蒙小游戲——飛行棋之游戲邏輯-開源基礎(chǔ)軟件社區(qū)

// 重新開始游戲
restart() {
    // 重置游戲其它變量
    clearInterval(onestep);
    temp = 0;
    forward = 0;
    backward = 0;
    clearTimeout(jump1);
    clearTimeout(jump2);
    clearTimeout(ruzhan);
    clearTimeout(changeturn);
    this.roundtitle = "";
    this.theround = 0;
    this.dice_pic = "dice";
    this.dice_num = 0;
    this.dice_dab = false;
    this.result = false;

    // 重置地圖
    for(var i=0; i<MapData.length; i++) {
        MapData[i].chess = [];
    }

    // 重置飛行記錄和排行榜
    for(var j=0; j<4; j++) {
        this.flylog[j].hit = 0;
        this.flylog[j].progress = 0;
    }
    this.allrank = [];

    // 重置棋子
    for(var k=0; k<4; k++) {
        this.RED[k].type = "wait";
        this.RED[k].chess_dab = true;
        this.RED[k].step = null;
        this.RED[k].x = MapData[this.RED[k].index].x;
        this.RED[k].y = MapData[this.RED[k].index].y;
        this.RED[k].angle = MapData[this.RED[k].index].angle;

        this.GREEN[k].type = "wait";
        this.GREEN[k].chess_dab = true;
        this.GREEN[k].step = null;
        this.GREEN[k].x = MapData[this.GREEN[k].index].x;
        this.GREEN[k].y = MapData[this.GREEN[k].index].y;
        this.GREEN[k].angle = MapData[this.GREEN[k].index].angle;

        this.YELLOW[k].type = "wait";
        this.YELLOW[k].chess_dab = true;
        this.YELLOW[k].step = null;
        this.YELLOW[k].x = MapData[this.YELLOW[k].index].x;
        this.YELLOW[k].y = MapData[this.YELLOW[k].index].y;
        this.YELLOW[k].angle = MapData[this.YELLOW[k].index].angle;

        this.BLUE[k].type = "wait";
        this.BLUE[k].chess_dab = true;
        this.BLUE[k].step = null;
        this.BLUE[k].x = MapData[this.BLUE[k].index].x;
        this.BLUE[k].y = MapData[this.BLUE[k].index].y;
        this.BLUE[k].angle = MapData[this.BLUE[k].index].angle;
    }

    // 棋子歸位
    for(var l=0; l<4; l++) {
        MapData[77+l].chess.push(this.RED[l]);
        MapData[82+l].chess.push(this.GREEN[l]);
        MapData[87+l].chess.push(this.YELLOW[l]);
        MapData[92+l].chess.push(this.BLUE[l]);
    }

    // 默認(rèn)紅色先手
    thetype = this.RED;
    this.roundtitle = "紅色方的回合";
},