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的数字来代替的，然后电脑出选择手势靠的是产生随机数，然后就可以跟用户选择的数字进行对比，这样就可以得出胜负结果了。
游戏的音频文件和图片文件因为文章里不好放上来，所以如果需要完整压缩包的可以私信留下你的联系方式。

相关资源下载

js实现剪刀石头布小游戏相关推荐

用Three.js写h5小游戏-3d飞机大战
用Three.js写h5小游戏-飞机大战博主的话运行图片目录路径![在这里插入图片描述](https://img-blog.csdnimg.cn/20190829103702978.jpg?x- ...
python拿什么做可视化界面好-手把手教你用Python做个可视化的“剪刀石头布”小游戏...
/1 前言/ 最近在学习PyQt5可视化界面,这是一个内容非常丰富的gui库,相对于tkinter库,功能更加强大,界面更加美观,操作也不难.于是我开始小试牛刀,用PyQt5做个可视化的"剪 ...
python人机猜拳游戏_Python实现剪刀石头布小游戏(与电脑对战)
具体代码如下所述: srpgame.py #!/urs/bin/env python import random all_choice = ['石头','剪刀','布'] win_list = [[' ...
使用JS实现2048小游戏
JS实现2048小游戏源码效果图: 代码如下,复制即可使用: (适用浏览器:360.FireFox.Chrome.Opera.傲游.搜狗.世界之窗. 不支持Safari.IE8及以下浏览器.) &l ...
html5猜数字游戏代码,js猜数字小游戏的简单实现代码
复制代码代码如下: 简易计算机 //获取随机数 function GetRandomNum(Min,Max) { var Range = Max - Min; var Rand = Math.ran ...
java剪刀石头布小游戏_JAVA实现“剪刀石头布”小游戏
JAVA实现"剪刀石头布"小游戏 import java.util.Random; import javax.swing.*; import java.awt.BorderLayo ...
python剪刀石头布小游戏源码下载_Python Tkinter实现剪刀石头布小游戏
Python Tkinter实现剪刀石头布小游戏发布时间:2020-10-26 14:56:52 来源:亿速云阅读:67 作者:Leah 本篇文章给大家分享的是有关Python Tkinter实现 ...
python实现剪刀石头布_用Python Tkinter实现剪刀石头布小游戏的方法
用Python Tkinter实现剪刀石头布小游戏的方法发布时间:2020-12-07 10:38:11 来源:亿速云阅读:90 作者:小新这篇文章将为大家详细讲解有关用Python Tkint ...
linux 剪刀石头布c语言,利用C语言编写“剪刀石头布”小游戏
前言大家好~ 我是一名C语言初学者,学了C语言基础后,我制作了一个小游戏:剪刀石头布. 希望大家能对我的思路和代码提出小Tips(eg.更简便的方法与程序) 我也会虚心接受大家的建议~ 一.游戏原理 ...

js实现剪刀石头布小游戏

js实现剪刀石头布小游戏相关推荐

最新文章

热门文章