js 考记忆力得小游戏

最新推荐文章于 2022-04-06 13:44:15 发布
最新推荐文章于 2022-04-06 13:44:15 发布
阅读量235 收藏
点赞数
文章标签： 游戏 javascript ViewUI
原文链接：http://www.cnblogs.com/mayufo/p/4471268.html
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript">
    window.onload = function (){
         var oStar = document.getElementById("start");
         var oSpan = oStar.getElementsByTagName("span")[0];

         var oContent = document.getElementById("content");
         var oRect = document.getElementById("rect");
         var timer = null;
         var oTime = document.getElementById("time");

         var aImg = document.getElementsByTagName("img");

         var arrImg = ["http://img3.douban.com/view/photo/thumb/public/p1994200192.jpg",
                        "http://img5.douban.com/view/photo/thumb/public/p1994200528.jpg",
                        "http://img3.douban.com/view/photo/thumb/public/p1994200963.jpg",
                        "http://img3.douban.com/view/photo/thumb/public/p1994201400.jpg",
                        "http://img3.douban.com/view/photo/thumb/public/p1994201804.jpg",
                        "http://img5.douban.com/view/photo/thumb/public/p1994201968.jpg",
                        "http://img3.douban.com/view/photo/thumb/public/p1994202154.jpg",
                        "http://img5.douban.com/view/photo/thumb/public/p1994202276.jpg",
                        "http://img3.douban.com/view/photo/thumb/public/p1994202342.jpg"];

         var oScore = document.getElementById("score");
         var oFail = document.getElementById("fail");
         var oSuccess = document.getElementById("success");
         var level = [{"num":"3","timeGame":"10"},
                       {"num":"4","timeGame":"10"},
                       {"num":"6","timeGame":"15"},
                       {"num":"8","timeGame":"20"}];


         oSpan.onclick = function (){

             var rating = 0;
             starGame( level[rating].num,level[rating].timeGame,rating );
             
         }

         // 游戏程序 参数分别代表 块数 游戏时间 等级
         function starGame( num,timeGame,rating){ 

             oStar.style.display = "none";
             oFail.style.display = "none";
             oSuccess.style.display = "none";
             oContent.style.display = "block";
             oContent.setAttribute("off","0");

             oTime.style.width = "440px";
             oScore.innerHTML = 0;
             oRect.innerHTML = "";

             fillContent(num); 
             setTimeout(function (){
                 for(var i = 0; i < aImg.length; i++){
                     aImg[i].src = "http://img3.douban.com/view/photo/thumb/public/p2191686093.jpg";
                 }
                 getTime( oTime,"width", -Math.floor( parseInt( getStyle(oTime,"width") )/timeGame ), timeGame, num*20, rating );
             },3000);
         }

         //填充块
         function fillContent(size){
             var arr = Mix(size,1,2);
             //console.log(arr);

             for(var i = 0; i < arr.length; i++){
                 oRect.innerHTML += "<img style = 'top:"+ 110*Math.floor(i/4) +"px; left:"+ 110*Math.floor(i%4) +"px' select = 'N' index = " + i + " address = " + arrImg[arr[i]] +" src = "+ arrImg[arr[i]] +" num = "+ arr[i] + ">";
             }
         }

         function Mix( max,min,fre){
             var arr = [];
             for(var i = min; i <= max; i++ ){
                 arr.push(i);
             }
             var newarr = [getRandom(arr.length,1)];
             for(var i = 0; newarr.length < arr.length*fre; i++ ){

                 var num = getRandom(arr.length,1);

                 if( toCon(num,fre-1 ) ){
                     newarr.push(num);
                 }
             }

             function toCon( num,fre ){
                 var iNow = 0;
                 for(var i = 0; i < newarr.length; i++ ){
                     if( num == newarr[i] && iNow != fre ){
                         ++iNow;
                     }else if( num == newarr[i] && iNow == fre ){
                         return false;
                     }
                 }
                 return true;
             }

             return newarr;
         }

         

         function getTime( obj,attr,speed,time,totle,rating ){
             clearInterval(obj.timer);

             selectRect(totle,rating);
             obj.timer = setInterval( function (){

                 time--;
                 if( time != 0 ){
                     obj.style[attr] = parseInt( getStyle(obj,attr) ) + speed + "px";
                     if( parseInt(oContent.getAttribute("off")) ==  1  ){
                         clearInterval(obj.timer);
                     }
                 }


                 if( time == 0  ){
                     obj.style[attr] = "0px";
                     clearInterval(obj.timer);
                     for(var i = 0; i < aImg.length; i++ ){
                         aImg[i].src = aImg[i].getAttribute("address");
                     }
                     
                     //console.log( oContent.getAttribute("off") );
                     if( parseInt(oContent.getAttribute("off"))!=  1 ){

                         oContent.style.display = "none";
                         oFail.style.display = "block";

                         var oP = oFail.getElementsByTagName("p")[0];

                         oP.onclick = function (){

                             oFail.style.display = "none";
                             oStar.style.display = "block";

                             oSpan.onclick = function (){
                                 starGame(level[0].num,level[0].timeGame,0);
                             }
                         }
                     }

                 }
             },1000)
         }

         function selectRect(totle,rating){
             var selectNum = 0;
             var selectVal = [];
             var selectIndex = [];
             for(var i = 0; i < aImg.length; i++ ){
                 aImg[i].style.cursor = "pointer";
                 aImg[i].onclick = function(){
                     selectNum++;
                     this.style.border = "1px red solid";
                     this.src = this.getAttribute("address");
                     this.setAttribute("select","Y");
                     selectVal.push( parseInt( this.getAttribute("num")) );
                     selectIndex.push( parseInt( this.getAttribute("index")) );

                     //console.log(selectVal );
                     if( selectNum == 2 ){
                         selectNum = 0;

                          if( selectVal.length == 2 ){
                              if( selectVal[0] == selectVal[1]  && selectIndex[0]!= selectIndex[1] ){

                                  toSelectSuccess(totle,rating);
                                  oScore.innerHTML = parseInt( oScore.innerHTML ) + 20;
                              } else {
                                  toSelectError();
                              }
                          }
                         selectVal = [];
                         selectIndex = [];
                     }    
                 }
             }

             function toSelectError(){
                 setTimeout (function(){
                     var selArrE = [];

                     for(var i = 0; i < aImg.length; i++ ){
                         if( aImg[i].getAttribute("select") == "Y"){
                             selArrE.push( parseInt(aImg[i].getAttribute("index")) );
                         }
                     }

                     for(var i = 0; i < aImg.length; i++ ){
                         for(var j = 0; j < selArrE.length; j++ ){
                             if( aImg[i].getAttribute("index") == selArrE[j] ){
                                 aImg[i].src = aImg[i].getAttribute("address");
                                 aImg[i].src = "http://img3.douban.com/view/photo/thumb/public/p2191686093.jpg";
                                 aImg[i].style.border = "1px white solid";
                                 aImg[i].setAttribute("select","N");
                             }
                         }
                     }
                     selArrE.length = 0;
                 },300);
            }

            function toSelectSuccess( totle,rating){
                 setTimeout (function(){
                     var selArrS = [];
                     for(var i = 0; i < aImg.length; i++ ){
                         if( aImg[i].getAttribute("select") == "Y"){
                             selArrS.push( aImg[i].getAttribute("index") );
                         }
                     }

                     //console.log(totle);

                     for(var i = 0; i < aImg.length; i++ ){
                         for(var j = 0; j < selArrS.length; j++ ){
                             if( aImg[i].getAttribute("index") == selArrS[j] ){
                                 aImg[i].src = aImg[i].getAttribute("address");
                                 aImg[i].style.display = "none";
                                 aImg[i].setAttribute("select","N");
                             }
                         }
                     }
                     selArrS.length = 0;

                     if( parseInt( oScore.innerHTML ) == parseInt( totle ) ){

                         oContent.setAttribute("off","1");
                         oContent.style.display = "none";
                         oSuccess.style.display = "block";

                         var oP = oSuccess.getElementsByTagName("p")[0];
                         oP.onclick = function(){
                             rating++;
                             
                             if( rating == 4 ){
                                 oStar.style.display = "block";
                                 oFail.style.display = "none";
                                 oSuccess.style.display = "none";
                                 oContent.style.display = "none";
                                 rating = 0;

                                 oSpan.onclick = function (){

                                     
                                     starGame( level[0].num,level[0].timeGame,0 );
                                     
                                 }

                             }

                             starGame( level[rating].num,level[rating].timeGame,rating);
                             
                         }
                         
                     }

                     //console.log( selArr[0],selArr[1] );
                     var selArr = [];
                     //console.log( selArr[0],selArr[1] );
                     //var selArr = [];
                 },200);
        }



         }

             
         

         
        
         

         function getStyle(obj,attr){
             if(obj.currentStyle){
                 return obj.currentStyle[attr];
             } else{
                 return getComputedStyle(obj)[attr];
             }
         }

         function getRandom( max, min){
             return Math.floor( Math.random()*( max - min + 1) + min );
         }
    }
    </script>
    <style>
        *{
            padding: 0px;
            margin: 0px;
        }
        #start{
            background: url(images/background.jpg) no-repeat;
            margin: 50px auto;
            position: relative;
            width: 800px;
            height: 500px;
            overflow: hidden;
            display: block;
        }

        #start span{
            background: pink;
            color: white;
            position: absolute;
            top: 400px;
            left: 700px;
            cursor: pointer;
            padding: 15px;
        }

        #content{
            background: #cccccc;
            margin: 50px auto;
            position: relative;
            width: 440px;
            height: 440px;
            display: none;
        }
        #content p{
            position: absolute;
            right: 5px;
            top: -20px;
        }

        #content #rect{
            width: 440px;
            height: 440px;
            position: relative;;
        }

        #content img{
            border: 1px white solid;
            width: 98px;
            height: 98px;
            margin: 5px;
            position: absolute;
        }

        #time{
            width: 440px;
            background: red;
            height: 30px;
            position: absolute;
            bottom: -30px;
        }

        #fail{
            background: black;
            margin: 50px auto;
            width: 440px;
            height: 440px;
            display: none;
        }

        #fail p {
            margin: 50px auto;
            font-size: 120px;
            color:white;
            cursor: pointer;
        }

        #success{
            background: red;
            margin: 50px auto;
            width: 440px;
            height: 440px;
            display: none;
        }

        #success p {
            margin: 50px auto;
            font-size: 120px;
            color:white;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div id = "start">
        <span>start</span>
    </div>

    <div id = "content"  off = "0">
        <p>Score: <span id = "score">0</span>point</p>
        <div id = "time"></div>
        <div id="rect"></div>

    </div>

    <div id = "fail">
        <p>Failure!</p>
    </div>

    <div id = "success">
        <p>Success</p>
    </div>
