简单用js实现小型点击数字游戏（可以锻炼大脑哦）

Chestnut*

于 2019-04-16 17:03:51 发布

阅读量1.2k

点赞数 1

文章标签：简单用js实现小型点击数字游戏（可以锻炼大脑哦）

本文链接：https://blog.youkuaiyun.com/weixin_43830188/article/details/89337213

版权

本文介绍了一个使用JavaScript实现的简单数字点击游戏，旨在锻炼玩家的大脑反应。游戏规则包括生成并打乱0-36的数字，以6x6的形式显示，玩家需按顺序点击。游戏设有开始和重置按钮，记录点击时间。不按顺序点击或从非最小数字开始将导致游戏结束。代码已提供，可以在浏览器中运行。欢迎指正。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

简单用js实现小型点击数字游戏（可以锻炼大脑哦）

实现逻辑
1.随机生成0-36的数字，且打乱数字（该游戏是以6*6的形式呈现出，所以可以自定义），每一个数字等比的宽高，边距，方便在游戏中快速点击且不误点。

function fnLuanXu(num) {
        var aLuanXu = [];
        for (var i = 0; i < num; i++) {
            aLuanXu[i] = i;
        }
        for (var i = 0; i < num; i++) {
            var iRand = parseInt(num * Math.random());
            var temp = aLuanXu[i];
            aLuanXu[i] = aLuanXu[iRand];
            aLuanXu[iRand] = temp;
        }
        return aLuanXu;
    }
    var val = fnLuanXu(36);

    var box = document.querySelector(".box");
    for (var i = 0; i < 36; i++) {
        var span = document.createElement('span');
        span.textContent = val[i];
        box.appendChild(span);
    }

创建开始和重置的点击按钮、计时器，可以看到所用的时长。

<button class="start">开始</button>
<button class="reset">重置</button>
<p class="time">00 : 00 : 00</p>
<p class="result">最快时间：<span class="qTime">0</span>s</p>


    var h = m = s = ms = 0; 
    var time = 0;

    function timer() {
        ms = ms + 50; 
        if (ms >= 1000) {
            ms = 0;
            s = s + 1; //秒
        }
        if (s >= 60) {
            s = 0;
            m = m + 1; //分钟
        }
        if (m >= 60) {
            m = 0;
            h = h + 1; /

最低0.47元/天解锁文章