js 考记忆力得小游戏
<!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>
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。