JQuery模拟石头剪刀布

最新推荐文章于 2023-04-13 09:50:01 发布

bling flower

最新推荐文章于 2023-04-13 09:50:01 发布

阅读量426

点赞数

本文链接：https://blog.csdn.net/C05230/article/details/108439240

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div#outer{
            width: 500px;
            height: 500px;
            background-color: burlywood;
            margin: 10px auto;
            text-align:center;
        }
        img{
            width: 150px;
            height: 100px;
            border: 2px solid yellow;
        }
        div#center div{
            float: left;
            margin: 0 6px;
            opacity: 0.7;
        }
        div#center div:hover{
            opacity: 1;

        }
        h4{
            clear: left;
            margin-bottom: 70px;
        }
        div#bottom div{
            width: 350px;
            height: 30px;
            margin: 0 auto;
            background-color: yellow;
        }
        div#bottom p{
            width: 100px;
            height: 30px;
            color: red;
            float: left;
            margin: 0 5px;

        }


    </style>
    <script>
        window.onload=function(){
            var arr=['paper.jpg','rock.jpg','scissor.jpg'];
            var img=document.images[0];
            
            function handler(){
                var random=Math.floor(Math.random()*arr.length);
                img.src='./images/'+arr[random];
            }
            setInterval(handler,100)

            var imgs=document.getElementsByClassName('img');
            var win=0;
            var lose=0;
            var pace=0;
            var windom=document.getElementById('win');
            var losedom=document.getElementById('lose');
            var pacedom=document.getElementById('pace');
            for(var i=0;i<imgs.length;i++){
                imgs[i].onclick=function(){
                    var user=document.images[0].src
                    if(user.indexOf('paper')!=-1){
                        //电脑玩家为布
                        if(this.alt==0){
                            //当前用户为石头
                            alert('你输了');
                            losedom.innerHTML=lose+1;
                        }else if(this.alt==1){
                            //当前用户为剪刀
                            alert('你赢了')
                            windom.innerHTML=win+1;
                        }else{
                            //当前用户为布
                            alert('平局');
                            pacedom.innerHTML=pace+1;
                        }
                    }else if(user.indexOf('rock')!=-1){
                        //电脑玩家为石头
                        if(this.alt==0){
                            //当前用户为石头
                            alert('平局');
                            pacedom.innerHTML=pace++;
                        }else if(this.alt==1){
                            //当前用户为剪刀
                            alert('你输了')
                            losedom.innerHTML=lose++;
                        }else{
                            //当前用户为布
                            alert('你赢了')
                            windom.innerHTML=win++;
                        }
                    }else{
                        //电脑玩家为剪刀
                        if(this.alt==0){
                            //当前用户为石头
                            alert('你赢了');
                            windom.innerHTML=win++;
                        }else if(this.alt==1){
                            //当前用户为剪刀
                            alert('平局');
                            pacedom.innerHTML=pace++;
                        }else{
                            //当前用户为布
                            alert('你输了')
                            losedom.innerHTML=lose++;
                        }
                    }
                }

            }


        }
    </script>
</head>
<body>
    <div id="outer">
        <h1>石头剪刀布</h1>
        <div>
            <h3>电脑</h3>
            <div id="user">
                <img src="./images/paper.jpg" style="border: 2px solid red;" alt="">
            </div>
        </div>
        <div id="center">
            <h3>玩家(请选择)</h3>
            <div>
                <img src="./images/rock.jpg" alt="0" class="img">
            </div>
            <div>
                <img src="./images/scissor.jpg" alt="1" class="img">
            </div>
            <div>
                <img src="./images/paper.jpg" alt="2" class="img">
            </div>       
        </div>
        <h4></h4>
        <div id="bottom">
            <div>
                <p>胜利</p>
                <p>失败</p>
                <p>平局</p>
            </div>
            <div>
                <p id="win">0</p>
                <p id="lose">0</p>
                <p id="pace">0</p>
            </div>
        </div>

    </div>
</body>
</html>

运行效果图：
在这里插入图片描述
用到的图片：
https://gitee.com/flower-523/jquery/tree/master/case/images