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

最新推荐文章于 2024-05-08 11:21:10 发布

梦想编程

最新推荐文章于 2024-05-08 11:21:10 发布

阅读量744

点赞数

CC 4.0 BY-SA版权

分类专栏：程序员文章标签：原生JS JavaScript

本文链接：https://blog.youkuaiyun.com/weixin_44970764/article/details/92578827

程序员专栏收录该内容

30 篇文章

订阅专栏

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>

复制代码

如果有想学习web前端的程序员，可加下v❤：TZ07900，免费送web前端的视频教程噢！