js简易翻牌小游戏

最新推荐文章于 2024-04-18 11:41:14 发布

西瓜你个皮皮

最新推荐文章于 2024-04-18 11:41:14 发布

阅读量3k

点赞数 8

分类专栏：笔记文章标签： javascript css html

本文链接：https://blog.csdn.net/weixin_44907289/article/details/105825603

版权

笔记专栏收录该内容

8 篇文章 0 订阅

订阅专栏

js简易翻牌小游戏–学习练手

在这里插入图片描述

js:
将小图标存入数组中，一共8组。

//包含所有卡片的数组
var cardList = ['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-leaf', 'fa-leaf', 'fa-bicycle', 'fa-bicycle', 'fa-anchor',
	'fa-anchor'
];
var gameBox = document.querySelector('.game-box');
var count = document.querySelector('#count');
var restart = document.querySelector('#repeat');

将数组乱序

function shuffle(arr) {
	for (var i = 0; i < arr.length; i++) {
		var ran = Math.floor(Math.random() * (i + 1));
		var temp = arr[ran];
		arr[ran] = arr[i];
		arr[i] = temp;
	}
	return arr;
}

生成卡片渲染到页面

function renderCard() {
	var rCardArr = shuffle(cardList);
	var vHtml = "";
	for (var i = 0; i < rCardArr.length; i++) {
		vHtml += `
		<li class="card">
			<div class="back">
				<i class="fa ${rCardArr[i]}"></i>
			</div>
		</li>
		`;
	}
	gameBox.innerHTML = vHtml;
}

```javascript
// 初始化函数
function run() {
	renderCard();
	fnClick();
	clickCount = 0;
	count.innerHTML = clickCount;
}

初始化函数，初次运行或重新运行时使用

// 初始化函数
function run() {
	renderCard();
	fnClick();
	clickCount = 0;
	count.innerHTML = clickCount;
}
run()
//重置
restart.onclick = run;

先判断是否打开open或者已经匹配成功match，记录翻牌次数。
第一次翻牌时只需要翻开并作标记open1
第二次翻牌时翻开后标记open2, 判断图标（open1.innerHTML）是否相等
若匹配成功，则标记为match定住，移除open;
若匹配失败，则一场open。用定时器延迟时间，防止乱码。
无论是否匹配成功，都要关闭第一次的打开，否则会直接进入第二次匹配。

// 点击事件
function fnClick() {
//数组需要获取所有值querySelectorAll
	var liList = gameBox.querySelectorAll('.card'); 
	console.log(liList);
	for (var i = 0; i < liList.length; i++) {
		liList[i].onclick = function() {
			//判断是否打开或者已经匹配成功
			if (this.classList.contains('open') || this.classList.contains('match')) {
				return false;
			}
			clickCount++;
			count.innerHTML = clickCount;

			//第一次打开
			if (!isOpen1) {
				this.classList.add('open1');
				isOpen1 = true;
				return;
			}

			//第二次打开,进入匹配

			this.classList.add('open2');

			var open1 = document.querySelector('.open1');
			var open2 = document.querySelector('.open2');
			//匹配成功
			if (open1.innerHTML == open2.innerHTML) {
				console.log('匹配成功');
				open1.classList.add('match');
				open2.classList.add('match');
				open1.classList.remove('open1');
				open2.classList.remove('open2');
				var matchListLength = gameBox.querySelectorAll('.match').length;

				if (matchListLength == cardList.length) {
					setTimeout(function() {
						alert(`恭喜挑战成功!共用${clickCount}步`)
					}, 500);
				}
			} else { //匹配失败
				setTimeout(function() {
					console.log('匹配失败');
					open1.classList.remove('open1');
					open2.classList.remove('open2');
				}, 500);

			}
			isOpen1 = false;
		}

	}
}

html:
i标签做小图标，具体见网站Font Awescome

<head>
	<meta charset="utf-8">
	<title>翻牌游戏</title>
	<link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<link rel="stylesheet" type="text/css" href="翻牌游戏.css" />
<body>
	<h1>翻牌消除游戏</h1>
	<div id="move">
		<span>移动次数：<span id="count">1</span> Moves</span>
		<i class="fa fa-repeat" id="repeat"></i> <!-- i标签做小图标，具体见网站Font Awescome -->
	</div>
	<!-- 游戏框 -->
	<ul class="game-box">
	</ul>
</body>

css:

*{
	margin: 0;
	padding: 0;
	list-style: none;
}

h1{
	margin: 10px;
	text-align: center;
}
#move{
	width: 400px;
	margin: 5px auto;
	display: flex;
	justify-content: space-between;
}
#repeat{
	cursor:pointer;
}
.game-box{
	width: 550px;
	height: 550px;
	background-image: linear-gradient(to bottom,#ffff00,#55aaff);/* 设置渐变色的背景 */
	border-radius: 10px;
	margin: auto;
	padding: 25px;
	display: flex;
	flex-wrap: wrap;/* 当子元素溢出父容器时自动换行。 */
	justify-content: space-around;
	align-content: space-around;
}
.game-box li{
	position: relative;
	background-color: #FFFFFF;
	width: 120px;
	height: 120px;
	background-color: #2F3C4A;
	border-radius: 10px;
	line-height: 120px;/* 设置行高 */
	text-align: center;/* 小图标属于字体 */
	font-size: 35px;
	color: #FFFFFF;
	transition: all .5s;/* 控制旋转时间 */
	transform-style: preserve-3d; /* 3d渲染 */
	cursor:pointer;
}

/**
 * 卡片
 */
/* 设置尾元素 */
.card .back,.card::before{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background:pink;
	border-radius: 10px;
}
.card::before{
	content: '';
	background: #2e3d49;
}
.card .back{
	transform: rotateY(180deg);
}
	
/* .game-box:hover .card{
	transform: rotateY(180deg);
} */

/* 最多翻转2个 */
.card.open1,.card.open2,.card.match{
	transform:rotateY(180deg);
	cursor: default;
}

/* 配对成功 */
.card.match .back{
	background-color: #55AAFF;
}

西瓜你个皮皮

关注

8
点赞
踩
43

收藏

觉得还不错? 一键收藏
0
评论
js简易翻牌小游戏

js简易翻牌小游戏–学习练手js:将小图标存入数组中，一共8组。//包含所有卡片的数组var cardList = ['fa-diamond', 'fa-diamond', 'fa-paper-plane-o', 'fa-paper-plane-o', 'fa-anchor', 'fa-anchor', 'fa-bolt', 'fa-bolt', 'fa-cube', 'fa-cube...
复制链接

扫一扫