猜拳小游戏

我正在参加掘金社区游戏创意投稿大赛个人赛，详情请看：游戏创意投稿大赛

我正在参加 码上掘金体验活动，详情：show出你的创意代码块

前言

使用经典的 HTML + CSS + JS实现猜拳网页小游戏。

游戏规则很简单，就是通过点击选中自己的出拳，系统随机出拳，判断胜负后展示结果，并统计胜利的次数。

👉👉 在线试玩 

👉👉 码上掘金 code.juejin.cn/pen/7090183…

游戏截图

页面布局

默认展示剪刀、石头、布的图片，供用户选择后出拳，右上角展示用户胜利总次数。

点击出拳后，下面展示用户出拳和系统随机出拳，并给出输赢结果。

<h1>剪刀石头布游戏</h1>
<div id="container">
    <p>请出拳吧，少年！<span id="totalWin">你已经获胜了<span id="winNum">0</span>次。</span></p>
    <div id="page1">
        <img src="imgs\jiandao.png" class="item" alt="剪刀" name="0">
        <img src="imgs\shitou.png" class="item" alt="石头" name="1">
        <img src="imgs\bu.png" class="item" alt="布" name="2">
    </div>
    <div id="page2">

    </div>		
</div>

body{
    background-color: #7497fd;
}
h1{
    color: red;
    text-align: center;
}
#container {
    width: 800px;
    height: 300px;
    margin: 0 auto;
}
#container p {
    font-size: 20px;
    font-weight: bold;
}
#container #totalWin {
    float: right;
}
#container #winNum {
    font-weight: bold;
    font-size: 25px;
    color: #fff;
}
#container .item {
    margin: 60px 60px;
    cursor: pointer;
}
#page2 {
    text-align: center;
    margin-top: 80px;
}
#container #again {
    width: 100px;
    height: 30px;
    line-height: 30px;
    font-weight: bold;
    background-color: green;
    margin: 10px auto;
    text-align: center;
    display: block;
    cursor: pointer;
    border: 1px solid #000;
    border-radius: 5px;
    margin-top: 40px;
}

用户出拳

定义一个供用户出拳使用的数组，与页面展示的顺序保持一致，在页面对应元素上定义其在数组中的位置序号，通过获取点击元素的序号值，得到用户出拳。

系统随机出拳

定义一个供系统出拳使用的数组，里面包含剪刀、石头、布，随机数字得到系统出拳的数字：值 = Math.floor(Math.random() * 可能值的总数 + 第一个可能的值)，如 Math.floor(Math.random()*3)，得到系统随机出拳结果。

评判结果

根据前面得到的用户出拳的序号数字和系统出拳的数字，进行比较得到猜拳结果。

总结

用户出拳后展示结果的交互方式不太友好，操作不够方便，后面可以考虑优化交互。