HTML网页小游戏算术题判断

最新推荐文章于 2024-08-18 15:23:48 发布

learner_

最新推荐文章于 2024-08-18 15:23:48 发布

阅读量2.1k

点赞数 2

分类专栏：数学算法文章标签： HTML 小游戏小程序

本文链接：https://blog.csdn.net/learner_/article/details/80676531

版权

数学算法专栏收录该内容

3 篇文章 0 订阅

订阅专栏

前不久有个微信小程序的游戏，非常简单的答题逻辑。

程序出一道简单的算术题，并问你算术题的结果是对与错？

例如：1+1=3？

你在规定的时间内，回答对错，判断正确则进入下一题，错误则游戏结束。

一共40道题，越到后面，答题时间越紧迫。全部答题，会有奖励。

鄙人觉得有意思，也模仿着写了一个HTML+JS版本的。全部代码加起来，一百多行。当然，我这个全部答对是没奖励的。

游戏截图如下：

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />

    <!--强制竖屏，针对UC、QQ-->
    <meta name="screen-orientation" content="portrait">
    <meta name="x5-orientation" content="portrait">

    <!--使用app模式-->
    <meta name="browsermode" content="application">

    <!--强制全屏，分别针对UC、QQ-->
    <meta name="full-screen" content="yes">
    <meta name="x5-fullscreen" content="true">

    <title></title>
    <script src="js/jquery-3.1.1.min.js" type="text/javascript"></script>

    <style>
        body {
            background-color: #3d4548;
            margin: 0;
        }
        /*问题区域*/
        #question {
            font-size: 9em;
            text-align: center;
            background-color: #c5099f;
            padding: 250px 0 0 0;
            color: white;
            height: 750px;
            border-radius: 0 0 1em 1em;
            box-shadow: #3c3737 8px 10px 6px;
            margin: 0px;
        }

            /*问题区域-标题*/
            #question #question-title {
                font-size: 45px;
                color: yellow;
                margin-top: 0;
            }
            /*问题区域-题数*/
            #question #question-count {
                font-size: 45px;
            }

            /*问题区域-进度条*/
            #question #question-progress {
                width: 90%;
                height: 25px;
            }

        /*答题区域*/
        #answer {
            color: white;
            position: fixed;
            bottom: 20px;
            width: 100%;
            display: flex;
        }

            #answer .answer-button {
                display: inline-block;
                width: 45%;
                font-size: 100px;
                text-align: center;
                border-radius: 10px;
                margin: auto;
            }

            #answer #answer-right {
                background-color: #5757e4;
            }

            #answer #answer-error {
                background-color: #f94b4b;
            }
    </style>
</head>
<body>
    <div id="question">
        <p id="question-title">连续答对40题即挑战成功</p>
        <progress id="question-progress" value="100" max="100"></progress>
        <p id="question-count">第1题</p>
        <p id="question-text"></p>
    </div>

    <div id="answer">
        <div id="answer-right" class="answer-button">√</div>
        <div id="answer-error" class="answer-button">×</div>
    </div>

    <script>
        //算数1、算数2，运算结果（该结果非正确结果，而是随机结果）
        var g1, g2, g3;
        //运算符，只有+和-
        var op;
        //计时器句柄
        var gHandle = 0;
        //答题计数
        var gCount = 0;

        //生成一个问题,并显示在#question-text
        function CreateQuestion() {
            //生成一道算术题
            g1 = Math.ceil(Math.random() * 100) % 10;     //算数1
            g2 = Math.ceil(Math.random() * 100) % 10;     //算数2
            op = Math.ceil(Math.random() * 100) % 2;      //运算符
            switch (op) {
                case 0: //加法
                    g3 = g1 + g2 + (Math.ceil(Math.random() * 100) % 3 - 1);
                    $("#question-text").text(g1 + "+" + g2 + "=" + g3);
                    break;
                case 1://减法
                    g3 = g1 - g2 + (Math.ceil(Math.random() * 100) % 3 - 1);
                    $("#question-text").text(g1 + "-" + g2 + "=" + g3);
                    break;
                default:
            }
            gCount++;
            $("#question-count").text("第" + gCount + "题");
        }

        //返回CreateQuestion的正确答案
        function GetAnswer() {
            switch (op) {
                case 0:
                    return (g1 + g2 == g3);
                case 1:
                    return (g1 - g2 == g3);
                default:
                    return true;
            }
        }

        //重置计时，把计时条的数值设置为100，并启用每0.1秒的工作频率
        function RestartTimeout() {
            clearInterval(gHandle);
            $("#question-progress").val(100);
            gHandle = setInterval(DealTimeout, 100);
        }

        //终止计时
        function StopTimeout() {
            clearInterval(gHandle);
        }

        /*处理计时
            计时器，以每0.1秒运行一次的频率进行工作。
            它根据当前的题数，计算出答题时间。
            然后根据答题时间，计算出每0.1秒计时条要减少的数值（总值固定为100）
            最后刷新计时条。如果计时为0，则终止答题
        */
        function DealTimeout() {
            //计算总秒数：1-10题 5秒，11-20题 4秒， 21-30题 3秒， 31-40 2秒
            var t = Math.floor((gCount - 1) / 10.0);
            var totalSeconds = 5 - t;
            var timeout = $("#question-progress").val();
            timeout -= (100 / (totalSeconds * 10));
            if (timeout == 0) {
                $("#question-progress").val(0);
                clearInterval(gHandle);
                alert("时间到!很遗憾，你只答对了" + (gCount - 1) + "道题");
                gCount = 0;
                $("#question-progress").val(100);
                CreateQuestion();
            }
            else {
                $("#question-progress").val(timeout);
            }
        }

        /*点击回答按钮，bret传入用户选择的值，true or false*/
        function Answer(bRet) {
            if (bRet == GetAnswer()) {
                if (gCount == 40) {
                    StopTimeout();
                    $("#question-count").text("通关！！！");
                    alert("太棒了，您成功答对40题！！截个图发给我吧");
                }
                else {
                    CreateQuestion();
                    RestartTimeout();
                }
            }
            else {
                StopTimeout();
                alert("很遗憾，您只答对了" + (gCount - 1) + "道题");
                gCount = 0;
                $("#question-progress").val(100);
                CreateQuestion();
            }
        }

        $(document).ready(function () {

            CreateQuestion();

            $("#answer-right").click(function () {
                Answer(true);
            });

            $("#answer-error").click(function () {
                Answer(false);
            });
        });
    </script>
</body>
</html>

把上面代码复制粘贴到记事本，然后保存为html后缀，就可以使用了。

其中用到了jquery，需要你自己去网上下载。

如果你想看结果，也可以访问https://chion.site/master（这个是为移动端所写的，建议在手机上访问。电脑网页访问会走样。）