原生JS-----一个剪刀石头布游戏

html:

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