利用条件语句实现简单猜拳小游戏

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

</head>

    <style>

        .box{

            margin: 5px auto;

            width: 800px;

        }

        #left,#right{

            width: 400px;

            height: 200px;

            background-image:url(../img/a.jpg);

            margin: 50px auto;

            float: left;

        }

        #right{

            transform: scale(-1,1);

            float: left;

        }

        #divs{

            float:left;

            font-size: 40px;

            color: red;

            margin-left: 100px;

            }

    </style>

    

<body>

    <div class="box">

        <div id="left"></div>

        <div id="right"></div>

    

    <div style="float: left;">

        <button id="bn0">剪刀</button>

        <button id="bn1">石头</button>

        <button id="bn2">布</button>

    </div>

    <div id="divs"></div>

</div>

    <script>

        // var num=Math.random()*10;//随机数后面乘以几就是随机到几

        // num=parseInt(num);

        var left=document.getElementById("left");

        var right=document.getElementById("right");

        

        var bn0=document.getElementById("bn0");

        var bn1=document.getElementById("bn1");

        var bn2=document.getElementById("bn2");

       

        var divs=document.getElementById("divs");

        bn0.οnclick=function(){

            //点击剪刀按钮

            var n=Math.random()*3;

            n=parseInt(n);

            // 得到随机数0.1.2

            left.style.backgroundPositionY="0px";

            if(n===0){

                right.style.backgroundPositionY="0px";

                divs.innerHTML="平局";

            }else if(n===1){

                right.style.backgroundPositionY="-200px";

                divs.innerHTML="输了";

            }else if(n===2){

                right.style.backgroundPositionY="-400px";

                divs.innerHTML="赢了";

            }

        };

        // 点击石头时

        bn1.οnclick=function(){

            var n=Math.random()*3;

            n=parseInt(n);

            left.style.backgroundPositionY="-200px";

            if(n===0){

                right.style.backgroundPositionY="0px";

                divs.innerHTML="赢了";

            }else if(n===1){

                right.style.backgroundPositionY="-200px";

                divs.innerHTML="平局";

            }else if(n===2){

                right.style.backgroundPositionY="-400px";

                divs.innerHTML="输了";

            }

        };

        // 点击布时

        bn2.οnclick=function(){

            var n=Math.random()*3;

            n=parseInt(n);

            left.style.backgroundPositionY="-400px";

            if(n===0){

                right.style.backgroundPositionY="0px";

                divs.innerHTML="输了";

            }else if(n===1){

                right.style.backgroundPositionY="-200px";

                divs.innerHTML="赢了";

            }else if(n===2){

                right.style.backgroundPositionY="-400px";

                divs.innerHTML="平局";

            }

        };

 

    </script>

</body>

</html>

猜拳

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值