js实现剪刀石头布小游戏

详细演示视频点击此处观看

这两天用js做了个剪刀石头布的小游戏，实现的是用户与电脑进行对战，原理比较简单，在此记录一下。

下面先说一下游戏的流程：

1、进入游戏先要设置自己的昵称：

2、进入游戏，选择自己的手势：

3、选好之后会有你的信息显示，然后点“比一比”即可
4、显示结果，包含电脑的选择信息、胜负情况以及比分情况：

5、对应的点击各种手势之后会有背景音乐，以及结果出来之后会有胜负不同的背景音乐

然后下面讲述一下实现的代码，主要是script逻辑部分：

script内容：

<script>
        var situationPlayerName=document.getElementById("situation_player_name");
        var situationPlayerScore=document.getElementById("situation_player_score");
        var situationComputerName=document.getElementById("situation_computer_name");
        var situationComputerScore=document.getElementById("situation_computer_score");
        var result1=document.getElementById("result1");
        var result2=document.getElementById("result2");
        var resultBgm=document.getElementById("result_bgm");
        var clickBgm=document.getElementById("click_bgm");
        var raceBgm=document.getElementById("race_bgm");
        const PLAY_NAME = prompt("请输入你的名字：");
        const COMPUTER_NAME = "Alphgo";
        const MAX_WIN_COUNT = 3;
        const STONE = 0;
        const SCISSORS = 1;
        const PAPER = 2;
        var playerWinCount = 0;
        var computerWinCount = 0;
        var playerChoice;
        var computerChoice;
        const NAMES = ["石头", "剪刀", "布"];

        //获取用户选择的手势
        function select(tempSelect){
            clickBgm.src="./voice/click1.mp3";
            clickBgm.play();
            playerChoice=tempSelect;
            console.log(playerChoice);
            //输出玩家的手势信息
            console.log(PLAY_NAME + ":" + NAMES[playerChoice]);
            situationPlayerName.innerHTML=PLAY_NAME + ":";
            situationPlayerScore.innerHTML=NAMES[playerChoice]
        }

        //获得结果
        function race() {
                if ((playerChoice !== 0) && (playerChoice !== 1) && (playerChoice !== 2)) {
                    alert("手势选择错误，请重新选择！");
                    return;
                }
                //电脑随机选择手势
                computerChoice = ~~(Math.random() * (PAPER + 1 - STONE) + STONE);
                //输出电脑的手势信息
                console.log(COMPUTER_NAME + ":" + NAMES[computerChoice]);
                situationComputerName.innerHTML=COMPUTER_NAME + ":";
                situationComputerScore.innerHTML=NAMES[computerChoice];
                //比较并输出结果
                if (playerChoice === STONE) {
                    switch (computerChoice) {
                        case STONE:
                            resultBgm.src = "./voice/whilstle1.mp3";
                            resultBgm.play();
                            console.log("平局");
                            result1.innerHTML="平局";
                            break;
                        case SCISSORS:
                            resultBgm.src = "./voice/smile1.mp3";
                            resultBgm.play();
                            console.log("玩家胜利");
                            result1.innerHTML="玩家胜利";
                            playerWinCount++;
                            break;
                        case PAPER:
                            resultBgm.src = "./voice/weep1.mp3";
                            resultBgm.play();
                            console.log("电脑胜利");
                            result1.innerHTML="电脑胜利";
                            computerWinCount++;
                            break;
                    }
                } else if (playerChoice === SCISSORS) {
                    switch (computerChoice) {
                        case STONE:
                            resultBgm.src = "./voice/weep1.mp3";
                            resultBgm.play();
                            console.log("电脑胜利");
                            result1.innerHTML="电脑胜利";
                            computerWinCount++;
                            break;
                        case SCISSORS:
                            resultBgm.src = "./voice/whilstle1.mp3";
                            resultBgm.play();
                            console.log("平局");
                            result1.innerHTML="平局";
                            break;
                        case PAPER:
                            resultBgm.src = "./voice/smile1.mp3";
                            resultBgm.play();
                            console.log("玩家胜利");
                            result1.innerHTML="玩家胜利";
                            playerWinCount++;
                            break;
                    }
                } else {
                    switch (computerChoice) {
                        case STONE:
                            resultBgm.src = "./voice/smile1.mp3";
                            resultBgm.play();
                            console.log("玩家胜利");
                            result1.innerHTML="玩家胜利";
                            playerWinCount++;
                            break;
                        case SCISSORS:
                            resultBgm.src = "./voice/weep1.mp3";
                            resultBgm.play();
                            console.log("电脑胜利");
                            result1.innerHTML="电脑胜利";
                            computerWinCount++;
                            break;
                        case PAPER:
                            resultBgm.src = "./voice/whilstle1.mp3";
                            resultBgm.play();
                            console.log("平局");
                            result1.innerHTML="平局";
                            break;
                    }
                }
                result2.innerHTML="当前比分：" + PLAY_NAME + " VS " + COMPUTER_NAME+"="+ playerWinCount + ":" + computerWinCount;
        }


    </script>

三个手势分别是用0，1，2的数字来代替的，然后电脑出选择手势靠的是产生随机数，然后就可以跟用户选择的数字进行对比，这样就可以得出胜负结果了。
游戏的音频文件和图片文件因为文章里不好放上来，所以如果需要完整压缩包的可以v我(备注来源)：ES-Lad。

相关资源下载