h5实现翻牌游戏以及local storage的运用

最新推荐文章于 2024-08-30 08:42:11 发布

zyz0728

最新推荐文章于 2024-08-30 08:42:11 发布

阅读量2.9k

点赞数 2

分类专栏： JavaScript html5

本文链接：https://blog.csdn.net/zyz0728/article/details/50447958

版权

JavaScript 同时被 2 个专栏收录

10 篇文章 0 订阅

订阅专栏

html5

7 篇文章 0 订阅

订阅专栏

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<title>memory-control</title>
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<div class="audio">
<audio src="http://7xpe2j.com1.z0.glb.clouddn.com/mo.mp3">
   
</audio>
</div>
<div id="timer">
                            <span id="elapsed-time">00:00</span>
                       </div>
<section id="game">
         <div id="cards">
              <div class="card">
                  <div class="face front"></div>
                  <div class="face back"></div>
              </div>
         </div>
</section>
<section id="popup" class="hide">
                  <div id="popup-box">
                       <div id="popup-box-content">
                       <h1>You Won!</h1>
                       <p>Your Score:</p>
                       <p>  
                           <span class="score">
                    
                            </span>
                       </p>
                       <p>
                          <small>
                                 last Score:<span class="last-score"></span> 
                          </small>
                       </p>
                       <p>
                          <small>
                                 best Score:<span class="best-score"></span> 
                          </small>
                       </p>
                       <p>
                          <small>
                                 saved On:<span class="saved-time"></span> 
                          </small>
                       </p>
                  </div>           
             </div>      
</section>
<script>
/*$(function(){
	$("#card1").addClass("moveAndScale");
	$("#card2").addClass("ratateRight");
	});*/
</script>
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/index.js" type="text/javascript"></script>
</body>
</html>

<pre name="code" class="javascript">// JavaScript Document
var Game={};
Game.savingObject={};
Game.savingObject.card=[];
Game.savingObject.removedCards=[];
Game.savingObject.currentElaspedTime=0;
Game.card=[
'card1','card1',
'card2','card2',
'card3','card3',
'card4','card4',
'card5','card5',
'card6','card6',
];
$(function(){
	Game.card.sort(shuffle);
	Game.savingObject.card=Game.card.slice();
	var savedObject=savedSavingObject();
	if(savedObject!=undefined){
	  Game.card=savedObject.card;	
		}
	for (var i=0;i<11;i++){
	$(".card:first-child").clone().appendTo("#cards");	
		}
	$("#cards").children().each(function(index) {
		$(this).css({
			"left":($(this).width()+20)*(index%4),
			"top":($(this).height()+20)*Math.floor(index/4)
			});
	var pattern=Game.card.pop();
	$(this).find(".back").addClass(pattern);
	$(this).attr("data-pattern",pattern);
	$(this).attr("data-card-index",index);
	$(this).click(selectCard);
    });
    if(savedObject!=undefined){
	//alert(savedObject.removedCards);
	Game.savingObject.removedCards=savedObject.removedCards;
	//=savedObject.removedCards;
	//alert(Game.savingObject.removeCards);
	for(var i in Game.savingObject.removedCards)
	{
		//alert(Game.savingObject.removedCards);
		$(".card[data-card-index="+Game.savingObject.removedCards[i]+"]").remove();
		}	
		}
	Game.elapsedTime=0;
	if(savedObject!=undefined){
	Game.elapsedTime=savedObject.currentElaspedTime;
	Game.savingObject.currentElaspedTime=savedObject.currentElapsedTime;	
		}
	Game.timer=setInterval(countTimer,1000);
	});
	
function shuffle(){
	return 0.5-Math.random();
	}

function selectCard(){
	if($(".card-flipped").size()>1){
	     return;	
		}
	$(this).addClass("card-flipped");
	if($(".card-flipped").size()==2){
		setTimeout(checkPattern,700);
		}
	}
	
function checkPattern(){
	if(isMatchPattern()){
	$(".card-flipped").removeClass("card-flipped").addClass("card-removed");
	//$(".card-removed").bind("webkitTransitionEnd",removeTookCards);
	removeTookCards();
	}else{
		$(".card-flipped").removeClass("card-flipped");
		}
	}


function isMatchPattern(){
	var cards=$(".card-flipped");
	var pattern=$(cards[0]).data("pattern");
	var anotherpattern=$(cards[1]).data("pattern");
	return (pattern==anotherpattern);
	}
	
function removeTookCards(){
	//$(".card-removed").remove();
	$(".card-removed").each(function(){
		//alert($(this).data("card-index"));
	//alert(Game.savingObject.removeCards);
	Game.savingObject.removedCards.push($(this).data("card-index"));
	$(this).remove();	
		});
	
	if($(".card").length==0){
	gameover();	
		}
	}
	
/*$(function(){
	Game.elapsedTime=0;
	Game.timer=setInterval(countTimer,1000);
	});
	*/
