无聊自己写的一个小游戏，超简单，易学易懂。不说了上效果
演示链接：http://www.bleale.com/1611/zxx/jsb/点击进入---->小游戏试玩地址（上线后发现图片丢失，也懒得修改了对付看吧）
玩时候点对应的剪刀石头布即可开始游戏
由于原生方法代码量大，所以案例引了一个jq
<script type="text/javascript" src="jquery-3.2.1.js"></script>
我引得是jq 如果需要可以连一下在线版
css代码==================================================
```
*{
margin: 0 auto;
}
```
.boss{
width:900px;
height: 400px;
background: #000;
color: #fff;
}
.left{
width: 40%;
height: 100%;
float: left;
display: flex;
flex-direction: column;
justify-content: center;
align-content: center;
}
.left p{
font-size: 20px;
height: 40px;
line-height: 40px;
}
.left span{
margin: 0 10px;
}
.right{
width: 60%;
height: 100%;
float: left;
}
.right_top{
width: 100%;
height: 50%;
}
.right_top_left{
width: 50%;
height: 100%;
float: left;
}
.right_top_right{
width: 50%;
height: 100%
float: left;
}
.right_bom{
display: flex;
flex-direction: row;
border: 1px solid #fff;
margin-right: 10px;
}
.right_bom span{
display: block;
flex: 1;
display: flex;
justify-content: center;
align-content: center;
}
```swift
css代码==================================================
html代码================================================
<div class="boss">
<div class="left">
<p>总的局数<span class="zong">0</span>局</p>
<p>胜利的局数<span class="shengli">0</span>局</p>
<p>失败的局数<span class="shibai">0</span>局</p>
<p>平局的局数<span class="ping">0</span>局</p>
</div>
<div class="right">
<div class="right_top">
<div class="right_top_left">
玩家:<span class="wanjia"></span>
</div>
<div class="right_top_right">
电脑:<span class="diannao"></span>
</div>
</div>
<div class="right_bom">
<span class="jiandao"><img src="图片1_03.jpg"/></span>
<span class="shitou"><img src="图片1_05.jpg"/></span>
<span class="bu"><img src="图片1_07.jpg"/></span>
</div>
</div>
</div>
html代码================================================
js代码=================================================
var arr=["剪刀","石头","布"]
var sum=0
var ouy=0
var oun=0
var aa=0
// 玩家选择剪刀时候
$(".jiandao").click(function(){
$(".wanjia").html("剪刀")
var a=Math.floor(Math.random()*3)
$(".diannao").html(arr[a])
if(a==0){
aa++
}else if(a==1){
oun++
}else{
ouy++
}
sum++
$(".zong").html(sum)
$(".shengli").html(ouy)
$(".shibai").html(oun)
$(".ping").html(aa)
})
// 玩家选择石头时候
$(".shitou").click(function(){
$(".wanjia").html("石头")
var a=Math.floor(Math.random()*3)
$(".diannao").html(arr[a])
if(a==1){
aa++
}else if(a==2){
oun++
}else{
ouy++
}
sum++
$(".zong").html(sum)
$(".shengli").html(ouy)
$(".shibai").html(oun)
$(".ping").html(aa)
})
// 玩家选择布时候
$(".bu").click(function(){
$(".wanjia").html("布")
var a=Math.floor(Math.random()*3)
$(".diannao").html(arr[a])
if(a==3){
aa++
}else if(a==0){
oun++
}else{
ouy++
}
sum++
$(".zong").html(sum)
$(".shengli").html(ouy)
$(".shibai").html(oun)
$(".ping").html(aa)
})
