石头、剪刀布游戏

最新推荐文章于 2024-12-22 21:12:16 发布

shentj01

最新推荐文章于 2024-12-22 21:12:16 发布

阅读量567

点赞数 1

CC 4.0 BY-SA版权

文章标签：简单实现石头剪刀布游戏

本文链接：https://blog.youkuaiyun.com/stj1_/article/details/78055711

这里我简单写下实现步骤：

首先html页面

<div>
    <b>Computer</b><br/>
    <img src="rock.jpg" alt="rock" style="opacity:1.0"><br/>
    <b>Player</b><br/>
    <img src="scissor.jpg" id="scissor"  onmouseover="myover(this)" onmouseout="myout(this)" onclick="myclick(this)">
    <img src="rock.jpg" id="rock" onmouseover="myover(this)" onmouseout="myout(this)" onclick="myclick(this)">
    <img src="paper.jpg" id="paper"  onmouseover="myover(this)" onmouseout="myout(this)" onclick="myclick(this)"><br>
    <ul>
        <li><span><b>Win</b></span></li>
        <li><span><b>Draw</b></span></li>
        <li><span><b>Lose</b></span></li>
    </ul>
    <ul style="clear:left">
        <li><span id="win"><b>0</b></span></li>
        <li><span id="draw"><b>0</b></span></li>
        <li><span id="lose"><b>0</b></span></li>
    </ul>
</div>

其次是css样式

 div{
            text-align:center;
            margin-left:auto;
            padding:9px;
            float:left;
        }
        img{
            height:100px;
            margin:2px;
            border:3px solid #00ff66;
            opacity:0.4;
        }
        ul{
            list-style-type:none;
            margin:auto;
            margin-bottom:5px;
            position:relative;
            left:80px;
        }
        li{
            display:inline;
        }
        span{
            float:left;
            padding:3px;
            color:red;
            width:70px;
        }
    </style>

最后着重说一下js实现过程

//声明变量
var i=0，w=0,d=0,i=0;
x=document.getElementsByTagName("img")[0];
function myover(obj)
    {
        obj.style.opacity="1.0";
    }
    function myout(obj)
    {
        obj.style.opacity="0.4";
    }
    function myclick(obj)
    {
        if(obj.id=="scissor")
            switch(i%3)
            {
                case 0:

                    alert("Draw!");
                    document.getElementById("draw").innerHTML=++d;
                    break;
                case 1:

                    alert("Lose!");
                    document.getElementById("lose").innerHTML=++l;
                    break;
                case 2:

                    alert("Win!");
                    document.getElementById("win").innerHTML=++w;
                    break;
            }
        else if(obj.id=="rock")
            switch(i%3)
            {
                case 0:

                    alert("Win!");
                    document.getElementById("win").innerHTML=++w;
                    break;
                case 1:

                    alert("Draw");
                    document.getElementById("draw").innerHTML=++d;
                    break;
                case 2:

                    alert("Lose!");
                    document.getElementById("lose").innerHTML=++l;
                    break;
            }
        else if(obj.id=="paper")
            switch(i%3)
            {
                case 0:

                    alert("Lose!");
                    document.getElementById("lose").innerHTML=++l;
                    break;
                case 1:

                    alert("Win!");
                    document.getElementById("win").innerHTML=++w;
                    break;
                case 2:

                    alert("Draw!");
                    document.getElementById("draw").innerHTML=++d;
                    break;
            }
    }
    function myload()
    {
        i=i+1;
        m=i%3;

        switch(m)
        {
            case 0:
                x.src="scissor.jpg";
                break;
            case 1:
                x.src="rock.jpg";
                break;
            case 2:
                x.src="paper.jpg";
                break;
        }
        t=setTimeout(function(){myload()},100);
    }
    myload();