h5实现翻牌游戏以及local storage的运用
2016-01-02 11:44
513 查看
<!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 Documentvar 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/,我把游戏放在了云服务器上，有兴趣的同学可以上去试玩一下。我会继续完善这个游戏。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- HTML5标准程序--画一个半圆
- 【嘉兴东臣php】HTML5、CSS3
- 【嘉兴东臣php】HTML5和CSS3学习周总结
- HTML5的新结构标签
- HTML5绘图工具canvas元素实例代码
- 关于HTML5 地理位置geolocation API 的一些事
- html5调用手机摄像头，实现拍照上传功能
- Hadoop-2.5.0-cdh5.3.2 启动过程详解
- H5 技术
- Hadoop-2.5.0-cdh5.3.2 HA 安装
- HTML5 简介
- HTML5 浏览器支持
- HTML5 新元素
- HTML5 Canvas
- HTML5 内联 SVG
- Html5未来的趋势
- html5css3杂记
- 创造一款成功HTML5游戏的完整指南
- web时代变迁及html5与4的区别
- Html5添加phonegap--Contacts插件教程