JS 实现一个猜拳游戏

       今天继续给大家分享一个猜拳游戏，相信大家一个都玩过剪刀石头布这个游戏，游戏规则大家应该都不陌生，剪刀>布>石头.......那么下面简单说一下实现思路：

        1.首先需要获取到玩家出拳的种类。

        2.随机生成电脑出拳的种类。

        3.两者进行对比，判断胜负。

下面是html及css代码：

//css部分
    #box{
        width: 400px;
        height: 200px;
        border: 1px solid black;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
    }
    .res{
        margin-bottom: 15px;
    }
//html部分
    <div id="box">
        <div>
            <button  onclick="scissors()">剪刀</button>
            <button  onclick="rock()">石头</button>
            <button  onclick="cloth()">布</button>
        </div>
        <div class="res">
            <span>你出的:</span><span class="me"></span>
        </div>
        <div class="res">
            <span>电脑出的:</span><span class="robot"></span>
        </div>
        <div class="res">
            <span>结果:</span><span class="result"></span>
        </div>
    </div>

   界面布局效果如图：

  

 下面是script部分代码：

// JavaScript部分

    let me = document.querySelector('.me')
    let robbit = document.querySelector('.robot')
    let result = document.querySelector('.result')
    let arr = ['剪刀', '石头', '布']

    //生成随机数，取值范围是数组长度，即 0-2
    function randomNum() {
        let i = Math.floor(Math.random()*arr.length)
        return i 
    }
    
    //下面三个为玩家出剪刀、布或者石头的方法
    function scissors() {
       me.innerHTML='<span>剪刀</span>'
       let num = randomNum()
       let res = arr[num]
       robbit.innerHTML = `<span>${res}</span>`
       if(res === '剪刀') {
         result.innerHTML='<span>平局</span>'
       }
       else if (res === '石头') {
        result.innerHTML='<span>输</span>'
       }
       else {
        result.innerHTML='<span>胜</span>'
       }
    }

    function rock() {
        me.innerHTML='<span>石头</span>'
        let num = randomNum()
        let res = arr[num]
        robbit.innerHTML = `<span>${res}</span>`
        if(res === '剪刀') {
            result.innerHTML='<span>胜</span>'
        }
        else if (res === '石头') {
            result.innerHTML='<span>平局</span>'
        }
        else {
            result.innerHTML='<span>输</span>'
        }
    }

    function cloth() {
        me.innerHTML='<span>布</span>'
        let num = randomNum()
        let res = arr[num]
        robbit.innerHTML = `<span>${res}</span>`
        if(res === '剪刀') {
            result.innerHTML='<span>输</span>'
        }
        else if (res === '石头') {
            result.innerHTML='<span>胜</span>'
        }
        else {
            result.innerHTML='<span>平局</span>'
        }
    }

那么来看一下最终完成效果：

 

        上述代码直接cv就可以使用了，想要优化的话可以考虑放在三个玩家出拳方法上面。以上就是本篇文章内容了，希望能对你学习JS起到帮助。