#打卡不停更# 簡單的JS鴻蒙小遊戲——經典24點紙牌

前言

相信大家都玩過24點紙牌遊戲，今天給大家帶來的就是這個經典的紙牌遊戲，大家學會以後在空閑時可以玩一玩，鍛煉一下速算能力。

項目結構

頁面建構

頁面設計得比較簡單，上半是數字區，放着四張紙牌；下半是運算符号區，分别是加、減、乘、除；右側則是得分記錄和兩個操作按鈕。

<div class="container">
    <div class="gamezone">
        <div class="poker">
            <div for="(index, item) in current" class="card {{ item.css }}" show="{{ item.show }}" disabled="{{ item.disabled }}">
                <image src="{{ item.shape }}" onclick="optnum(index)"></image>
                <text class="number">{{ item.text }}</text>
            </div>
        </div>
        <div class="sign">
            <image for="(index, item) in operator" src="{{ item.src }}" class="operator {{ item.css }}"
                   disabled="{{ operdis }}" onclick="setsign(index)"></image>
        </div>
    </div>
    <div class="side">
        <text class="score">得分\n{{ score }}</text>
        <button class="btn" onclick="replace">換一批</button>
        <button class="btn" onclick="revert">重置</button>
    </div>
</div>

對于4種花型各13張紙牌需要分别定制樣式，是以建立了Poker.js紙牌字典，格式如下：

export let Poker =  [
    {
        num: 1,
        text: 'A',
        shape: "common/images/spade.png"
    },
    {
        num: 2,
        text: '2',
        shape: "common/images/spade.png"
    },
    …………
    {
        num: 13,
        text: 'K',
        shape: "common/images/diamond.png"
    },
]

export default Poker;

遊戲邏輯

随機抽牌：這裡分别寫了兩種随機抽牌邏輯。

一是将4×13共52張牌打亂順序後抽取前四張；

disorder() {
        let many, ran, temp = 0;
        for(many=0; many<26; many++) {
            ran = Math.floor(Math.random()*52);
            temp = this.pokers[many];
            this.pokers[many] = this.pokers[ran];
            this.pokers[ran] = temp;
        }
        this.origin = [0, 1, 2, 3];
    },

二是52張牌的排序不變，随機生成4個不重複的數，以這四個數作為數組下标抽牌。

getrandom() {
        this.origin = [];
        let compare = false;
        let temp = 0;
        while(4 > this.origin.length) {
            compare = false;
            temp = Math.floor(Math.random()*52);
            for(let i=0; i<this.origin.length; i++) {
                if(temp == this.origin[i]) {
                    // 抽到兩張相同的牌，不放入初始牌組
                    compare = true;
                    break;
                }
            }
            if(false == compare) {
                this.origin.push(temp);
            }
        }
    },

牌組替換與還原：因為抽牌是随機的，而并非所有的組合都是有解的，是以需要有操作按鈕，可以讓玩家主動替換或還原目前牌組。

// 換一組牌，并指派給目前牌組
    replace() {
        console.log("—————————更換牌組—————————");
//        this.disorder();        // 換牌方法一
        this.getrandom();       // 換牌方法二
        this.initcards();
        console.log("目前牌組為" + JSON.stringify(this.current));
    },

    // 還原牌組
    revert() {
        console.log("—————————還原牌組—————————");
        this.initcards();
        console.log("還原目前牌組為" + JSON.stringify(this.current));
    },

選中樣式：選中的數字或運算符需要有特别的樣式提示，以提高遊戲體驗，是以需要給紙牌和運算符設定樣式屬性。

// 選擇數字
    optnum(num_index) {
        // 運算符為空，處于選第一個數的環節
        if(null == this.operindex) {
            this.operdis = false;
            first = num_index;
            for(let i=0; i<4; i++) {
                this.current[i].css = "";
            }
            this.current[num_index].css = "select";
        }
        // 運算符不為空，選擇了第二個數
        else {
            this.operdis = true;
            second = num_index;
            this.calculate();
        }
    },

    // 選擇運算符
    setsign(op_index) {
        // 若點選的運算符為未選中狀态，
        if("" == this.operator[op_index].css) {
            for(let i=0; i<4; i++) {
                this.operator[i].css = "";
            }
            this.operator[op_index].css = "select";
            this.operindex = op_index;

            // 關閉第一個數可選中，取消其同時作為第二個數的資格
            this.current[first].disabled = true;
        }
        // 若點選的運算符為選中狀态，取消選中，重新開機選第一個數環節
        else {
            this.operator[op_index].css = "";
            this.current[first].disabled = false;
            this.operindex = null;
        }
    },

