js剪刀石头布(小游戏)

无聊自己写的一个小游戏,超简单,易学易懂。不说了上效果

演示链接: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)

})