增强记忆力的小游戏

快速的从数字1找到25,每日勤加练习,会增强观察力和记忆力。<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        #ccc {
            width: 550px;
            height: 550px;
            overflow: hidden;
            margin: 0 auto;
            margin-top: 30px;
        }

        .item {
            float: left;
            width: 100px;
            height: 100px;
            margin: 5px 5px;
            background: #ccc;
            color: #595757;
            text-align: center;
            line-height: 100px;
            font-size: 30px;
            cursor: pointer;
        }

        .btn {
            margin: 0 auto;
            display: block;
            text-align: center;
            height: 40px;
            width: 320px;
            line-height: 40px;
            text-decoration: none;
            background: #e50013;
            font-size: 16px;
            color: #fff;
        }

        .timer {
            text-align: center;
            height: 30px;
            line-height: 30px;
            font-size: 16px;
            color: #595757;
        }

        .mt50 {
            margin-top: 50px;;
        }
    </style>
</head>
<body>
<a href="javascript:void(0)" id="change" class="btn mt50">随机排序并计时开始</a>

<p class="timer" id="timer">用时0s</p>

<a href="javascript:void(0)" id="stop" class="btn">停止计时</a>

<div id="ccc">

</div>
</body>
</html>
<script>
    var timers = 0;
    window.onload = function () {
        addDiv();
        gameStart();
    }

    function gameStart() {
        var cA = document.getElementById("change");
        var cStop = document.getElementById("stop");
        var cDiv = document.getElementById("ccc")
        var timeP = document.getElementById("timer");
        cA.onclick = function () {
            if (!(timeP.className.indexOf("show") > -1)) {
                addDiv();
                timer();
            }
        }
        cStop.onclick = function () {
            if (timers > 0) {
                clearInterval(timers);
                timeP.className = "timer";
            }
        }
        cDiv.addEventListener("click", function (e) {
            e.preventDefault();
            e = e || window.event;
            var el = e.srcElement || e.target;
            el.onclick = function (e) {
                e.preventDefault();
                if ((timeP.className.indexOf("show") > -1)) {
                    if (this.innerHTML == "25") {
                        clearInterval(timers);
                        timeP.className = "timer";
                        this.innerHTML = "完毕";
                    } else {
                        this.innerHTML = "";
                    }
                }
            }
        }, true);
    }

    function addDiv() {
        var pDiv = document.getElementById("ccc");
        pDiv.innerHTML = "";
        //制造混乱数组
        var arr = new Array();
        for (var index = 1; index <= 25; index++) {
            arr.push(index);
        }
        arr = arr.sort(randomsort);

        //添加div
        for (var i = 0; i < 25; i++) {
            var newDiv = document.createElement("div");
            newDiv.className = "item";
            newDiv.innerHTML = arr[i];
            pDiv.appendChild(newDiv);
        }
    }

    function randomsort(a, b) {
        return Math.random() > .5 ? -1 : 1;//用Math.random()函数生成0~1之间的随机数与0.5比较,返回-1或1
    }

    function timer() {
        var min = 1;
        var timeP = document.getElementById("timer");
        timeP.innerHTML = "用时0s";
        timeP.className = "timer show";
        timers = setInterval(function () {
            if (min > 60) {
                clearInterval(timers);
                timeP.className = "timer";
                return;
            }
            timeP.innerHTML = "用时" + min + "s";
            min++;
        }, 1000);
    }
</script>
时间: 2024-10-09 09:16:47

增强记忆力的小游戏的相关文章

提高记忆力的习惯

此方法来自于一本叫<海马记忆训练>的书,这是日本连续五年销量第一的记忆书. 脑的机能是非常深奥的,这本书最大的好处在于他的实用性,如果把他推荐的30种方法中的一些变为我们的习惯的话,那么后果是我们不可想像的. 如果明白了记忆机制,并能够控制记忆力的话,我们大概就能够轻松应付学校的考试了.如果能够掌握更多的知识的话,或许就能过上更加丰富多彩的生活了.但 仅仅知道这些还不够,对记忆的研究是那些已经成为社会问题的阿尔兹海默氏症等痴呆病症得以治疗和预防的重要突破口.脑科学家们坚信这一梦想一定能实现,日

原创记忆小游戏-HTML网页版

自己设计的一款记忆里的小游戏,开发平台Dreamweaver,只用HTML和JS就可实现(插件用到了JQ),很简单供初学者参考,源码素材都分享给大家: 游戏的设计规则很简单:开始的时候16宫格全部隐藏,点击开始格子里面会显示随机生成的三种颜色的钻石,5秒钟的记忆时间,五秒后隐藏钻石,同时上面显示需要找的钻石颜色,用户凭记忆选出所有的该颜色的钻石. 实现的方法也很简单,主要是几个重要状态和一个二维数组的处理以及一些字符串变量的处理,最后是根据所用时间和正确率成绩结算的一个小算法. 源码工程文件下载

