html:

<h1>这是一个剪刀石头布游戏</h1>
    <h2>请出拳吧!少年!</h2>
    <h3>您已经获胜了<span id="win-count"></span>次!!!</h3>
    <div id="choose">
        <img src="images/jiandao.jpg" alt="剪刀" id="jiandao" width="200" height="200">
        <img src="images/shitou.jpg" alt="石头" id="shitou" width="200" height="200">
        <img src="images/bu.jpg" alt="布" id="bu" width="200" height="200">
    </div>
    <img src="" id="yourchoose" alt="" width="200" height="200">
    <span id="result"></span>
    <img src="" id="computer" alt="" width="200" height="200">

css:

<style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
        body {
            background: gray;
            text-align: center;
            color: aqua;
        }
        #choose {
            margin: 50px auto;
            height: 200px;
            width: 800px;
        }
        #choose img {
            cursor: pointer;
            margin-right: 95px;
        }
        #choose img:last-child {
            margin-right: 0;
        }
        #result {
            font-size: 20px;
        }
        #win-count {
            font-size: 20px;
            color: red;
        }
    </style>

Javascript:

<script type="text/javascript">

        function $ (id) {
            return document.getElementById(id);
        }

        var winCount = 0;
        function Game (choose) {
            choose.addEventListener(\'click\', function () {
                if (choose == $(\'jiandao\')) {
                    $(\'yourchoose\').src = "images/jiandao.jpg";
                } else if (choose == $(\'shitou\')) {
                    $(\'yourchoose\').src = "images/shitou.jpg";
                } else {
                    $(\'yourchoose\').src = "images/bu.jpg";
                }
                var computerResult = Math.random();
                if (computerResult < 0.33) {
                    $(\'computer\').src = "images/jiandao.jpg";
                    if (choose == $(\'jiandao\')) {
                        $(\'result\').innerHTML = "平手";
                    } else if (choose == $(\'shitou\')) {
                        $(\'result\').innerHTML = "你赢了";
                        winCount++;
                    } else {
                        $(\'result\').innerHTML = "你输了";
                    }
                } else if (computerResult < 0.67) {
                    $(\'computer\').src = "images/shitou.jpg";
                    if (choose == $(\'shitou\')) {
                        $(\'result\').innerHTML = "平手";
                    } else if (choose == $(\'bu\')) {
                        $(\'result\').innerHTML = "你赢了";
                        winCount++;
                    } else {
                        $(\'result\').innerHTML = "你输了";
                    }
                } else {
                    $(\'computer\').src = "images/bu.jpg";
                    if (choose == $(\'bu\')) {
                        $(\'result\').innerHTML = "平手";
                    } else if (choose == $(\'jiandao\')) {
                        $(\'result\').innerHTML = "你赢了";
                        winCount++;
                    } else {
                        $(\'result\').innerHTML = "你输了";
                    }
                }
                $(\'win-count\').innerHTML = winCount;
            });
        }

        Game($(\'jiandao\'));
        Game($(\'shitou\'));
        Game($(\'bu\'));
    </script>

 

版权声明:本文为duxiu-fang原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://www.cnblogs.com/duxiu-fang/p/11027649.html