20_01_关于简单的猜数字游戏（自己记录用）

最新推荐文章于 2022-09-15 17:07:15 发布

·焱·

最新推荐文章于 2022-09-15 17:07:15 发布

阅读量1.5k

点赞数 5

分类专栏：简单记录文章标签： javascript html css

本文链接：https://blog.csdn.net/sawyer_Yan/article/details/107285624

版权

简单记录专栏收录该内容

1 篇文章 0 订阅

订阅专栏

作为第一篇小博客，写个简单的东西，作为记录以及复习用。
猜数字小游戏，即给四个不相同的数字，猜中数字及位置显示A，猜中数字位置不对显示B，当为4A时取胜。

先看一下成品图

未开始的游戏界面
获胜的游戏界面

第一部分 HTML内容

/ / 主要是将页面上需要显示的文字给敲出来，顺手把结构也分一下，比如div，form之类的，最好再设置一个class，方便进行css样式的修改，可以的话，在标签上添加上id，在做js部分的时候可以通过id定位到标签从而获取内容或者修改内容。

*[HTML]: 
<body background="./bg4.png.png"></body>
    <div class="head0">
        <h3>游 戏 界 面</h3>
    </div>
    <div class="head1">
        <h4>注意：请在文本框内输入猜测内容！</h4>
    </div>

    <div class="head2">
        <div class="pic">
            <img src="./cai.jpg" alt="图片未显示">
        </div>
        <br>
        
        <form action="#" method="get">
            <label for="">游戏规则:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
            <p>
                输入一个没有重复数字的四位数。
                <br><br>
                如果猜对数字和位置则显示为A，如果猜对数字但是位置不对的话显示为B。
                <br><br>
                例如数字为1234，猜3564，则显示1A1B，一共猜测10轮，猜出数字为胜利。
            </p>
            <p id='m'>请输入猜测内容：</p>
            <input type="text" id="g_guess">
            <input type="submit" id="g_submit" value="提交数据">
            <label for="" class="ti" id="tip">猜测结果见表格：</label>
            <br><br>
        </form>

        <table border="">
            <tbody id="g_table">
                <tr>
                    <th>次数</th>
                    <th>猜测数字</th>
                    <th>本次结果</th>
                </tr>
            </tbody>
        </table>
    </div>
</body>

第二部分 CSS内容

/ / 主要是格式的设置，并且练习一下盒子模型的运用。

<style>
        h3 {
            background-color: rgb(000, 160, 200);
            text-align: center;
            padding: 10px 30px;
        }

        h4 {
            margin-top: -10px;
            text-align: center;
            font: normal 20px '楷体';
            color: #ff0000;
        }

        form {
            margin-top: -40px;
            text-align: left center;
            padding-left: 100px;
        }

        table {
            position: relative;
            left: 40%;
            align-content: center;
        }

        img {
            position: relative;
            left: 40%;
        }

        #m {
            color: #ff0000;
        }
    </style>

第三部分 JavaScript内容

/ / 对于JavaScript这种算是编程语言的来说，写代码前先理清要做的几件事之间的逻辑关系，结构顺序等等。
/ / 第一步：生成一个没有重复数字的4位数。
/ / 第二步：对于点击提交按钮要做到以下的功能：
1.获取输入内容；
2.把输入内容跟目标进行比对，并且得出猜测比对结果：AB
3.将内容填入表格。
/ / 第三步：次数>10的情况：把答案公布，并提示开始下一轮。
4A0B的情况：猜到结果，提示猜对了，开始下一轮。

<script>
        var nums = [];
        var i = 0;
        while (i < 4) {
        // Math.random()随机生成（0，1）的数字
        // indexOf查找数组元素，找不到即为-1
        // push在结尾添加元素
            var num = parseInt(Math.random() * 10);
            if (nums.indexOf(num) === -1) {
                nums.push(num);
                i++;
            };
        };
        // join函数，起到连字符的作用
        // console.log()输出到网页的console中，也可以不输出
        var target = nums.join('');
        console.log(target);

        var g_input = document.getElementById('g_guess');
        var g_button = document.getElementById('g_submit');
        var mess = document.getElementById('m');
        var table = document.getElementById('g_table');
        var times = 10;

        g_button.onclick = function () {
        // 获取猜测的值
            var guess = g_input.value;
            var A = 0;
            var B = 0;
        // 1.相同位置且一样的值，A+1 
        // 2.不满足前者，且找得到重复的，B+1
            for (var i = 0; i < 4; i++) {
                if (guess[i] === target[i]) {
                    A++;
                } else if (target.indexOf(guess[i]) !== -1) {
                    B++;
                };
            };
            g_input.value = '';
            times--;
            fill_table(10 - times, guess, `${A}A${B}B`);

        // 判断并出结果
            if (A === 4) {
                mess.innerHTML = '恭喜您猜对了！';
            } else if (times === 0) {
                mess.innerHTML = `可惜了，结果为${target}，刷新可以重新开始哦`;
            }
            console.log(`${A}A${B}B`);
        };

        // 将数据添加到表格中，先获取表格元素
        // 再用创建元素，创建文本节点，添加子元素进去
        function fill_table(x, y, z) {
            var tr = document.createElement('tr');

            var td1 = document.createElement('td');
            var txt1 = document.createTextNode(x);
            td1.appendChild(txt1);
            tr.appendChild(td1);

            var td2 = document.createElement('td');
            var txt2 = document.createTextNode(y);
            td2.appendChild(txt2);
            tr.appendChild(td2);

            var td3 = document.createElement('td');
            var txt3 = document.createTextNode(z);
            td3.appendChild(txt3);
            tr.appendChild(td3);

            table.appendChild(tr);
        };
    </script>

结束

差不多了，就这些吧。

·焱·

关注

5
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
20_01_关于简单的猜数字游戏（自己记录用）

作为第一篇小博客，写个简单的东西，作为记录以及复习用。猜数字小游戏，即给四个不相同的数字，猜中数字及位置显示A，猜中数字位置不对显示B，当为4A时取胜。先看一下成品图第一部分 HTML内容/ / 主要是将页面上需要显示的文字给敲出来，顺手把结构也分一下，比如div，form之类的，最好再设置一个class，方便进行css样式的修改，可以的话，在标签上添加上id，在做js部分的时候可以通过id定位到标签从而获取内容或者修改内容。*[HTML]: <body background="./b
复制链接

扫一扫