#打卡不停更# 简单的JS鸿蒙小游戏——经典24点纸牌 原创 精华

Looker_song
发布于 2022-10-25 16:50
浏览
6收藏

前言

相信大家都玩过24点纸牌游戏,今天给大家带来的就是这个经典的纸牌游戏,大家学会以后在空闲时可以玩一玩,锻炼一下速算能力。

项目结构

#打卡不停更# 简单的JS鸿蒙小游戏——经典24点纸牌-鸿蒙开发者社区

页面构建

页面设计得比较简单,上半是数字区,放着四张纸牌;下半是运算符号区,分别是加、减、乘、除;右侧则是得分记录和两个操作按钮。

#打卡不停更# 简单的JS鸿蒙小游戏——经典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();
            }
        }
    },

最终效果

#打卡不停更# 简单的JS鸿蒙小游戏——经典24点纸牌-鸿蒙开发者社区

<br>项目仓库链接 https://gitee.com/zhan-weisong/points24

©著作权归作者所有,如需转载,请注明出处,否则将追究法律责任
Points24.rar 3.23M 60次下载
已于2022-10-25 16:52:49修改
12
收藏 6
回复
举报
6条回复
按时间正序
/
按时间倒序
红叶亦知秋
红叶亦知秋

学习下代码逻辑,纸牌类的感觉会相对复杂不少。

回复
2022-10-25 17:34:45
hmyxd
hmyxd

原来24点是这样玩的,长见识了

回复
2022-10-26 14:17:41
物联风景
物联风景

为什么是24点而不是10点或者25点

回复
2022-10-27 09:30:32
Looker_song
Looker_song 回复了 物联风景
为什么是24点而不是10点或者25点

之前还没怎么认真思考过这个问题。这个游戏选择24点是因为小于它本身的因子有1、2、3、4、6、8、12共7个,容易通过乘除得到。下一个有相同因子个数的数是36,而相比于36,24更容易通过简单加减获得,所以选择24。


回复
2022-10-27 11:48:21
真庐山升龙霸
真庐山升龙霸

感觉24是个很特殊的数字,例如24节气,24小时

回复
2022-10-27 15:29:29
笨笨的婧婧
笨笨的婧婧

扑克牌类的游戏感觉很适合练手

回复
2022-10-27 18:36:13
回复
    相关推荐