js简单实现剪刀石头布

最新推荐文章于 2024-09-14 11:23:20 发布

随风小薇

最新推荐文章于 2024-09-14 11:23:20 发布

阅读量3.7k

点赞数 3

分类专栏：笔记文章标签：剪刀石头布 js小案例

本文为博主原创文章，未经博主允许不得转载

本文链接：https://blog.csdn.net/qq_39197547/article/details/85858300

版权

笔记专栏收录该内容

47 篇文章 1 订阅

订阅专栏

剪刀石头布小游戏的规则很简单，接下来就简单实现一下啊

div + css 随便写写

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <link rel="stylesheet" href="../css/mystyle.css"/>
    <script src="../js/panduan.js" type="text/javascript"></script>
    <title>石头剪子布</title>
</head>
<body>
    <div class="loWrapper">
        先在两边点击想要出的石头、剪子、布，再点击中间比较按钮<br/>谁大谁的背景颜色会变为天蓝色，小的白色，相同则都为红色
        <div id="loLeftBox">
            <div id="loLeftImg">
                <img src="../images/0.jpg" onclick="show(0,'loBox')"/>
                <img src="../images/1.jpg" onclick="show(1,'loBox')"/>
                <img src="../images/2.jpg" onclick="show(2,'loBox')"/>
            </div>
            <div id="loLeftShow">
                <div id="loBox"></div>
            </div>
        </div>
        <div class="loMainBox">
            <div id="loButton" onclick="bijiao()">点击比较</div>
        </div>
        <div id="loRightBox">
             <div id="loRightShow">
                 <div id="loBox2"></div>
             </div>
            <div id="loRightImg">
                <img src="../images/0.jpg" onclick="show(0,'loBox2')"/>
                <img src="../images/1.jpg" onclick="show(1,'loBox2')"/>
                <img src="../images/2.jpg" onclick="show(2,'loBox2')"/>
            </div>
        </div>
    </div>
</body>
</html>

css

.loWrapper{
    width: 710px;
    height: 500px;
    position: relative;
    top: 50px;
    margin: 0 auto;
    border: 1px solid #000;
    text-align: center;
    font-weight: bold;
}
#loLeftBox,#loRightBox{
    width: 300px;
    height: 450px;
    position: absolute;
    background-color: white;
}
#loRightBox{
    left: 410px;
}
#loLeftBox #loLeftImg{
    width: 150px;
    height: 450px;
    position: absolute;
    border-right: 1px solid #333;
}
#loLeftBox #loLeftImg img{
    margin: 15px;
    cursor: pointer;
}
#loLeftBox #loLeftShow{
    width: 150px;
    height: 450px;
    position: absolute;
    left: 150px;
}
#loLeftBox #loLeftShow #loBox{
    width: 120px;
    height: 120px;
    margin: 165px 15px;
    border: 1px solid green;
    border-radius: 60px;
}
.loMainBox{
    width: 80px;
    height: 450px;
    position: absolute;
    left: 315px;
}
.loMainBox #loButton{
    width: 80px;
    height: 40px;
    line-height: 40px;
    background-color: orange;
    text-align: center;
    position: relative;
    margin: 210px 0;
    cursor: pointer;
    border-radius: 10px;
    font-weight: normal;
}
#loRightBox #loRightShow{
    width: 150px;
    height: 450px;
    position: absolute;
}
#loRightBox #loRightShow #loBox2{
    width: 120px;
    height: 120px;
    margin: 165px 15px;
    border: 1px solid green;
    border-radius: 60px;
}
#loRightBox #loRightImg{
    width: 150px;
    height: 450px;
    position: absolute;
    left: 150px;
    border-left: 1px solid #333;
}
#loRightBox #loRightImg img{
    margin: 15px;
    cursor: pointer;
}
.setBgColor{
    background-color: skyblue;
}

js部分

/**
 * 选择图片
 * **/
function show(num,idName){
    var loBox=document.getElementById(idName);
    loBox.style.backgroundImage = 'url(../images/' + num + '.jpg';
}
/**
 * 比较大小 规则
 * * */
function bijiao() {
    var loBox = document.getElementById('loBox');
    var loBox2 = document.getElementById('loBox2');
    var loBoxUrl = parseInt((loBox.style.backgroundImage).match(/\d/));// '\d'查找数字
    var loBoxUrl2 = parseInt((loBox2.style.backgroundImage).match(/\d/));
    if ((loBoxUrl == 0 && loBoxUrl2 == 0) ||(loBoxUrl == 1 && loBoxUrl2 == 1) ||(loBoxUrl == 2 && loBoxUrl2 == 2)) {
        changeBackgroundColer('red','red');
    } else if ((loBoxUrl == 1 && loBoxUrl2 == 0)||(loBoxUrl == 2 && loBoxUrl2 == 1)||(loBoxUrl == 0 && loBoxUrl2 == 2)) {
        changeBackgroundColer('white','skyblue');
    } else {
        changeBackgroundColer('skyblue','white');
    }
}
/**
 * 颜色变化
 */
function changeBackgroundColer(color1,color2){
    document.getElementById('loLeftBox').style.backgroundColor = color1;
    document.getElementById('loRightBox').style.backgroundColor = color2;
}

效果如下：