function countTimer(){
	Game.elapsedTime++;
	Game.savingObject.currentElaspedTime=Game.elapsedTime;
	var minute=Math.floor(Game.elapsedTime/60);
	var second=Game.elapsedTime%60;
	if(minute<10) minute="0"+minute;
	if(second<10) second="0"+second;
	$("#elapsed-time").html(minute+":"+second);
	saveSavingObject();
	}
	
function gameover(){
	clearInterval(Game.timer);
    $(".score").html($("#elapsed-time").html());
	var lastScore=localStorage.getItem("last-score");
	lastScoreObj=JSON.parse(lastScore);
	
	if(lastScoreObj==null){
	lastScoreObj={
	"savedTime":"no record", "score" : 0,"bestscore": 0	
		}	;
		//localStorage.removeItem("savingObject");
		}
		
	var lastElapsedTime=lastScoreObj.score;
	var bestElapsedTime=lastScoreObj.bestscore;
	if(bestElapsedTime==0||Game.elapsedTime<=bestElapsedTime){
		var bestscore=Game.elapsedTime;
		}
	else{
		
		var bestscore=bestElapsedTime;
		}
	/*if(Game.elapsedTime<=bestelapsedtime){
		//如果小于这个最好时间，我们就改变最好时间
	var minute=Math.floor(bestElapsedTime/60);
	var second=bestElapsedTime%60;
	if(minute<10) minute="0"+minute;
	if(second<10) second="0"+second;
	$(".best-score").html(minute+":"+second);
	localStorage.setItem("best-elapsed-time",Game.elapsedTime);
		}
	else{
	localStorage.setItem("best-elapsed-time",bestElapsedTime);
		}
	*/
	var minute=Math.floor(lastElapsedTime/60);
	var second=lastElapsedTime%60;
	if(minute<10) minute="0"+minute;
	if(second<10) second="0"+second;
	$(".last-score").html(minute+":"+second);
	var savedTime=lastScoreObj.savedTime;
	$(".saved-time").html(savedTime);
	$(".best-score").html(bestElapsedTime)
	var currentTime=new Date();
	var month=currentTime.getMonth()+1;
	var day=currentTime.getDay();
	var year=currentTime.getFullYear();
	var hours=currentTime.getHours();
	var minutes=currentTime.getMinutes();
	var seconds=currentTime.getSeconds();
	if(minutes<10) minutes="0"+minutes;
	if(seconds<10) seconds="0"+seconds;
	
	var now=day+"/"+month+"/"+year+" "+hours+":"+minutes+":"+seconds;
	//localStorage.setItem("last-elapsed-time",Game.elapsedTime);
	var obj={
	"savedTime":now,
	"score":Game.elapsedTime,
	"bestscore":bestscore
		};
	localStorage.setItem("last-score",JSON.stringify(obj));
	$("#popup").removeClass("hide");
	}
	
function saveSavingObject(){
		localStorage["savingObject"]=JSON.stringify(Game.savingObject);
	}
function savedSavingObject(){
	var savingObject=localStorage["savingObject"];
	if(savingObject!=undefined){
	savingObject=JSON.parse(savingObject);	
		}
	return savingObject;
	}

