码迷,mamicode.com
首页 > 其他好文 > 详细

猜拳游戏

时间:2018-06-10 11:54:02      阅读:131      评论:0      收藏:0      [点我收藏+]

标签:core   ==   document   content   else   htm   i++   parse   length   

<!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>

猜拳游戏

标签:core   ==   document   content   else   htm   i++   parse   length   

原文地址:https://www.cnblogs.com/yehongrun/p/9162290.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!