前言
前端的朋友们，福利来了，今天小编给大家带来了一款JavaScript实现的记忆卡游戏，项目拿来就可以集成，也可以是学习的好项目。
演示视频
https://githubs.xyz/show/117.mp4
游戏简介
记忆卡是一个初学者友好的游戏，你可以使用HTML, CSS和JavaScript创建。在这个游戏中，16张牌被随机放置在屏幕上，每对牌都有相同的图像。游戏的目标是通过点击卡片找到所有匹配的配对。
找到匹配的卡牌没有时间限制，所以玩家可以慢慢来，专注于提高记忆力。创建这个游戏是练习不同JavaScript概念的好方法，包括事件侦听器、循环、数组等。
如何引入
先看下代码结构
html代码
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>记忆卡游戏</title>
<link rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="wrapper">
<ul class="cards">
<li class="card">
<div class="view front-view">
<img src="images/que_icon.svg" alt="icon">
</div>
<div class="view back-view">
<img src="images/img-1.png" alt="card-img">
</div>
</li>
<li class="card">
<div class="view front-view">
<img src="images/que_icon.svg" alt="icon">
</div>
<div class="view back-view">
<img src="images/img-6.png" alt="card-img">
</div>
</li>
<li class="card">
<div class="view front-view">
<img src="images/que_icon.svg" alt="icon">
</div>
<div class="view back-view">
<img src="images/img-3.png" alt="card-img">
</div>
</li>
<li class="card">
<div class="view front-view">
<img src="images/que_icon.svg" alt="icon">
</div>
<div class="view back-view">
<img src="images/img-2.png" alt="card-img">
</div>
</li>
<li class="card">
<div class="view front-view">
<img src="images/que_icon.svg" alt="icon">
</div>
<div class="view back-view">
<img src="images/img-1.png" alt="card-img">
</div>
</li>
<li class="card">
<div class="view front-view">
<img src="images/que_icon.svg" alt="icon">
</div>
<div class="view back-view">
<img src="images/img-5.png" alt="card-img">
</div>
</li>
<li class="card">
<div class="view front-view">
<img src="images/que_icon.svg" alt="icon">
</div>
<div class="view back-view">
<img src="images/img-2.png" alt="card-img">
</div>
</li>
<li class="card">
<div class="view front-view">
<img src="images/que_icon.svg" alt="icon">
</div>
<div class="view back-view">
<img src="images/img-6.png" alt="card-img">
</div>
</li>
<li class="card">
<div class="view front-view">
<img src="images/que_icon.svg" alt="icon">
</div>
<div class="view back-view">
<img src="images/img-3.png" alt="card-img">
</div>
</li>
<li class="card">
<div class="view front-view">
<img src="images/que_icon.svg" alt="icon">
</div>
<div class="view back-view">
<img src="images/img-4.png" alt="card-img">
</div>
</li>
<li class="card">
<div class="view front-view">
<img src="images/que_icon.svg" alt="icon">
</div>
<div class="view back-view">
<img src="images/img-5.png" alt="card-img">
</div>
</li>
<li class="card">
<div class="view front-view">
<img src="images/que_icon.svg" alt="icon">
</div>
<div class="view back-view">
<img src="images/img-4.png" alt="card-img">
</div>
</li>
<li class="card">
<div class="view front-view">
<img src="images/que_icon.svg" alt="icon">
</div>
<div class="view back-view">
<img src="images/img-4.png" alt="card-img">
</div>
</li>
<li class="card">
<div class="view front-view">
<img src="images/que_icon.svg" alt="icon">
</div>
<div class="view back-view">
<img src="images/img-4.png" alt="card-img">
</div>
</li>
<li class="card">
<div class="view front-view">
<img src="images/que_icon.svg" alt="icon">
</div>
<div class="view back-view">
<img src="images/img-4.png" alt="card-img">
</div>
</li>
<li class="card">
<div class="view front-view">
<img src="images/que_icon.svg" alt="icon">
</div>
<div class="view back-view">
<img src="images/img-4.png" alt="card-img">
</div>
</li>
</ul>
</div>
<script src="script.js"></script>
<!-- 代码git地址：gitee.com/hadluo/html_code.git -->
</body>
</html>主要的实现在js和css文件。
结尾语
我是分享教程源码的老罗，欢迎关注
