H5+JavaScript 剪刀石头布小游戏完整代码

最新推荐文章于 2024-08-03 17:05:14 发布

find1star

最新推荐文章于 2024-08-03 17:05:14 发布

阅读量2.6k

点赞数

文章标签： JavaScript HTML CSS 游戏开发用户交互

本文链接：https://blog.csdn.net/find1star/article/details/126835907

版权

效果图：（单局游戏中可计数）

刚学JavaScript的时候做的，槽点太多了，就图一乐，别太较真

有精力的朋友可以自行改成jQuery版或者其他精简又高效写法，我比较懒就不改啦

HTML：

<!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">
    <link rel="shortcut icon" href="https://img.tukuppt.com/png_preview/00/08/92/ITzBK1O4hC.jpg!/fw/780"> 
    <title>石头剪刀布</title>
    <link rel="stylesheet" href="style.css">
    <script src="javaScript.js"></script>
</head>

<body>
    <div class="head">
        <h1>石头</h1>
        <h1>剪刀</h1>
        <h1>布</h1>
    </div>

    <div class="left">
        <h2>我的</h2>
        <image class="left_show" src="https://s3.bmp.ovh/imgs/2022/04/09/e322915527c2e78e.jpg" mode="widthFix"
            id="choose">
        </image>
        <div id="stats">
            胜：0 负：0 平：0
        </div>
    </div>

    <div class="right">
        <h2>电脑</h2>
        <image class="right_show" src="https://s3.bmp.ovh/imgs/2022/04/09/e322915527c2e78e.jpg" mode="widthFix"
            id="change">
    </div>

    <div class="bottom">
        <div>选择你的选项</div>
        <img class="show" src="https://s3.bmp.ovh/imgs/2022/04/09/e322915527c2e78e.jpg" id="paper" />

        <img class="show" src="https://s3.bmp.ovh/imgs/2022/04/09/7372bc211969aec4.jpg" id="jian" />

        <img class="show" src="https://s3.bmp.ovh/imgs/2022/04/09/e278c240c29a050d.jpg" id="stone" />

    </div>

    <button id="start">
        开始游戏
    </button>
    <span id="G">12</span>

    <div id="win">
        <h1>等待结果出现</h1>
    </div>
    <div id="last">
        <button id="contin">
            继续游戏
        </button>
        <button id="brek">
            退出游戏
        </button>
    </div>


</body>

</html>

CSS:

html {
    margin: 0 auto;
    min-width: 100px;
}

.head {
    display: flex;
    justify-content: center;
    margin: 50px;
}

h4 {
    margin: 10px;
}

.show {
    width: 100px;
}

.left {
    position: absolute;
    left: 0;
    border: 1px solid black;
    text-align: center;
    width: 350px;
    height: 350px;
}

.left_show {
    width: 200px;
    height: 200px;
}

.right {
    position: absolute;
    right: 0;
    border: 1px solid black;
    text-align: center;
    width: 350px;
    height: 350px;
}

.right_show {
    width: 200px;
    height: 200px;
}

.bottom {

    margin: 0 auto;
    text-align: center;
    visibility: hidden;
}

#stop,
#out,
#start {
    display: flex;
    margin: 0 auto;
    width: 200px;
    height: 50px;
    text-align: center;
    padding: 15px 70px 15px 70px;
}

#win {
    visibility: hidden;
    margin: 0 auto;
    text-align: center;
}

#last {
    text-align: center;
}

#contin,
#brek {
    visibility: hidden;
    margin: 0 auto;
    text-align: center;
    border: 1px solid black;
    width: 150px;
    height: 40px;
}

#G{
    visibility: hidden;
}

JavaScript:

window.onload = function () {
    var Iwin = 0;
    var Ifal = 0;
    var IP = 0;
    var array = ["https://s3.bmp.ovh/imgs/2022/04/09/e322915527c2e78e.jpg", "https://s3.bmp.ovh/imgs/2022/04/09/7372bc211969aec4.jpg", "https://s3.bmp.ovh/imgs/2022/04/09/e278c240c29a050d.jpg"];
    var index = 0;
    var timer;

    var contin = document.getElementById('contin');
    var brek = document.getElementById('brek');
    var change = document.getElementById('change');
    var bottom = document.getElementsByClassName('bottom')[0];
    var win = document.getElementById('win');
    var stats = document.getElementById('stats');
    var choose = document.getElementById('choose');
    var start = document.getElementById('start');

    var paper = document.getElementById('paper');
    var jian = document.getElementById('jian');
    var stone = document.getElementById('stone');

    var timer_2 = setInterval(function () {
        change.src = array[index++];
        if (index == array.length) {
            index = 0;
        }
    }, 80);

    start.onclick = function () {

        contin.style.visibility = 'hidden';
        brek.style.visibility = 'hidden';
        clearInterval(timer_2);

        timer = setInterval(function () {
            change.src = array[index++];
            if (index == array.length) {
                index = 0;
            }
        }, 80);


        win.style.visibility = 'hidden';
        start.style.visibility = 'hidden';
        bottom.style.visibility = 'visible';

        paper.onclick = function () {
            var src = this.src;
            end(src,0, 2, 1)
        }

        jian.onclick = function () {
            var src = this.src;
            end(src,1, 0, 2)
        }

        stone.onclick = function () {
            var src = this.src;
            end(src,2, 1, 0)
        }
    };


    //开始游戏  
    contin.onclick = function () {
        start.onclick()
    }
    //重置游戏
    brek.onclick = function () {
        location.reload();
    }

    var end = function (src,P, W, L) {
        clearInterval(timer);
        var Number = Math.round(Math.random() * (2));
        choose.src = src;
        change.src = array[Number];
        win.style.visibility = 'visible';
        bottom.style.visibility = 'hidden';
        if (Number == P) {
            win.innerHTML = "<h1>" + '平局' + "</h1>";
            IP++;
        } else if (Number == W) {
            win.innerHTML = "<h1>" + '你赢了' + "</h1>";
            Iwin++;
        } else if (Number == L) {
            win.innerHTML = "<h1>" + '你输了' + "</h1>";
            Ifal++;
        }
        contin.style.visibility = 'visible';
        brek.style.visibility = 'visible';
        stats.innerHTML = "胜：" + Iwin + "&nbsp;" + "负：" + Ifal + "&nbsp;" + "平：" + IP; // 显示元素
    }
}

find1star

关注

0
点赞
踩
23

收藏

觉得还不错? 一键收藏
打赏
0
评论
H5+JavaScript 剪刀石头布小游戏完整代码

刚学JavaScript的时候做的，槽点太多了，就图一乐，别太较真。有精力的朋友可以自行改成jQuery版或者其他精简又高效写法，我比较懒就不改啦。效果图：（单局游戏中可计数）
复制链接

扫一扫