基于 HTML+CSS+JS 的纸牌记忆游戏
- 2022 年 4 月 09 日
本文字数：7498 字
阅读完需：约 25 分钟
💂 个人网站: 海拥 —— 一个乐于分享技术与快乐的博主
🤟 版权: 本文由【海拥】原创，需要转载请联系博主
💬 如果文章对你有帮助、欢迎关注、点赞、收藏(一键三连)和订阅专栏哦
💅 想寻找共同摸鱼的小伙伴，请点击【摸鱼小游戏】
这节博客我们将使用 HTML、CSS 和 JavaScript 制作纸牌记忆游戏。
让我们开始吧！
在线演示戳这里👉 https://haiyong.site/moyu/zhipaijiyi.html
完整源码我已经放在 GitHub 上了，欢迎来取，顺带给个星星吧👇
https://github.com/wanghao221/moyu
知识点
animation-duration 属性
backface-visibility 属性
visibility 属性
animation-timing-function 属性
HTML 用户界面
HTML 代码用于设计项目的基本结构，其中包含了一个 h1 标题，分数、星级和游戏时间面板，纸牌卡片列表以及获胜时的恭喜面板。
<!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"> <!-- 导入bootstrap以及字体图标等样式 --> <link rel="stylesheet prefetch" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.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> <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="#">×</a> <div class="content-1"> 恭喜你获得了胜利 🎉🎉 </div> <div class="content-2"> <p>你在<span id="totalTime"> </span>内 </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 部分
现在我们使用一些 CSS 属性来设置记忆纸牌游戏的样式。
一些基本样式
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值使得背面是可见的。
分数面板的样式
.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
首先声明一些我们需要用到的变量：
// 卡片数组包含所有卡片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");
// 模板中的关闭图标let closeicon = document.querySelector(".close");
// 声明 modallet modal = document.getElementById("popup1")
// 打开卡片的数组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 数组 openedCards = [];
// 洗牌 cards = shuffle(cards); // 从每张卡片中删除所有现有的类 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(); } // 根据移动次数设置星级 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);}
复制代码
当所有卡片都匹配正确时展示恭喜界面，显示移动次数时间和等级
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;
//界面上的关闭图标 closeModal(); };}// 界面上的关闭图标function closeModal(){ closeicon.addEventListener("click", function(e){ modal.classList.remove("show"); startGame(); });}
复制代码
再次游戏功能
function playAgain(){ modal.classList.remove("show"); startGame();}
// 循环以将事件侦听器添加到每张卡片for (var i = 0; i < cards.length; i++){ card = cards[i]; card.addEventListener("click", displayCard); card.addEventListener("click", cardOpen); card.addEventListener("click",congratulations);};
复制代码
完整源码
到这里我们的记忆纸牌游戏就做好了，下面我给出了完整的源代码，同学们可以下载下来玩玩试试：https://download.csdn.net/download/qq_44273429/85083128
GitHub 上我也放了一份，欢迎来取，顺带给个星星吧👇
https://github.com/wanghao221/moyu
总结
相信通过上面的教程，大家已经学会了如何使用 JavaScript 构建纸牌记忆游戏。同时我们又学习/复习了一些知识，如：animation-duration 属性、visibility 属性和 animation-timing-function 属性等。
同学们也动起手来做一个纸牌记忆游戏吧
划线
评论
复制
发布于: 刚刚阅读数: 3
版权声明: 本文为 InfoQ 作者【海拥(haiyong.site)】的原创文章。
原文链接:【http://xie.infoq.cn/article/f42c9103a60242a02cf9c751c】。
本文遵守【CC-BY 4.0】协议，转载请保留原文出处及本版权声明。
公众号：海拥 2021.11.29 加入
【个人网站】haiyong.site 【联系方式】微信：wh18363 【软件技能】前端，Java，Python 【个人称号】InfoQ写作平台签约作者，华为云享专家，CSDN原力作者，全栈领域优质创作者，掘金2021年度人气作者No.21
评论