</body>
</html>

 

转载于:https://www.cnblogs.com/mayufo/p/4471268.html

weixin_34274029
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
js拼图游戏，记忆纸牌游戏
m0_62026062的博客
01-31 89
【代码】js拼图游戏，记忆纸牌游戏。
javascript记忆力游戏
03-18
NULL 博文链接：https://glennzhou.iteye.com/blog/679781
Web前端---HTML+CSS+JS实现记忆纸牌游戏
chengyang_java的博客
11-06 2101
游戏介绍： js实现扑克牌翻牌记忆小游戏代码、连续点击翻开两张扑克牌，相同去重，不同则合上重新翻，考验你的记忆力。 ????文末获取源码联系???? B站视频演示：挑战记忆力-Web前端实现记忆纸牌游戏.mp4 主要源码展示： style.css主要样式布局文件 * { box-sizing: border-box; padding: 0; margin: 0; } div.svelte-1nxkdr7 { position: fixed;
挑战记忆力-Web前端实现记忆纸牌游戏（JS+CSS）
java李阳勇的博客
11-06 5997
游戏介绍： js实现扑克牌翻牌记忆小游戏代码、连续点击翻开两张扑克牌，相同去重，不同则合上重新翻，考验你的记忆力。 ????文末获取源码联系???? 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大？网页要求的总数量太多？HTML网页作业无从下手？没有合适的模板？等等一系列问题。你想要解决的问题，在专栏???????????????????????????????? java项目精品实战分享案例《100套》》》 web期末大作业网页实战《100套》》》 Html+Css+
用JavaScript编写的记忆配对游戏
12-19
用JavaScript编写的记忆配对游戏
【前端素材】小游戏-070- 记忆小游戏.zip
最新发布
04-06
优秀的视觉设计可以提升游戏的吸引力和品质感。 动画效果：运用动画效果增强游戏的交互性和趣味性。动画可以使游戏更生动，提升用户参与感。 【引流】 Java、Python、Node.js、Spring Boot、Django、Express、MySQL...
测试记忆力游戏
04-03
测试记忆力游戏源码，为了打发无聊的时间，用有限的水平写的网页版windows小游戏，测试记忆力的，做完亲测，表示压力好大啊，初级都用了好久，才毕业就感觉记忆大不如以前了o(︶︿︶)o 唉。测试开始游戏后，firefox...
翻牌配对JavaScript小游戏代码
12-30
一款可以选择游戏难度的翻牌配对js小游戏代码。游戏规则：翻开两个格子进行配对，全部格子都配对完成，就过关了，主要考验记忆力。
js扑克牌翻牌配对网页小游戏代码
06-11
一款考验记忆力的js扑克牌翻牌配对网页小游戏代码，玩法：连续点击翻开两张扑克牌，相同则配对成功，直到所以扑克牌都配对成功，你就胜利啦。
基于 HTML+CSS+JS 的纸牌记忆游戏
努力是为了站在万人之中，成为别人的光
04-06 8517
💂 个人网站: 海拥 —— 一个乐于分享技术与快乐的博主 🤟 版权: 本文由【海拥】原创、在CSDN首发、需要转载请联系博主 💬 如果文章对你有帮助、欢迎关注、点赞、收藏(一键三连)和订阅专栏哦 💅 想寻找共同摸鱼的小伙伴，请点击【摸鱼小游戏】 直接跳到末尾 去评论区领书 这节实验我们将使用 HTML、CSS 和 JavaScript 制作纸牌记忆游戏。 让我们开始吧！ 在线演示戳这里👉 https://haiyong.site/lanqiao/17.html
原生JS实现记忆翻牌游戏
10-15
主要为大家详细介绍了原生JS实现记忆翻牌游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
js记忆翻牌匹配小游戏代码
06-11
一款原生js开发的记忆翻牌匹配小游戏代码，有多种难度模式可以选择。游戏规则：翻开两个格子，如果图案一致则配对，将其挑出，如果图案不一致则盖回去，直到所有格子都配对完成，游戏结束。
记忆项目
02-13
记忆项目
记忆力测试小游戏
02-17
这是简单的用c语言写的小程序，可以里面用到了许多常用的功能，希望能够帮到你
使用HTML和JavaScript做小游戏的代码
07-19
文件包含使用HTML和JavaScript实现的 俄罗斯方块、扫雷、贪吃蛇、推箱子、五子棋、打方块等几个小游戏的代码
图片拼图记忆力测试游戏，网页+JS版
10-28
每次随机给出一块，在问号区域中找到它的位置并单击该位置。每选对一个区域得一分，得15分才算获胜，每次游戏只有15次机会。
用javaScript做的小游戏，很有趣。
04-13
用javaScript做的小游戏，很有趣，自己试着玩玩吧
记忆大考验游戏代码
08-07
一款基于翻牌规则的flash记忆游戏，希望对新手有所帮助
JS记忆游戏
02-19
JS记忆游戏
js实现记忆翻牌小游戏
05-24
好的，我可以给你提供一个简单的记忆翻牌小游戏的实现，使用JavaScript和HTML/CSS。 HTML部分： ```html <!DOCTYPE html> 记忆翻牌小游戏 记忆翻牌小游戏 <div class="card" data-value="1"></...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值