改善记忆力的二十种记忆方法,随便你挑!

工程师强于推理,但记忆力也非常重要.让记忆与推理齐飞,两者相辅相承. 1.  改善身体素质 记忆力是软件,身体素质是硬件.硬件强劲,软件才有更充分的释放空间.健康有力.精力充沛的身体素质带来的益处是全方位的,需要毫不吝惜地投入. 愉快而稳定的情绪. 充分的营养.合理的休息. 心神放松. 适度幽静的环境.朗诵.冥想.聆听, 还可以加入微音量轻音乐的调料, 总之,所有对记忆有利的因素都可以考虑进来. 为了更好地改善记忆力, 要大幅度地减少玩手机.上网这些分散注意力.辐射大脑使身心素质变弱的活动, 重

C语言小游戏设计报告

课程设计名称:贪吃蛇小游戏 专业班级:计科15-2 学号:150809229 姓名:XXX 一.设计目标 通过设计,培养学生对电脑的动手能力,使学生巩固<C语言程序设计>课程学习的内容,掌握编写程序的基本方法,强化对其的动手能力,可以独自完成程序的编写. 二.设计内容和要求 设计内容 编写贪吃蛇的小游戏,使其可以成功运行并且操作玩耍. 设计要求 1)源程序要有适当的注释,使程序便于阅读. 2)要有程序运行结果作为依据 三.程序流程 1.编写地图 运用函数,数组编写地图 2.相同的方法把蛇添加进

突发奇想想学习做一个HTML5小游戏

前言: 最近一期文化馆轮到我分享了,分享了两个,一个是关于童年教科书的回忆,一个是关于免费电子书的.最后我觉得应该会不敌web,只能说是自己在这中间回忆了一下那个只是会学习的年代,那个充满梦想的年代.有人说如果一个人开始回忆童年的时候,那么他开始变老了,不知道是不是这样一个原因,我突然想起了很多以前的老朋友,开始想起了一些童年时期的玩伴.也就想做这样一款简单的游戏,也只是单纯的想回忆一下童年. 计划: 游戏其实很简单,我们把它叫着裤裆棋,又叫什么狗卵坨还是什么的,有些记忆模糊了,反正大致是这样子

分享:计算机图形学期末作业!!利用WebGL的第三方库three.js写一个简单的网页版“我的世界小游戏”

这几天一直在忙着期末考试,所以一直没有更新我的博客,今天刚把我的期末作业完成了,心情澎湃,所以晚上不管怎么样,我也要写一篇博客纪念一下我上课都没有听,还是通过强大的度娘完成了我的作业的经历.(当然作业不是百度来的,我只是百度了一些示例代码的意思,怎么用!算了,越解释万一越黑呢!哈哈O(∩_∩)O哈哈~) ----------------------------------------------------------------分界线------------------------------

实习2个月后,第一次自己写的小游戏来玩玩

这是小弟第一次写的小游戏,基于jQ写的,没用面向对象思维去写,可能写得不好,请见谅,亲测是能玩的!! 尾部我附上材料图片提供大家下载 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta charset="utf-8" /> <

带你使用h5开发移动端小游戏

带你使用h5开发移动端小游戏 在JY1.x版本中,你要做一个pc端的小游戏,会非常的简单,包括说,你要在低版本的浏览器IE8中,也不会出现明显的卡顿现象,你只需要关心游戏的逻辑就行了,比较适合逻辑较为简单的小游戏,在JY官网也写了很多的小游戏demo,但后来由于工作的缘因,一直没太去维护他,真是一转眼,已经是移动互联网的时代了,5年后的今天,有了重新构思JY框架的冲动,于是全新的JY2.0开始构建了.它将只适用于h5的移动端游戏开发,它将更多的去关注更复杂的js游戏,不在局限于红白机时代. 在使

使用前端原生 js,贪吃蛇小游戏

好久好久,真的是好久好久没来写过了,因为最近有点小忙.不过即使是忙,也也还是写了两个小游戏,其中一个就是这个,贪吃蛇啦. 算是一个小练手了,这个是在有点太简单了,只是第一次写这种小游戏,还是零零星星花了三五天时间,下面就是这个小游戏的gif小动画,比较简单,对比过网上其他用来写出来练手的贪吃蛇作品,这个在颜值还是功能上,都还是不错的,霍霍. 这里讲解一下功能: 空格控制开始和暂停. 方向键控制移动方向. Q 键加速,再按一次恢复常规速度(在加速状态时,按下或者方向键,或者吃到了白色小食物,速度自