@charset "UTF-8";
/* CSS Document */
body{
<span style="white-space:pre">	</span>text-align:center;
<span style="white-space:pre">	</span>background:#a46740;
<span style="white-space:pre">	</span>width:100%;
<span style="white-space:pre">	</span>height:100%;
<span style="white-space:pre">	</span>}
*{margin:0;padding:0;}
#game{
<span style="white-space:pre">	</span>border-radius:10px;
<span style="white-space:pre">	</span>border:1px solid #666;
<span style="white-space:pre">	</span>background:#232;
<span style="white-space:pre">	</span>width:400px;
<span style="white-space:pre">	</span>/*height:500px;*/
<span style="white-space:pre">	</span>margin:25px auto;
<span style="white-space:pre">	</span>display:box;
<span style="white-space:pre">	</span>box-align:center;
<span style="white-space:pre">	</span>}
#cards{
<span style="white-space:pre">	</span>position:relative;
<span style="white-space:pre">	</span>margin:25px auto;
<span style="white-space:pre">	</span>width:380px;
<span style="white-space:pre">	</span>height:400px;
<span style="white-space:pre">	</span>}
.card{
<span style="white-space:pre">	</span>-webkit-perspective:600;
<span style="white-space:pre">	</span>width:80px;
<span style="white-space:pre">	</span>height:120px;
<span style="white-space:pre">	</span>position:absolute;
<span style="white-space:pre">	</span>-moz-transition:all .3s;
<span style="white-space:pre">	</span>-webkit-transition:all .3s;
<span style="white-space:pre">	</span>transition:all .3s;
<span style="white-space:pre">	</span>}
.face{
<span style="white-space:pre">	</span>border-radius:10px;
<span style="white-space:pre">	</span>width:100%;
<span style="white-space:pre">	</span>height:100%;
<span style="white-space:pre">	</span>position:absolute;
<span style="white-space:pre">	</span>-webkit-transition-property:opacty, transform, box-shadow;
<span style="white-space:pre">	</span>-webkit-transition-duration:.3s;
<span style="white-space:pre">	</span>-webkit-backface-visibility:hidden;
<span style="white-space:pre">	</span>}
.front{
<span style="white-space:pre">	</span>background-image:url(../image/card.png);
<span style="white-space:pre">	</span>background-position:-480px 0px;
<span style="white-space:pre">	</span>z-index:10;
<span style="white-space:pre">	</span>}
.back{
<span style="white-space:pre">	</span>background-image:url(../image/card.png);
<span style="white-space:pre">	</span>-webkit-transform:rotate3d(0,1,0,-180deg);
<span style="white-space:pre">	</span>z-index:8px;
<span style="white-space:pre">	</span>}
.card:hover .face .card-flipped .face{
<span style="white-space:pre">	</span>-webkit-box-shadow:0 0 10px #aaa;
<span style="white-space:pre">	</span>}
.card-flipped .front{
<span style="white-space:pre">	</span>-webkit-transform:rotate3d(0,1,0,180deg);
<span style="white-space:pre">	</span>z-index:8;
<span style="white-space:pre">	</span>}
.card-flipped .back{
<span style="white-space:pre">	</span>-webkit-transform:rotate3d(0,1,0,0deg);
<span style="white-space:pre">	</span>z-index:10;
<span style="white-space:pre">	</span>}
.card-remove{
<span style="white-space:pre">	</span>opacity:0;
<span style="white-space:pre">	</span>}
.card1{
<span style="white-space:pre">	</span>background-position:0px 0px;
<span style="white-space:pre">	</span>}
.card2{
<span style="white-space:pre">	</span>background-position:-80px 0px;
<span style="white-space:pre">	</span>}
.card3{
<span style="white-space:pre">	</span>background-position:-160px 0px;
<span style="white-space:pre">	</span>}
.card4{
<span style="white-space:pre">	</span>background-position:-240px 0px;
<span style="white-space:pre">	</span>}
.card5{
<span style="white-space:pre">	</span>background-position:-320px 0px;
<span style="white-space:pre">	</span>}
.card6{
<span style="white-space:pre">	</span>background-position:-400px 0px;
<span style="white-space:pre">	</span>}
#elapsed-time{
<span style="white-space:pre">	</span>width:300px;
<span style="white-space:pre">	</span>height:200px;
<span style="white-space:pre">	</span>}
.hide{
<span style="white-space:pre">	</span>display:none;
<span style="white-space:pre">	</span>}
#popup{
<span style="white-space:pre">	</span>border-radius: 10px;
  border: 1px solid #666;
  background: #4C5291;
  width: 300px;
  height: 350px;
  margin: -430px auto;
  display: box;
  box-align: center;
  z-index: 2;
<span style="white-space:pre">	</span>}
#popup-box{
<span style="white-space:pre">	</span>position:relative;
<span style="white-space:pre">	</span>margin:50px auto;
<span style="white-space:pre">	</span>width:280px;
<span style="white-space:pre">	</span>height:350px;
<span style="white-space:pre">	</span>}
#popup-box-content{
<span style="white-space:pre">	</span>width:280px;
<span style="white-space:pre">	</span>height:350px;
<span style="white-space:pre">	</span>}
#elapsed-time{
<span style="white-space:pre">	</span>font-family:bubblegum-sans;
<span style="white-space:pre">	</span>font-weight:bold;
<span style="white-space:pre">	</span>font-size:18px;
<span style="white-space:pre">	</span>}
#timer{
<span style="white-space:pre">	</span>margin-top:20px;
<span style="white-space:pre">	</span>}
#popup-box-content>h1{
<span style="white-space:pre">	</span>font-family:berkshire-swash;
<span style="white-space:pre">	</span>font-size:24px;
<span style="white-space:pre">	</span>font-weight:bolder;
<span style="white-space:pre">	</span>margin-bottom:20px;
<span style="white-space:pre">	</span>}
#popup-box-content>p{
<span style="white-space:pre">	</span>font-family:frijole;
<span style="white-space:pre">	</span>margin:30px auto;
<span style="white-space:pre">	</span>font-size:18px;
<span style="white-space:pre">	</span>}
.audio{
<span style="white-space:pre">	</span>width:300px;
<span style="white-space:pre">	</span>height:30px;
<span style="white-space:pre">	</span>}

以上就是我的游戏的具体代码实现，想体验效果的可以上http://2.memoryzyz.applinzi.com/memory/,我把游戏放在了云服务器上，有兴趣的同学可以上去试玩一下。我会继续完善这个游戏。