<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>
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.

.container {
    flex-direction: row;
    width: 100%;
    height: 100%;
}
 
.gamezone {
    flex-direction: column;
    width: 85%;
    height: 100%;
    background-color: #9999CC;
}
 
.poker {
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 70%;
}
...........
.score {
    width: 100%;
    height: 30%;
    margin-bottom: 25%;
    font-size: 28px;
    text-align: center;
}
 
.btn {
    width: 90px;
    height: 50px;
    margin: 10px 0;
    font-size: 20px;
    background-color: brown;
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.

let first, second = 0;      // 第一个数、第二个数下标
 
export default {
    data: {
        score: 0,       // 得分
        operdis: true,      // 运算符不可点击
        operindex: null,       // 运算符下标
        pokers: Poker,      // 源牌组
        origin: [],     // 初始牌组
        current: [      // 当前牌组
            {
                num: 1,     // 计算值
                text: '1',      // 左上角文本
                shape: "common/images/spade.png",      // 花型
                show: true,     // 显示标识符
                disabled: false,        // 不可交互属性
                css: "",        // 样式
            },
            {
                num: 11,
                text: 'J',
                shape: "common/images/heart.png",
                show: true,
                disabled: false,
                css: "",
            },
            {
                num: 12,
                text: 'Q',
                shape: "common/images/club.png",
                show: true,
                disabled: false,
                css: "",
            },
            {
                num: 13,
                text: 'K',
                shape: "common/images/diamond.png",
                show: true,
                disabled: false,
                css: "",
            }
        ],
        operator: [     
            {
                src: "common/images/plus.png",
                css: "",
            },
            {
                src: "common/images/sub.png",
                css: "",
            },
            {
                src: "common/images/mult.png",
                css: "",
            },
            {
                src: "common/images/div.png",
                css: "",
            },
        ],
    },
 
    onInit() {
        this.replace();
    },

    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];
    },
 
    .........
 
  
    initcards() {
        for(let i=0; i<4; i++) {
            this.current[i].num = this.pokers[this.origin[i]].num;
            this.current[i].text = this.pokers[this.origin[i]].text;
            this.current[i].shape = this.pokers[this.origin[i]].shape;
            this.current[i].show = true;
            this.current[i].disabled = false;
            this.current[i].css = "";
        }
        this.operdis = true;
        if(null != this.operindex) {
            this.operator[this.operindex].css = "";
            this.operindex = null;
        }
    },
 

    checkover() {
        let temp = 4;
        for(let i=0; i<4; i++) {
            if(false == this.current[i].show) {
                temp --;
            }
        }
        if(1 == temp) {
 
            if(24 == this.current[first].num) {
                prompt.showToast({
                    message: "答对，加分，换牌组",
                    duration: 1500,
                });
                this.score += 10;
                this.replace();
            }
            else {
                prompt.showToast({
                    message: "答错，还原牌组",
                    duration: 1500,
                });
                this.revert();
            }
        }
    },
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.
98.
99.
100.
101.
102.
103.
104.
105.
106.
107.
108.
109.
110.
111.
112.
113.
114.
115.
116.
117.
118.
119.
120.
121.
122.
123.
124.
125.

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;
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.