運算合法判定：在進行運算前，需要對運算的合法性進行判定。對于零不能作為除數，某些數不能被整除等情況，需要加以限制。當出現這些情況，撤銷這次操作，恢複牌組狀态，并彈出提示玩家。

// 判别運算是否合法，再進行運算
    calculate() {
        // 選好第二個數，除法運算是否合法
        if((3 == this.operindex) && (0 == this.current[second].num)) {
            prompt.showToast({
                message: "0不能作為除數，請重新選擇",
                duration: 1500,
            });
            // 非法運算，重置選數環節
            this.current[first].disabled = false;
            this.current[first].css = "";
            this.operator[this.operindex].css = "";
            this.operindex = null;
            this.operdis = true;
            first = second = 0;
        }
        else if((3 == this.operindex) && (0 != (this.current[first].num % this.current[second].num))) {
            prompt.showToast({
                message: "無法被整除，請重新選擇",
                duration: 1500,
            });
            // 無法被整除，重置選數環節
            this.current[first].disabled = false;
            this.current[first].css = "";
            this.operator[this.operindex].css = "";
            this.operindex = null;
            this.operdis = true;
            first = second = 0;
        }
        // 正常觸發運算
        else {
            switch (this.operindex) {
                case 0:
                    this.current[first].num += this.current[second].num;
                    break;
                case 1:
                    this.current[first].num -= this.current[second].num;
                    break;
                case 2:
                    this.current[first].num *= this.current[second].num;
                    break;
                case 3:
                    this.current[first].num /= this.current[second].num;
                    break;
                default:
                    console.log("運算意外出錯");
                    break;
            }
            // 運算結束，将結果指派給一，文本顯示數字，花型為某種，恢複一的可點選和未選中樣式，隐藏二的顯示，運算符為null
            this.current[first].text = this.current[first].num;
            this.current[first].shape = "";
            this.current[first].disabled = false;
            this.current[first].css = "";
            this.current[second].show = false;
            this.operator[this.operindex].css = "";
            this.operindex = null;
            this.checkover();
        }
    },

得分判定：根據場上最後一張牌的數值進行得分判定，等于24則加分替換新牌組，否則将牌組重置為原狀。

// 得分判定，先判斷是否隻剩一張牌，若是則進行結果比較，答對加分換牌，答錯還原
    checkover() {
        let temp = 4;
        for(let i=0; i<4; i++) {
            if(false == this.current[i].show) {
                temp --;
            }
        }
        if(1 == temp) {
            // 結果判斷是否等于24
            if(24 == this.current[first].num) {
                prompt.showToast({
                    message: "答對啦，加分，換牌組",
                    duration: 1500,
                });
                this.score += 10;
                this.replace();
            }
            else {
                prompt.showToast({
                    message: "答錯啦……還原牌組",
                    duration: 1500,
                });
                this.revert();
            }
        }
    },

最終效果

<br>項目倉庫連結 https://gitee.com/zhan-weisong/points24

附件連結：https://ost.51cto.com/resource/2360

本文作者：Looker_song

#打卡不停更# 簡單的JS鴻蒙小遊戲——經典24點紙牌

前言

項目結構

頁面建構

遊戲邏輯

最終效果

繼續閱讀

blackberry平台J2ME程式設計指南(一)

黑莓開發者的第一個BlackBerry應用開發

華為鴻蒙HarmonyOS4.0第二期開發者Beta來了。華為上個月開啟HarmonyOS4.0開發者Beta版招募活動

Android應用_UI_啟動界面閃現标題欄問題（WindowNoTitle）

天風證券消費電子周報：蘋果持續推進visionOS應用開發和開發工具優化

Spring Boot 入門之初識微服務（一）

GaussDB技術解讀系列之SQL Audit，面向應用開發的SQL稽核工具

用鴻蒙開發AI應用（六）UI篇環境準備建立項目目錄結構空氣品質監測 UI運作程式資料下載下傳

.NET 全場景開發終于到來了

HDC2022重磅釋出“鴻蒙賦能全家桶”，開發者的新時代要來了？

說句不好聽的，國産手機廠家真實不思進取不中用，華為被限制的這四年，是歌照唱舞照跳，似乎可以一直混下去，搞不好可以混個高端

鴻蒙4正式釋出，麒麟990系列機型有望率先更新！華為開發者大會8月4日-6日舉行，屆時鴻蒙4将正式釋出。鴻蒙4是新一代智

【疑問】這算是低代碼嗎？

五大跨平台桌面應用開發架構：Electron、Tauri、Flutter等

鴻蒙4公測版也推送了，然後，今天參加了HarmonyOS應用開發（UX）專場分論壇，QQ和微網誌的一線開發者們都做了分享，

第一個鴻蒙程式預覽失敗的原因