基于HTML+CSS+JS實現(xiàn)紙牌記憶游戲

更新時間：2022年04月06日 15:14:28 作者：海擁?

這篇文章主要介紹了如何利用HTML、CSS?和?JavaScript?制作紙牌記憶游戲，文中的示例代碼講解詳細，感興趣的小伙伴可以跟隨小編一起動手嘗試一下

這節(jié)實驗我們將使用 HTML、CSS 和 JavaScript 制作紙牌記憶游戲。

讓我們開始吧！

在線演示戳這里

知識點

animation-duration 屬性

backface-visibility 屬性

visibility 屬性

animation-timing-function 屬性

HTML 用戶界面

HTML 代碼用于設(shè)計項目的基本結(jié)構(gòu)，其中包含了一個 h1 標題，分數(shù)、星級和游戲時間面板，紙牌卡片列表以及獲勝時的恭喜面板。

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>實驗十七 紙牌記憶游戲</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以及字體圖標等樣式 -->
    <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>移動了<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 屬性定義動畫完成一個周期需要多少秒或毫秒。這里的.75s表示 0.75 秒。
backface-visibility 屬性定義當元素背面向屏幕時是否可見。這里的 visible 值使得背面是可見的。

分數(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 屬性指定一個元素是否是可見的。

動畫

/* 卡片打開時的動畫 */
@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 指定動畫將如何完成一個周期，這里的 ease-in 是讓動畫以低速開始。

/* 卡片匹配時的動畫 */
@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);
  }
}

/* 卡片不匹配時的動畫 */
@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");

// 聲明星形圖標的變量
const stars = document.querySelectorAll(".fa-star");

// 聲明 matchedCard 的變量
let matchedCard = document.getElementsByClassName("match");

// 星級列表
let starsList = document.querySelectorAll(".stars li");

// 模板中的關(guān)閉圖標
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;
};

開始新游戲的功能

// 頁面刷新/加載時洗牌
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();
        }
    }
};

當卡片匹配時的功能

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 = [];
}

當卡片不匹配時的功能

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);
}

暫時禁用卡片的功能

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");
        }
    });
}

計算玩家的動作的功能

function moveCounter(){
    moves++;
    counter.innerHTML = moves;
    // 第一次點擊時啟動計時器
    if(moves == 1){
        second = 0;
        minute = 0; 
        hour = 0;
        startTimer();
    }
    // 根據(jù)移動次數(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";
            }
        }
    }
}

顯示游戲的時間

//初始化變量
var second = 0, minute = 0; hour = 0;
var timer = document.querySelector(".timer");
var interval;
//計時功能
function startTimer(){
    interval = setInterval(function(){
        timer.innerHTML = minute+" 分"+second+" 秒";
        second++;
        if(second == 60){
            minute++;
            second=0;
        }
        if(minute == 60){
            hour++;
            minute = 0;
        }
    },1000);
}

當所有卡片都匹配正確時展示恭喜界面，顯示移動次數(shù)時間和等級

function congratulations(){
? ? if (matchedCard.length == 16){
? ? ? ? clearInterval(interval);
? ? ? ? finalTime = timer.innerHTML;

? ? ? ? // 顯示祝賀界面
? ? ? ? modal.classList.add("show");

? ? ? ? // 聲明星級變量
? ? ? ? var starRating = document.querySelector(".stars").innerHTML;

? ? ? ? // 顯示移動、評級、時間
? ? ? ? document.getElementById("finalMove").innerHTML = moves;
? ? ? ? document.getElementById("starRating").innerHTML = starRating;
? ? ? ? document.getElementById("totalTime").innerHTML = finalTime;

? ? ? ? //界面上的關(guān)閉圖標
? ? ? ? closeModal();
? ? };
}
// 界面上的關(guān)閉圖標
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)學會了如何使用 JavaScript 構(gòu)建紙牌記憶游戲。同時我們又學習/復(fù)習了一些知識，如：animation-duration 屬性、visibility 屬性和 animation-timing-function 屬性等。

同學們也動起手來做一個紙牌記憶游戲吧

到此這篇關(guān)于基于HTML+CSS+JS實現(xiàn)紙牌記憶游戲的文章就介紹到這了,更多相關(guān)JS紙牌記憶游戲內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

国产无遮挡裸体免费直播视频,久久精品国产蜜臀av,动漫在线视频一区二区,欧亚日韩一区二区三区,久艹在线免费视频,国产精品美女网站免费,正在播放 97超级视频在线观看,斗破苍穹年番在线观看免费,51最新乱码中文字幕

基于HTML+CSS+JS實現(xiàn)紙牌記憶游戲

目錄

知識點

HTML 用戶界面

CSS 部分

一些基本樣式

紙牌的樣式

分數(shù)面板的樣式

祝賀面板的樣式

動畫

媒體查詢

JavaScript 部分

洗牌功能

開始新游戲的功能

顯示卡片的功能

當卡片匹配時的功能

當卡片不匹配時的功能

暫時禁用卡片的功能

啟用卡片并禁用匹配的卡片的功能

計算玩家的動作的功能

顯示游戲的時間

再次游戲功能

總結(jié)

相關(guān)文章

最新評論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具

国产无遮挡裸体免费直播视频,久久精品国产蜜臀av,动漫在线视频一区二区,欧亚日韩一区二区三区,久艹在线 免费视频,国产精品美女网站免费,正在播放 97超级视频在线观看,斗破苍穹年番在线观看免费,51最新乱码中文字幕

基于HTML+CSS+JS實現(xiàn)紙牌記憶游戲

目錄

知識點

HTML 用戶界面

CSS 部分

一些基本樣式

紙牌的樣式

分數(shù)面板的樣式

祝賀面板的樣式

動畫

媒體查詢

JavaScript 部分

洗牌功能

開始新游戲的功能

顯示卡片的功能

當卡片匹配時的功能

當卡片不匹配時的功能

暫時禁用卡片的功能

啟用卡片并禁用匹配的卡片的功能

計算玩家的動作的功能

顯示游戲的時間

再次游戲功能

總結(jié)

相關(guān)文章

最新評論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具

国产无遮挡裸体免费直播视频,久久精品国产蜜臀av,动漫在线视频一区二区,欧亚日韩一区二区三区,久艹在线免费视频,国产精品美女网站免费,正在播放 97超级视频在线观看,斗破苍穹年番在线观看免费,51最新乱码中文字幕