js练习做⼀个简单的⽯头剪⼑布的⼩游戏###在该练习中我们运⽤到setInteval(handel,time)间歇调⽤来实现
代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>⽯头剪⼑布</title>
</head>
<style>
*{
margin:0;
padding:0;
list-style: none;
}
.content{
margin:0 auto;
width:1000px;
height:1000px;
border:1px solid red;
background-color: #999;
text-align: center;
font-size:30px;
}
.imgs{
width:200px;
height:200px;
margin:100px;
overflow: hidden;
position: relative;
}
.imgs .wrap{
position: absolute;
width:600px;
height:200px;
left:0;
}
.imgs .wrap img{
margin:0;
width:200px;
height:200px;
}
.user{
width:1000px;
height:300px;
background-color: aquamarine;
/* border: 1px solid blue; */
}
.user div{
float: left;
width:250px;
height:250px;
margin-top:30px;
margin-left:50px;
/
*  */
}
.user img{
width:200px;
width:200px;
height:200px;
opacity:0.4;
}
.footer{
eval是做什么的width:500px;
height:100px;
margin-top:50px;
}
ul{
width:250px;
height:50px;
text-align: center;
background-color: red;
margin-left:375px;
}
li{
display: inline;
text-align: center;
}
span{
width:70px;
float: left;
background-color: red;
}
</style>
<script>
var wrap = ElementsByClassName('wrap')[0] var imgs = document.images
for(var i=3;i<imgs.length;i++){
imgs[i].onmouseover =(function(num){
return function(){
imgs[num].style.opacity =1.0
}
})(i)
imgs[i].onmouseout =(function(num){
return function(){
imgs[num].style.opacity =0.4
}
})(i)
}
function run(){
wrap.style.marginLeft =0+'px'
// console.log(wrap.offsetLeft)
var id =setInterval(function(){
wrap.style.marginLeft = wrap.offsetLeft -200+'px' if(wrap.offsetLeft<=-600){
clearInterval(id)
run();
}
},100)
}
run();
var s=0;
var l=0;
var w=0;
for(var j=3;j<imgs.length;j++){
imgs[j].onclick =(function(num){
return function(){
if(imgs[num].alt =='paper'){
switch(wrap.offsetLeft/200){
switch(wrap.offsetLeft/200){
case0://电脑为布
alert("平⼿");
break;
case-1://电脑为⽯头
alert("胜利");
break;
case-2://电脑为剪⼑
alert("失败");
break;
}
}else if(imgs[num].alt =='rock'){
switch(wrap.offsetLeft/200){
case0://电脑为布
alert("失败");
break;
case-1://电脑为⽯头
alert("平⼿");
break;
case-2://电脑为剪⼑
alert("胜利");
break;
}
}else if(imgs[num].alt =='scissor'){
switch(wrap.offsetLeft/200){
case0://电脑为布
alert("胜利");
break;
case-1://电脑为⽯头
alert("失败");
break;
case-2://电脑为剪⼑
alert("平⼿");
break;
}
}
}
})(j)
}
}
</script>
<body>
<div class="content">
<strong>电脑玩家</strong><br>
<div class="imgs">
<div class="wrap">
<img src="img1/paper.jpg" alt=""><img src="img1/rock.jpg" alt=""><img src="img1/scissor.jpg" alt=""> </div>
</div>
<strong>玩家</strong><br>
<div class="user">
<div><img src="img1/paper.jpg" alt="paper"></div>
<div><img src="img1/rock.jpg" alt="rock"></div>
<div><img src="img1/scissor.jpg" alt="scissor"></div>
</div>
<div class="footer">
<ul>
<li><span><b>胜利</b></span></li>
<li><span><b>平⼿</b></span></li>
<li><span><b>失败</b></span></li>
</ul>
<ul >
<li><span id="win"><b>0</b></span></li>
<li><span id="sci"><b>0</b></span></li>
<li><span id="lose"><b>0</b></span></li>
</ul>
</div>
</div>
</body>
</html>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。