猜拳游戏

Posted yehongrun

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了猜拳游戏相关的知识,希望对你有一定的参考价值。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>猜拳</title>
    <style>
        .all {
            width: 1000px;
            border: 1px solid red;
            margin: auto;
            height: 500px;
            overflow: hidden;
        }

        .player {
            width: 400px;
            height: 100%;
            float: left;
            border-right: 1px solid red;
        }

        .center {
            width: 200px;
            height: 100%;
            float: left;
        }

        .computer {
            width: 398px;
            height: 100%;
            float: right;
            border-left: 1px solid red;
        }

        .center h1 {
            text-align: center;
        }

        .center .guess-btn {
            width: 150px;
            height: 150px;
            -webkit-border-radius: 75px;
            margin: 0 auto;
            margin-top: 100px;
            background: red;
        }

        .guess-btn h3 {
            text-align: center;
            line-height: 150px;
            vertical-align: middle;
        }

        ul {
            width: 200px;
            padding: 0;
            list-style-type: none;
            position: relative;
        }

        .player-value {
            position: relative;
            ;
            left: 150px;

        }

        .computer img {
            margin-top: 180px;
        }
    </style>
</head>

<body>
    <div class="all">
        <div class="player">
            <div>
                <label>玩家</label>
                <label id="name">张三</label>
                <label>分数</label>
                <label>90</label>
            </div>
            <div>
                <ul>
                    <li data-value="2">
                        <img src="images/stone.png" >
                    </li>
                    <li data-value="0">
                        <img src="images/cloth.png" >
                    </li>
                    <li data-value="1">
                        <img src="images/clipper.png" >
                    </li>
                </ul>
            </div>
        </div>
        <div class="center">
            <h1 id="result">YOU WIN</h1>
            <div class="guess-btn">
                <h3>出拳</h3>
            </div>
        </div>
        <div class="computer">
        </div>
    </div>
    <script>
        window.onload = function () {
            //玩家
            function Player() {
                this.name;
                this.score = 100;

            }
            // 玩家出拳
            Player.prototype.guess = function () {
                let playerValue = document.querySelector(".player-value");
                return playerValue.dataset.value;
            }
            //电脑
            function Computer() { }
            //电脑出拳
            Computer.prototype.random = function () {
                let rand =  parseInt(Math.random() * 3);
                switch(rand){
                    case 0:computerNode.innerHTML = "<img src=‘images/cloth.png‘>";break;
                    case 1:computerNode.innerHTML = "<img src=‘images/clipper.png‘>";break;
                    case 2:computerNode.innerHTML = "<img src=‘images/stone.png‘>";break;
                }
                return rand;
            }
            //裁判
            function Judg() {
                this.player = new Player();
                this.computer = new Computer();
            }
            //裁判判断赢家
            Judg.prototype.check = function () {
                let playerValue = this.player.guess();
                let computerValue = this.computer.random();
                if (playerValue > computerValue) {
                    if (playerValue - computerValue == 2) {
                        result.innerHTML = "YOU LOSE";
                    } else {
                        result.innerHTML = "YOU WIN";
                    }
                } else if (playerValue < computerValue) {
                    if (playerValue - computerValue == 2) {
                        result.innerHTML = "YOU WIN";
                    } else {
                        result.innerHTML = "YOU LOSE";
                    }
                }else{
                    result.innerHTML = "DRAW";
                }
            }

            let lis = document.querySelectorAll("ul>li");
            let btn = document.querySelector(".guess-btn");
            let result = document.getElementById("result");
            let computerNode = document.querySelector(".computer");
            let judg = new Judg();
            btn.onclick = function () {
                judg.check();
            }
            for (let i = 0; i < lis.length; i++) {
                lis[i].onclick = function () {
                    for (let j = 0; j < lis.length; j++) {
                        lis[j].className = "";
                    }
                    this.className = "player-value";
                }
            }




        }   
    </script>
</body>

</html>



















以上是关于猜拳游戏的主要内容,如果未能解决你的问题,请参考以下文章

猜拳游戏

猜拳游戏(题目+源码)

Chapter3猜拳游戏

0041-猜拳游戏

JS小游戏----猜拳小游戏

三Java面向对象之猜拳游戏