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

.container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    background-image: url("/common/bg.png");
    background-size: cover;
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.

    tobattlemode() {
        router.replace({
            uri: "pages/battlemode/battlemode"
        })
    },

    torushmode() {
        router.replace({
            uri: "pages/rushmode/rushmode"
        })
    }
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.

                <div class="state">
                    <image class="HP" src="{{ player_1.HP1 }}"></image>
                    <image class="HP" src="{{ player_1.HP2 }}"></image>
                    <image class="HP" src="{{ player_1.HP3 }}"></image>
                    <text style="margin-left: 70px;">得分：{{ player_1.score }}</text>
                </div>
1.
2.
3.
4.
5.
6.

                <div style="flex-direction: column; align-items: center;">
                    <image class="GarbageType" src="common/Recyclable.jpg" onclick="typeclick({{player_1}}, 1)"></image>
                    <div>
                        <image class="GarbageType" src="common/FoodWaste.jpg" onclick="typeclick({{player_1}}, 2)"></image>
                        <image class="garbage" src="{{player_1.garbage.src}}"></image>
                        <image class="GarbageType" src="common/ResidualWaste.jpg" onclick="typeclick({{player_1}}, 3)"></image>
                    </div>
                    <image class="GarbageType" src="common/HazardousWaste.jpg" onclick="typeclick({{player_1}}, 4)"></image>
                </div>
1.
2.
3.
4.
5.
6.
7.
8.
9.

        player_1: {
            HP: 3,      //剩余容错次数
            HP1: "common/heart.png",
            HP2: "common/heart.png",
            HP3: "common/heart.png",
            garbage: {
                name: "卫生卷纸",       //垃圾名称
                type: 3,        //垃圾类型
                src: "common/garbages/LJ000.png",       //图片资源路径
            },
            score: 0,       //得分
            disabled: false,        //出局标识符
        },
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.

    onInit() {
        this.player_1.garbage = GarbageList[Math.floor(Math.random()*GarbageList.length)];
        this.player_2.garbage = GarbageList[Math.floor(Math.random()*GarbageList.length)];
    },
1.
2.
3.
4.

    typeclick(role, choosetype) {
        console.info(role.garbage.name + "——" + role.garbage.type);
        if(choosetype == role.garbage.type) {
            role.score += 10;
        }
        else {
            role.HP -= 1;
            this.HPChange(role);
        }
        role.garbage = GarbageList[Math.floor(Math.random()*GarbageList.length)];
    },
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.

    HPChange(role) {
        if(3 == role.HP) {
            role.HP1 = role.HP2 = role.HP3 = "common/heart.png";
        }
        if(2 == role.HP) {
            role.HP3 = "common/broken.png";
        }
        if(1 == role.HP) {
            role.HP2 = "common/broken.png";
        }
        if(0 == role.HP) {
            role.HP1 = "common/broken.png";
            role.disabled = true;
        }
    },
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.

        if((this.player_1.HP == 0) && (this.player_2.HP == 0)) {
            if(this.player_1.score > this.player_2.score) {
                this.ScoreResult = "玩家1获胜";
            }
            else if(this.player_1.score < this.player_2.score) {
                this.ScoreResult = "玩家2获胜";
            }
            else {
                this.ScoreResult = "平局";
            }
            var timeoutID = setTimeout(()=> {
                this.GameOver = true;
            }, 1000);
        }
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.

    <div class="gameover" show="{{GameOver}}">
        <text style="font-size: 30px;">比赛结果</text>
        <text style="font-size: 24px;">{{ScoreResult}}</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.

    GameRestart() {
        this.player_1.HP = 3;
        this.HPChange(this.player_1);
        this.player_2.HP = 3;
        this.HPChange(this.player_2);
        this.player_1.score = 0;
        this.player_2.score = 0;
        this.GameOver = false;
        this.player_1.garbage = GarbageList[Math.floor(Math.random()*GarbageList.length)];
        this.player_2.garbage = GarbageList[Math.floor(Math.random()*GarbageList.length)];
        this.player_1.disabled = false;
        this.player_2.disabled = false;
    },
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.

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