简单的JS鸿蒙小游戏——垃圾分类（下） 原创 精华

        <div class="player">
            <text class="state-title">记录：答对{{player1.theCorrect}}题，答错{{player1.theWrong}}题</text>
            <div>
                <image class="garbage-type" src="common/Recyclable.jpg"
                       disabled="{{btndis}}" onclick="typeclick({{player1}}, 1)"></image>
                <image class="garbage-type" src="common/FoodWaste.jpg"
                       disabled="{{btndis}}" onclick="typeclick({{player1}}, 2)"></image>
            </div>
            <div>
                <image class="garbage-type" src="common/ResidualWaste.jpg"
                       disabled="{{btndis}}" onclick="typeclick({{player1}}, 3)"></image>
                <image class="garbage-type" src="common/HazardousWaste.jpg"
                       disabled="{{btndis}}" onclick="typeclick({{player1}}, 4)"></image>
            </div>
        </div>
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.

        <div class="question">
            <div>
                <image class="garbage" src="{{garbage.src}}"></image>
            </div>
            <div class="garbage-name">
                <text>{{garbage.name}}</text>
            </div>
            <div class="tip">
                <text show="{{tipshow}}">{{tiptitle}}</text>
            </div>
        </div>
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.

    <div class="gameover" show="{{popup}}">
        <text style="font-size: 30px;">比分结果 —— {{player1.theCorrect - player1.theWrong}} : {{player2.theCorrect - player2.theWrong}}</text>
        <text style="font-size: 24px;">{{result}}</text>
        <div style="height: 40%; align-items: center;">
            <button class="btn" onclick="GameRestart">重新开始</button>
            <button class="btn" style="margin-left: 5%;" onclick="GameExit">退出</button>
        </div>
    </div>
1.
2.
3.
4.
5.
6.
7.
8.

    data: {
        theround: 0,        //当前回合数
        tipshow: false,     //提示标识符
        btndis: false,      //按钮不可点击状态
        popup: false,       //弹窗标识符
        tiptitle: "",       //提示文本
        result: "",     //游戏结果文本
        player1: {
            theCorrect: 0,      //答对题数
            theWrong: 0,        //答错题数
        },
        player2: {
            theCorrect: 0,
            theWrong: 0,
        },
        garbage: {
            name: "随机垃圾",
            type: 3,
            src: "common/garbages/LJ000.png",
        },
    },
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.

        switch(this.garbage.type) {
            case 1:
                this.tiptitle = "可回收垃圾";
                break;
            case 2:
                this.tiptitle = "厨余垃圾";
                break;
            case 3:
                this.tiptitle = "其他垃圾";
                break;
            case 4:
                this.tiptitle = "有害垃圾";
                break;
            default:
                console.info("垃圾类型出错！");
                break;
        }
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.

        this.tipshow = true;        //显示提示
        this.btndis = true;     //关闭交互
1.
2.

        //加分 or 扣分
        if(choosetype == this.garbage.type) {
            console.info("答对了！");
            role.theCorrect += 1;
        }
        else {
            console.info("回答错误……");
            role.theWrong += 1;
        }
1.
2.
3.
4.
5.
6.
7.
8.
9.

        var ticktock = setTimeout(()=> {
            this.tipshow = false;       //关闭提示
        }, 3000);

        var thechange = setTimeout(()=> {
            //随机更换垃圾
            this.garbage = GarbageList[Math.floor(Math.random()*GarbageList.length)];
            this.btndis =false;     //重启交互
        }, 4000);
1.
2.
3.
4.
5.
6.
7.
8.
9.

        this.theround += 1;
        if(20 == this.theround) {
            var score1 = this.player1.theCorrect - this.player1.theWrong;
            var score2 = this.player2.theCorrect - this.player2.theWrong;
            console.info("比分 ———— " + score1 + " : " + score2);
            if(score1 > score2) {
                this.result = "玩家一获胜";
            }
            else if(score1 < score2) {
                this.result = "玩家二获胜";
            }
            else {
                this.result = "双方打平";
            }
            this.popup = true;
            return;
        }
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.

    GameRestart() {
        this.player1.theCorrect = 0;
        this.player1.theWrong = 0;
        this.player2.theCorrect = 0;
        this.player2.theWrong = 0;
        this.theround = 0;
        this.popup = false;
        this.result = "";
        this.tipshow = false;
        this.garbage = GarbageList[Math.floor(Math.random()*GarbageList.length)];
        this.btndis = false;
    },
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.

    GameExit() {
        router.replace({
            uri: "pages/index/index"
        })
    },
1.
2.
3.
4.
5.

export let GarbageList =  [
    {
        name: "卫生卷纸",       //垃圾名称
        type: 3,        //垃圾类型
        src: "common/garbages/LJ000.png"        //图片资源路径
    },

    //省略中间的若干数据……

    {
        name: "遥控器",
        type: 1,
        src: "common/garbages/LJ116.png"
    },
]

export default GarbageList;
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.

import GarbageList from "../../common/GarbageList.js";
1.

        this.garbage = GarbageList[Math.floor(Math.random()*GarbageList.length)];
1.