js练习做一个简单的石头剪刀布的小游戏

最新推荐文章于 2024-07-30 22:36:34 发布

a浮云

最新推荐文章于 2024-07-30 22:36:34 发布

阅读量363

点赞数 2

分类专栏：用js代码实现一个小游戏文章标签： js javascript css

本文链接：https://blog.csdn.net/you_very_brave/article/details/117037376

版权

用js代码实现一个小游戏专栏收录该内容

1 篇文章 0 订阅

订阅专栏

###在该练习中我们运用到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;
        height: 200px;
        opacity: 0.4;
    }
    .footer{
        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>
    window.onload =function(){
        var wrap = document.getElementsByClassName('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){
                        case 0://电脑为布
                        alert("平手");
                        document.getElementById("lose").innerHTML=++l;
                        break;
                        case -1://电脑为石头
                        alert("胜利");
                        document.getElementById("win").innerHTML=++w;
                        break;
                        case -2://电脑为剪刀
                        alert("失败");
                        document.getElementById("sci").innerHTML=++s;
                        break;	
                    }
                }else if(imgs[num].alt == 'rock'){
                    switch(wrap.offsetLeft/200){
                        case 0://电脑为布
                        alert("失败");
                        document.getElementById("lose").innerHTML=++l;
                        break;
                        case -1://电脑为石头
                        alert("平手");
                        document.getElementById("win").innerHTML=++w;
                        break;
                        case -2://电脑为剪刀
                        alert("胜利");
                        document.getElementById("sci").innerHTML=++s;
                        break;	
                    }

                }else if(imgs[num].alt == 'scissor'){
                    switch(wrap.offsetLeft/200){
                        case 0://电脑为布
                        alert("胜利");
                        document.getElementById("lose").innerHTML=++l;
                        break;
                        case -1://电脑为石头
                        alert("失败");
                        document.getElementById("win").innerHTML=++w;
                        break;
                        case -2://电脑为剪刀
                        alert("平手");
                        document.getElementById("sci").innerHTML=++s;
                        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>

获取图片地址
http://47.95.251.111/js-demo/%e7%9f%b3%e5%a4%b4%e5%89%aa%e5%88%80%e5%b8%83/img1/

a浮云

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
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-
复制链接

扫一扫

专栏目录