基于HTML+CSS+JS實(shí)現(xiàn)紙牌記憶游戲
這節(jié)實(shí)驗(yàn)我們將使用 HTML、CSS 和 JavaScript 制作紙牌記憶游戲。
讓我們開始吧!
知識點(diǎn)
animation-duration 屬性
backface-visibility 屬性
visibility 屬性
animation-timing-function 屬性
HTML 用戶界面
HTML 代碼用于設(shè)計(jì)項(xiàng)目的基本結(jié)構(gòu),其中包含了一個(gè) h1 標(biāo)題,分?jǐn)?shù)、星級和游戲時(shí)間面板,紙牌卡片列表以及獲勝時(shí)的恭喜面板。
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>實(shí)驗(yàn)十七 紙牌記憶游戲</title> <meta name="description" content=""> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="style.css" rel="external nofollow" > <!-- 導(dǎo)入bootstrap以及字體圖標(biāo)等樣式 --> <link rel="stylesheet prefetch" rel="external nofollow" > </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> <div class="timer"></div> <div class="restart" onclick="startGame()"> <i class="fa fa-repeat"></i> </div> </section> <ul class="deck" id="card-deck"> <li class="card" type="diamond"><i class="fa fa-diamond"></i></li> <li class="card" type="plane"><i class="fa fa-paper-plane-o"></i></li> <li class="card match" type="anchor"><i class="fa fa-anchor"></i> </li> <li class="card" type="bolt" ><i class="fa fa-bolt"></i></li> <li class="card" type="cube"><i class="fa fa-cube"></i></li> <li class="card match" type="anchor"><i class="fa fa-anchor"></i></li> <li class="card" type="leaf"><i class="fa fa-leaf"></i></li> <li class="card" type="bicycle"><i class="fa fa-bicycle"></i></li> <li class="card" type="diamond"><i class="fa fa-diamond"></i></li> <li class="card" type="bomb"><i class="fa fa-bomb"></i></li> <li class="card" type="leaf"><i class="fa fa-leaf"></i></li> <li class="card" type="bomb"><i class="fa fa-bomb"></i></li> <li class="card open show" type="bolt"><i class="fa fa-bolt"></i></li> <li class="card" type="bicycle"><i class="fa fa-bicycle"></i></li> <li class="card" type="plane"><i class="fa fa-paper-plane-o"></i></li> <li class="card" type="cube"><i class="fa fa-cube"></i></li> </ul> <div id="popup1" class="overlay"> <div class="popup"> <h2>恭喜 ??</h2> <a class="close" href="#" rel="external nofollow" >×</a> <div class="content-1"> 恭喜你獲得了勝利 ???? </div> <div class="content-2"> <p>你在<span id="totalTime"> </span>內(nèi) </p> <p>移動(dòng)了<span id="finalMove"> </span> 次 </p> <p>星級: <span id="starRating"></span></p> </div> <button id="play-again"onclick="playAgain()"> 再玩一次 ??</a> </button> </div> </div> </div> <script src="script.js"></script> </body> </html>
CSS 部分
現(xiàn)在我們使用一些 CSS 屬性來設(shè)置記憶紙牌游戲的樣式。
一些基本樣式
html { box-sizing: border-box; } *, *::before, *::after { box-sizing: inherit; } html, body { width: 100%; height: 100%; margin: 0; padding: 0; font-weight:bolder; } body { background: #ffffff; font-size: 16px; } .container { display: flex; justify-content: center; align-items: center; flex-direction: column; } h1 { font-family: 'Gloria Hallelujah', cursive; }
紙牌的樣式
.deck { width: 85%; background: #716F71; padding: 1rem; border-radius: 4px; box-shadow: 8px 9px 26px 0 rgba(46, 61, 73, 0.5); display: flex; flex-wrap: wrap; justify-content: space-around; align-items: center; margin: 0 0 3em; } .deck .card { height: 3.7rem; width: 3.7rem; margin: 0.2rem 0.2rem; background: #141214;; font-size: 0; color: #ffffff; border-radius: 5px; cursor: pointer; display: flex; justify-content: center; align-items: center; box-shadow: 5px 2px 20px 0 rgba(46, 61, 73, 0.5); } .deck .card.open { transform: rotateY(0); background: #02b3e4; cursor: default; animation-name: flipInY; -webkit-backface-visibility: visible; backface-visibility: visible; animation-duration: .75s; } .deck .card.show { font-size: 33px; } .deck .card.match { cursor: default; background: #E5F720; font-size: 33px; animation-name: rubberBand; -webkit-backface-visibility: visible; backface-visibility: visible; animation-duration: .75s; } .deck .card.unmatched { animation-name: pulse; -webkit-backface-visibility: visible; backface-visibility: visible; animation-duration: .75s; background: #e2043b; } .deck .card.disabled { pointer-events: none; opacity: 0.9; }
animation-duration
屬性定義動(dòng)畫完成一個(gè)周期需要多少秒或毫秒。這里的.75s
表示 0.75 秒。backface-visibility
屬性定義當(dāng)元素背面向屏幕時(shí)是否可見。這里的visible
值使得背面是可見的。
分?jǐn)?shù)面板的樣式
.score-panel { text-align: left; 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; } .fa-star { color: #FFD700; } .timer { display: inline-block; margin: 0 1rem; }
祝賀面板的樣式
.overlay { position: fixed; top: 0; bottom: 0; left: 0; right: 0; background: rgba(0, 0, 0, 0.7); transition: opacity 500ms; visibility: hidden; opacity: 0; } .overlay:target { visibility: visible; opacity: 1; } .popup { margin: 70px auto; padding: 20px; background: #ffffff; border-radius: 5px; width: 85%; position: relative; transition: all 5s ease-in-out; } .popup h2 { margin-top: 0; color: #333; font-family: Tahoma, Arial, sans-serif; } .popup .close { position: absolute; top: 20px; right: 30px; transition: all 200ms; font-size: 30px; font-weight: bold; text-decoration: none; color: #333; } .popup .close:hover { color: #E5F720; } .popup .content-1, .content-2 { max-height: 30%; overflow: auto; text-align: center; } .show { visibility: visible; opacity: 100; } #starRating li { display: inline-block; } #play-again { background-color: #141214; padding: 0.7rem 1rem; font-size: 1.1rem; display: block; margin: 0 auto; width: 50%; font-family: 'Gloria Hallelujah', cursive; color: #ffffff; border-radius: 5px; }
visibility
屬性指定一個(gè)元素是否是可見的。
動(dòng)畫
/* 卡片打開時(shí)的動(dòng)畫 */ @keyframes flipInY { from { transform: perspective(400px) rotate3d(0, 1, 0, 90deg); animation-timing-function: ease-in; opacity: 0; } 40% { transform: perspective(400px) rotate3d(0, 1, 0, -20deg); animation-timing-function: ease-in; } 60% { transform: perspective(400px) rotate3d(0, 1, 0, 10deg); opacity: 1; } 80% { transform: perspective(400px) rotate3d(0, 1, 0, -5deg); } to { transform: perspective(400px); } }
animation-timing-function
指定動(dòng)畫將如何完成一個(gè)周期,這里的ease-in
是讓動(dòng)畫以低速開始。
/* 卡片匹配時(shí)的動(dòng)畫 */ @keyframes rubberBand { from { transform: scale3d(1, 1, 1); } 30% { transform: scale3d(1.25, 0.75, 1); } 40% { transform: scale3d(0.75, 1.25, 1); } 50% { transform: scale3d(1.15, 0.85, 1); } 65% { transform: scale3d(.95, 1.05, 1); } 75% { transform: scale3d(1.05, .95, 1); } to { transform: scale3d(1, 1, 1); } }
/* 卡片不匹配時(shí)的動(dòng)畫 */ @keyframes pulse { from { transform: scale3d(1, 1, 1); } 50% { transform: scale3d(1.2, 1.2, 1.2); } to { transform: scale3d(1, 1, 1); } }
媒體查詢
/* 適用于 320px 以下的樣式*/ @media (max-width: 320px) { .deck { width: 85%; } .deck .card { height: 4.7rem; width: 4.7rem; } } /* 適用于 768px 以上的樣式*/ @media (min-width: 768px) { .container { font-size: 22px; } .deck { width: 660px; height: 680px; } .deck .card { height: 125px; width: 125px; } .popup { width: 60%; } }
JavaScript 部分
接下來讓我們添加 Javascript
首先聲明一些我們需要用到的變量:
// 卡片數(shù)組包含所有卡片 let card = document.getElementsByClassName("card"); let cards = [...card]; // 游戲中所有卡片 const deck = document.getElementById("card-deck"); // 聲明 moves 變量 let moves = 0; let counter = document.querySelector(".moves"); // 聲明星形圖標(biāo)的變量 const stars = document.querySelectorAll(".fa-star"); // 聲明 matchedCard 的變量 let matchedCard = document.getElementsByClassName("match"); // 星級列表 let starsList = document.querySelectorAll(".stars li"); // 模板中的關(guān)閉圖標(biāo) let closeicon = document.querySelector(".close"); // 聲明 modal let modal = document.getElementById("popup1") // 打開卡片的數(shù)組 var openedCards = [];
洗牌功能
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; };
開始新游戲的功能
// 頁面刷新/加載時(shí)洗牌 document.body.onload = startGame(); // 開始新游戲的功能 function startGame(){ ? ? ? // 清空 openCards 數(shù)組 ? ? openedCards = []; ? ? // 洗牌 ? ? cards = shuffle(cards); ? ? // 從每張卡片中刪除所有現(xiàn)有的類 ? ? for (var i = 0; i < cards.length; i++){ ? ? ? ? deck.innerHTML = ""; ? ? ? ? [].forEach.call(cards, function(item) { ? ? ? ? ? ? deck.appendChild(item); ? ? ? ? }); ? ? ? ? cards[i].classList.remove("show", "open", "match", "disabled"); ? ? } ? ? // 重置 moves ? ? moves = 0; ? ? counter.innerHTML = moves; ? ? // 重置 rating ? ? for (var i= 0; i < stars.length; i++){ ? ? ? ? stars[i].style.color = "#FFD700"; ? ? ? ? stars[i].style.visibility = "visible"; ? ? } ? ? // 重置 timer ? ? second = 0; ? ? minute = 0;? ? ? hour = 0; ? ? var timer = document.querySelector(".timer"); ? ? timer.innerHTML = "0 分 0 秒"; ? ? clearInterval(interval); }
顯示卡片的功能
var displayCard = function (){ this.classList.toggle("open"); this.classList.toggle("show"); this.classList.toggle("disabled"); };
將打開的卡片添加到 OpenedCards 列表并檢查卡片是否匹配
function cardOpen() { openedCards.push(this); var len = openedCards.length; if(len === 2){ moveCounter(); if(openedCards[0].type === openedCards[1].type){ matched(); } else { unmatched(); } } };
當(dāng)卡片匹配時(shí)的功能
function matched(){ openedCards[0].classList.add("match", "disabled"); openedCards[1].classList.add("match", "disabled"); openedCards[0].classList.remove("show", "open", "no-event"); openedCards[1].classList.remove("show", "open", "no-event"); openedCards = []; }
當(dāng)卡片不匹配時(shí)的功能
function unmatched(){ openedCards[0].classList.add("unmatched"); openedCards[1].classList.add("unmatched"); disable(); setTimeout(function(){ openedCards[0].classList.remove("show", "open", "no-event","unmatched"); openedCards[1].classList.remove("show", "open", "no-event","unmatched"); enable(); openedCards = []; },1100); }
暫時(shí)禁用卡片的功能
function disable(){ Array.prototype.filter.call(cards, function(card){ card.classList.add('disabled'); }); }
啟用卡片并禁用匹配的卡片的功能
function enable(){ Array.prototype.filter.call(cards, function(card){ card.classList.remove('disabled'); for(var i = 0; i < matchedCard.length; i++){ matchedCard[i].classList.add("disabled"); } }); }
計(jì)算玩家的動(dòng)作的功能
function moveCounter(){ moves++; counter.innerHTML = moves; // 第一次點(diǎn)擊時(shí)啟動(dòng)計(jì)時(shí)器 if(moves == 1){ second = 0; minute = 0; hour = 0; startTimer(); } // 根據(jù)移動(dòng)次數(shù)設(shè)置星級 if (moves > 8 && moves < 12){ for( i= 0; i < 3; i++){ if(i > 1){ stars[i].style.visibility = "collapse"; } } } else if (moves > 13){ for( i= 0; i < 3; i++){ if(i > 0){ stars[i].style.visibility = "collapse"; } } } }
顯示游戲的時(shí)間
//初始化變量 var second = 0, minute = 0; hour = 0; var timer = document.querySelector(".timer"); var interval; //計(jì)時(shí)功能 function startTimer(){ interval = setInterval(function(){ timer.innerHTML = minute+" 分"+second+" 秒"; second++; if(second == 60){ minute++; second=0; } if(minute == 60){ hour++; minute = 0; } },1000); }
當(dāng)所有卡片都匹配正確時(shí)展示恭喜界面,顯示移動(dòng)次數(shù)時(shí)間和等級
function congratulations(){ ? ? if (matchedCard.length == 16){ ? ? ? ? clearInterval(interval); ? ? ? ? finalTime = timer.innerHTML; ? ? ? ? // 顯示祝賀界面 ? ? ? ? modal.classList.add("show"); ? ? ? ? // 聲明星級變量 ? ? ? ? var starRating = document.querySelector(".stars").innerHTML; ? ? ? ? // 顯示移動(dòng)、評級、時(shí)間 ? ? ? ? document.getElementById("finalMove").innerHTML = moves; ? ? ? ? document.getElementById("starRating").innerHTML = starRating; ? ? ? ? document.getElementById("totalTime").innerHTML = finalTime; ? ? ? ? //界面上的關(guān)閉圖標(biāo) ? ? ? ? closeModal(); ? ? }; } // 界面上的關(guān)閉圖標(biāo) function closeModal(){ ? ? closeicon.addEventListener("click", function(e){ ? ? ? ? modal.classList.remove("show"); ? ? ? ? startGame(); ? ? }); }
再次游戲功能
function playAgain(){ ? ? modal.classList.remove("show"); ? ? startGame(); } // 循環(huán)以將事件偵聽器添加到每張卡片 for (var i = 0; i < cards.length; i++){ ? ? card = cards[i]; ? ? card.addEventListener("click", displayCard); ? ? card.addEventListener("click", cardOpen); ? ? card.addEventListener("click",congratulations); };
到這里我們的記憶紙牌游戲就做好了
總結(jié)
相信通過上面的教程,大家已經(jīng)學(xué)會(huì)了如何使用 JavaScript 構(gòu)建紙牌記憶游戲。同時(shí)我們又學(xué)習(xí)/復(fù)習(xí)了一些知識,如:animation-duration 屬性、visibility 屬性和 animation-timing-function 屬性等。
同學(xué)們也動(dòng)起手來做一個(gè)紙牌記憶游戲吧
到此這篇關(guān)于基于HTML+CSS+JS實(shí)現(xiàn)紙牌記憶游戲的文章就介紹到這了,更多相關(guān)JS紙牌記憶游戲內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
javascript開發(fā)隨筆二 動(dòng)態(tài)加載js和文件
js無非就是script標(biāo)簽引入頁面,但當(dāng)項(xiàng)目越來越大的時(shí)候,單頁面引入N個(gè)js顯然不行,合并為單個(gè)文件減少了請求數(shù),但請求的文件體積卻很大2011-11-11前端實(shí)現(xiàn)電子簽名(web、移動(dòng)端)通用的實(shí)戰(zhàn)過程
電子簽名通俗來說就是通過技術(shù)手段實(shí)現(xiàn)在電子文檔上加載電子形式的簽名,下面這篇文章主要給大家介紹了關(guān)于前端實(shí)現(xiàn)電子簽名(web、移動(dòng)端)通用的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-12-12javascript實(shí)現(xiàn)京東快遞單號的查詢效果
這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)京東快遞單號的查詢效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-11-11JS實(shí)現(xiàn)簡易的圖片拖拽排序?qū)嵗a
這篇文章主要介紹了JS實(shí)現(xiàn)簡易的圖片拖拽排序?qū)嵗a,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-06-06整理Javascript事件響應(yīng)學(xué)習(xí)筆記
整理Javascript事件響應(yīng)學(xué)習(xí)筆記,之前一系列的文章是跟我學(xué)習(xí)Javascript,本文就是進(jìn)一步學(xué)習(xí)javascript流程控制語句,希望大家繼續(xù)關(guān)注2015-12-12