html设计一个小游戏，html5完成一个小游戏
html设计一个小游戏，html5完成一个小游戏
HTML
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery和HTML5实现16宫格的翻牌消除游戏DEMO演示</title> <meta name="description" content=""> <link rel="stylesheet prefetch" href="https://fonts.googleapis.com/css?family=Coda"> <link rel="stylesheet prefetch" href="css/font-awesome.min.css"> <link rel="stylesheet" href="css/app.css"> </head> <body> <div class="container"> <header> <h1>匹配游戏</h1> </header> <section class="score-panel"> <ul class="stars"> <li><i class="fa fa-star"></i></li> <li><i class="fa fa-star"></i></li> <li><i class="fa fa-star"></i></li> </ul> <span class="moves">0</span> Moves <div class="restart" onClick="run()"> <i class="fa fa-repeat"></i> </div> </section> <ul class="deck" id="deck"> </ul> </div> <script src="https://img.aigexing.comjs/jquery.min.js"></script> <script src="https://img.aigexing.comjs/app.js"></script> <div style="text-align:center;clear:both;"> <script src="https://img.aigexing.com/gg_bd_ad_720x90.js" type="text/javascript"></script> <script src="https://img.aigexing.com/follow.js" type="text/javascript"></script> </div> </body> </html> CSS
html { box-sizing: border-box; } * *::before *::after { box-sizing: inherit; } html body { width: 100%; height: 100%; margin: 0; padding: 0; } body { background: #ffffff url('../img/geometry2.png'); /* Background pattern from Subtle Patterns */ font-family: 'Coda' cursive; } .container { display: flex; justify-content: center; align-items: center; flex-direction: column; } h1 { font-family: 'Open Sans' sans-serif; font-weight: 300; } /* * Styles for the deck of cards */ .deck { width: 660px; min-height: 680px; background: linear-gradient(160deg #02ccba 0% #aa7ecd 100%); padding: 32px; border-radius: 10px; box-shadow: 12px 15px 20px 0 rgba(46 61 73 0.5); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; margin: 0 0 3em; } .deck .card { height: 125px; width: 125px; background: #2e3d49; font-size: 0; color: #ffffff; border-radius: 8px; cursor: pointer; display: flex; justify-content: center; align-items: center; box-shadow: 5px 2px 20px 0 rgba(46 61 73 0.5); transform: rotateY(180deg); transition: transform 0.3s; } .deck .card.open { transform: rotateY(360deg); background: #02b3e4; cursor: default; transition: transform 0.3s; } .deck .card.show { font-size: 33px; } .deck .card.match { cursor: default; background: #02ccba; font-size: 33px; animation: fbig 0.3s alternate; } @keyframes fbig { from{transform: scale(1)} to {transform: scale(2)} } /* * Styles for the Score Panel */ .score-panel { text-align: left; width: 345px; margin-bottom: 10px; } .score-panel .stars { margin: 0; padding: 0; display: inline-block; margin: 0 5px 0 0; } .score-panel .stars li { list-style: none; display: inline-block; } .score-panel .restart { float: right; cursor: pointer; }
JS
/* * 创建一个包含所有卡片的数组 */ var Myarr = ['fa-diamond' 'fa-diamond' 'fa-paper-plane-o' 'fa-paper-plane-o' 'fa-anchor' 'fa-anchor' 'fa-bolt' 'fa-bolt' 'fa-cube' 'fa-cube' 'fa-anchor' 'fa-anchor' 'fa-leaf' 'fa-leaf' 'fa-bicycle' 'fa-bicycle'] /* * 显示页面上的卡片 * - 使用下面提供的 "shuffle" 方法对数组中的卡片进行洗牌 * - 循环遍历每张卡片，创建其 HTML * - 将每张卡的 HTML 添加到页面 */ // 洗牌函数来自于 http://stackoverflow.com/a/2450976 function shuffle(array) { var currentIndex = array.length temporaryValue randomIndex; while (currentIndex !== 0) { randomIndex = Math.floor(Math.random() * currentIndex); currentIndex -= 1; temporaryValue = array[currentIndex]; array[currentIndex] = array[randomIndex]; array[randomIndex] = temporaryValue; } return array; } //初始化函数，进入页面或重新开始时用到 function run(){ var Harr = shuffle(Myarr); //"shuffle" 方法对数组中的卡片进行洗牌 var Vhtml='';//定义卡片html for(var i=0;i<Harr.length;i ){ Vhtml = Vhtml '<li class="card"> <i class="fa ' Harr[i] '"></i> </li>' } //循环遍历每张卡片，生成卡片html $("#deck").html(Vhtml);//将每张卡的 HTML 添加到页面 console.log(Vhtml) fclick();//对每个卡片注册点击事件 sessionStorage.setItem("ss" 0);//初始化点击次数 sessionStorage.setItem("pp" 0);//初始化已匹配数量 sessionStorage.setItem("tt" "xx");//用来判断当前匹配效果是否完成，xx为已完成 $(".moves").html(0);//点击次数初始化赋值 } function fclick(){ $("#deck li").click(function(){ if($(this).hasClass("open")||$(this).hasClass("match")){ return false;//如果当前卡片是打开或者已经匹配了的状态则点击无效 } if(sessionStorage.getItem("tt")!="xx"){ return false;//如果匹配效果还未完成点击无效，防止一次点三个 } var ss = parseInt(sessionStorage.getItem("ss")) 1;//点击次数加1 var pp = parseInt(sessionStorage.getItem("pp")); sessionStorage.setItem("ss" ss); $(".moves").html(ss); if(parseInt(sessionStorage.getItem("ss"))%2==0){ //如果是第二次点击，则进入匹配机制 sessionStorage.setItem("tt" "yy"); $(this).addClass("open show open2");//第二个加上open2 //console.log($(".open1").html()); //console.log($(".open2").html()); if($(".open1").html()==$(".open2").html()){ //如果两个里面的html都是一样的 则匹配成功 setTimeout(function(){ $(".open1 .open2").addClass("match"); $(".open1").removeClass("show open1"); $(".open2").removeClass("show open2"); sessionStorage.setItem("tt" "xx"); sessionStorage.setItem("pp" pp 1); if(pp==1){ //当匹配成功次数达到8，则匹配完成 setTimeout(function(){ alert("你共用了" ss "步"); } 500) } } 500) }else{ setTimeout(function(){ //匹配不成功，关闭卡片 $(".open1").removeClass("open show open1"); $(".open2").removeClass("open show open2"); sessionStorage.setItem("tt" "xx"); } 500) } }else{ //alert(1) $(this).addClass("open show open1");//第一个加上open1 } }) } run() /* * 设置一张卡片的事件监听器。 如果该卡片被点击： * - 显示卡片的符号（将这个功能放在你从这个函数中调用的另一个函数中） * - 将卡片添加到状态为 “open” 的 *数组* 中（将这个功能放在你从这个函数中调用的另一个函数中） * - 如果数组中已有另一张卡，请检查两张卡片是否匹配 * 如果卡片匹配，将卡片锁定为 "open" 状态（将这个功能放在你从这个函数中调用的另一个函数中） * 如果卡片不匹配，请将卡片从数组中移除并隐藏卡片的符号（将这个功能放在你从这个函数中调用的另一个函数中） * 增加移动计数器并将其显示在页面上（将这个功能放在你从这个函数中调用的另一个函数中） * 如果所有卡都匹配，则显示带有最终分数的消息（将这个功能放在你从这个函数中调用的另一个函数中） */
