如何用JS实现猜拳游戏，实现过程及代码是什么-群英

上一篇：JavaScript循环的用法是什么，有哪些经典案例下一篇：vue封装tabbar组件的操作思路是什么

很多朋友都对“如何用JS实现猜拳游戏，实现过程及代码是什么”的内容比较感兴趣，对此小编整理了相关的知识分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获，那么感兴趣的朋友就继续往下看吧！

本文实例为大家分享了JavaScript编写猜拳游戏的具体代码，供大家参考，具体内容如下

HTML代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS</title>
 
    <script rel="script" src="js1.js"></script>
 
    <style>
        #Div {
            width: 1000px;
            height: 700px;
            position: relative;
            border-style: groove;
            border-width: 2px;
        }
        /*猜拳区*/
        #area {
            width: 300px;
            height: 200px;
            background-color: #011bfd;
            position: absolute;
            top: 20%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
        /*显示区*/
        #results {
            width: 400px;
            height: 50px;
            background-color: #f7f8fd;
            text-align:center;
            font-size:30px;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
        /*卡牌石头*/
        #stone {
            width: 100px;
            height: 150px;
            background-color: #011bfd;
            position: absolute;
            top: 80%;
            left: 30%;
            transform: translate(-50%, -50%);
        }
        /*卡牌剪刀*/
        #scissors {
            width: 100px;
            height: 150px;
            background-color: #011bfd;
            position: absolute;
            top: 80%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
        /*卡牌布*/
        #cloth {
            width: 100px;
            height: 150px;
            background-color: #011bfd;
            position: absolute;
            top: 80%;
            left: 70%;
            transform: translate(-50%, -50%);
        }
    </style>
 
</head>
<body>
 
<div id="Div">
    <div id="area"></div>
 
    <div id="results"></div>
 
    <div id="stone" draggable="true"></div>
    <div id="scissors" draggable="true"></div>
    <div id="cloth" draggable="true"></div>
 
</div>
 
<script rel="script">
    show();
</script>
 
</body>
</html>

JavaScript 代码：

/***
 area 区域
 stone 石头    石头 = 石头  石头 > 剪刀  石头 < 布
 scissors 剪刀 剪刀 < 石头  剪刀 = 剪刀  剪刀 > 布
 cloth 布      布 > 石头  布 < 剪刀  布 = 布
 ***/
 
/***
 查看数据类型：Object.prototype.toString.call(变量)
 刷新局部：window.location.reload('#area');
 ***/
 
 
function Init () {
    //获取并且绑定HTML的ID,返回HTML格式（HTMLDivElement）
    const area = document.querySelector("#area");
    const results = document.querySelector("#results");
    const stone = document.querySelector("#stone");
    const scissors = document.querySelector("#scissors");
    const cloth = document.querySelector("#cloth");
 
    //定义拖拽的卡牌
    let ondragstart_ID = null
    //猜拳类型编写成数组
    const random_Action = ['stone', 'scissors', 'cloth'];
    //随机获取数组中的一个数组的键
    const random_Digital = Math.round(Math.random() * (random_Action.length - 1) + 1);
    //获取数组中的键值，如数组random_Action中的'stone'（random_Action[0]）
    const random_Value = random_Action[random_Digital-1];
 
    //编写猜拳类型的方法
    function attribute (parameter) {
        //鼠标移入时（猜拳卡片变大）
        parameter.onmouseover = function () {
            this.style.height = '200px';
            this.style.width = '150px';
        }
        //鼠标移出时（猜拳卡片恢复初始状态）
        parameter.onmouseleave = function () {
            this.style.height = '150px';
            this.style.width = '100px';
        }
        //元素开始拖动时（猜拳卡片变透明）
        parameter.ondragstart = function () {
            this.style.opacity = '0.3';
            ondragstart_ID = parameter.id
        }
    }
    //创建猜拳类型的对象，给猜拳对象的属性赋值
    this.show_attribute = function () {
        attribute(stone)
        attribute(scissors)
        attribute(cloth)
    }
    //编写卡牌拖动事件
    this.overout = function () {
        //当卡牌拖拽到area（猜拳区域）之上
        area.ondragenter = function () {
            //判断随机数random_Digital，不能等于null
           if (random_Digital !== null) {
               //判断拖拽的卡牌
               if (ondragstart_ID === 'stone') {
                   //判断随机数对等于哪一个
                   switch (random_Value) {
                       case stone.id:
                           results.innerHTML = 'stone = stone,平局！';
                           break;
                       case scissors.id:
                           results.innerHTML = 'stone > scissors,你赢了！';
                           break;
                       case cloth.id:
                           results.innerHTML = 'stone < cloth,你输了！';
                           break;
                       default:
                           //刷新
                           window.location.reload();
                   }
                   //元素拖动结束（猜拳卡片恢复初始状态）
                   stone.ondragend = function () {
                       this.style.opacity = '1';
                   }
                   //延迟1秒后刷新
                   setTimeout(function (){
                       window.location.reload();
                   }, 1000);
                   //判断拖拽的卡牌
               }else if (ondragstart_ID === 'scissors') {
                   //判断随机数对等于哪一个
                   switch (random_Value) {
                       case stone.id:
                           results.innerHTML = 'scissors < stone,你输了！';
                           break;
                       case scissors.id:
                           results.innerHTML = 'scissors = scissors,平局！';
                           break;
                       case cloth.id:
                           results.innerHTML = 'scissors > cloth,你赢了！';
                           break;
                       default:
                           //刷新
                           window.location.reload();
                   }
                   //元素拖动结束（猜拳卡片恢复初始状态）
                   scissors.ondragend = function () {
                       this.style.opacity = '1';
                   }
                   //延迟1秒后刷新
                   setTimeout(function (){
                       window.location.reload();
                   }, 1000);
                   //判断拖拽的卡牌
               }else if (ondragstart_ID === 'cloth') {
                   //判断随机数对等于哪一个
                   switch (random_Value) {
                       case stone.id:
                           results.innerHTML = 'cloth > stone,你赢了！';
                           break;
                       case scissors.id:
                           results.innerHTML = 'cloth < scissors,你输了！';
                           break;
                       case cloth.id:
                           results.innerHTML = 'cloth = cloth,平局！';
                           break;
                       default:
                           //刷新
                           window.location.reload();
                   }
                   //元素拖动结束（猜拳卡片恢复初始状态）
                   cloth.ondragend = function () {
                       this.style.opacity = '1';
                   }
                   //延迟1秒后刷新
                   setTimeout(function (){
                       window.location.reload();
                   }, 1000);
               }
           }
        }
    }
}
 
//调用函数
function show() {
    const show_html = new Init();
    show_html.show_attribute()
    show_html.overout()
}

现在大家对于如何用JS实现猜拳游戏，实现过程及代码是什么的内容应该都有一定的认识了吧，希望这篇能对大家有所帮助。最后，想要了解更多，欢迎关注群英网络，群英网络将为大家推送更多相关的文章。