window对象--猜拳游戏

最新推荐文章于 2020-09-26 14:29:26 发布

huahongcui

最新推荐文章于 2020-09-26 14:29:26 发布

阅读量402

点赞数

分类专栏： JavaScript window对象猜拳游戏算法文章标签： JavaScript 函数 window对象猜拳游戏算法对象

本文链接：https://blog.csdn.net/huahongcui/article/details/51382398

版权

JavaScript window对象猜拳游戏算法专栏收录该内容

1 篇文章 0 订阅

订阅专栏

//window对象--猜拳游戏

<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>

//外部样式：

body{

margin: 0;
padding: 0;
}
div,p,input,select,option{
margin: 0;
padding: 0;
}
.content{
background: pink;
width: 510px;
height: 500px;
margin: 20px auto;
padding: 20px 50px;
}
.left{
float: left;
width: 200px;
height: 200px;
border: 2px solid green;
text-align: center;
line-height: 2em;
}
#you-img{
width: 120px;
height: 120px;
margin: 20px auto;
}
.center{
float: left;
width: 100px;
height: 200px;
border-top: 2px solid green;
border-bottom: 2px solid green;
text-align: center;
line-height: 200px;
font-size: 25px;
font-weight: bold;
}
.right{
float: left;
width: 200px;
height: 200px;
border: 2px solid green;
text-align: center;
line-height: 2em;
}
.right #computer-img{
width: 120px;
height: 120px;
margin: 20px auto;
}
#current-img{
width: 120px;
height: 120px;
margin: 20px auto;
}
#jieguo{
width: 504px;
height: 50px;
border: 2px solid green;
clear: both;
border-top: none;
text-align: center;
line-height: 50px;
font-size: 25px;
font-weight: bold;
color: red;
}
.center1{
float: left;
width: 100px;
height: 200px;
text-align: center;
line-height: 200px;
border-bottom: 2px solid green;
font-size: 25px;
font-weight: bold;
}
.choice{
float: left;
width: 200px;
height: 200px;
border: 2px solid green;
text-align: center;
line-height: 2em;
border-top: none;
}
.choose{
float: left;
width: 200px;
height: 200px;
border: 2px solid green;
border-top: none;
text-align: center;
line-height: 2em;
}
#button1{
margin-top: 80px;

}
.allresult{
width: 504px;
height: 30px;
border: 2px solid green;
border-top: none;
text-align: center;
line-height: 30px;
clear: both;
}

//JS代码：

//模拟电脑出拳

//数组保存电脑切换的图片

var arrimg=[];
arrimg[0]='jiandao.png';
arrimg[1]='shitou.png';
arrimg[2]='bu.png';

var computerValue=Math.floor(Math.random()*3);
//获取电脑出拳的图片的地址
document.getElementById('computer-img').src=arrimg[computerValue];
//获取你出拳切换的图片ID
var myImgObj=document.getElementById('you-img');
//执行图片切换函数
changeImg(myImgObj,selectValue);
//执行结果输赢函数，参数用value值进行比较
compare(selectValue,computerValue);
}
//结果输赢比较函数
function compare(gesture1,gesture2){

var result=gesture1+' '+gesture2;

//0代表剪刀，1代表石头，2代表布

switch(result){
case '02':
case '10':
case '21':
wincount++;
document.getElementById('win').innerHTML=' '+wincount;
document.getElementById('jieguo').innerHTML='你赢了！';
alert('您赢了！');
break;
case '01':
case '12':
case '20':
failcount++;
document.getElementById('fail').innerHTML=' '+failcount;
document.getElementById('jieguo').innerHTML='你输了！';
alert('您输了！');
break;
default:
drawcount++;
document.getElementById('draw').innerHTML=' '+drawcount;
document.getElementById('jieguo').innerHTML='平局！';
alert('平局！');
break;
}
allcount++;
document.getElementById('allcount').innerHTML=' '+allcount;
}

</script>
</head>
<body>
<div class="content">
<div class="left">
<p>你</p>
<img src="jiandao.png" id="you-img"/>
</div>
<div class="center">VS</div>
<div class="right">
<p>电脑</p>
<img src="shitou.png" id="computer-img">
</div>
<div id="jieguo"></div>
<div class="choice">
<p>你选择了</p>
<img src="bu.png" id="current-img">
</div>
<div class="center1">choke</div>
<div class="choose">
请选择出拳：<select name="请选择" id="select" οnchange="select(this)">
<option value="-1">请选择</option>
<option value="0">剪刀</option>
<option value="1">石头</option>
<option value="2">布</option>
</select>
<input type="button" value="想好了出拳" id="button1" οnclick="start()" /><br/>
</div>
<div class="allresult">总局数：<span id="allcount">0</span>    赢：<span id="win">0</span>    输：<span id="fail">0</span>    平：<span id="draw">0</span></div>
</div>
</body>

</html>

//效果截图：

huahongcui

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
window对象--猜拳游戏

//window对象--猜拳游戏Document//外部样式：body{margin: 0;padding: 0;}div,p,input,select,option{margin: 0;padding: 0;}.content{background: pink;width: 510px;height: 500px
复制链接

扫一扫