利用html css javascript写翻翻乐小游戏

废话不多说，先看效果

代码放到文章末尾，不想看代码解释的可以直接跳过到后面直接下载

我写这个小游戏的过程

1.准备图片
   我在觅元素上找了一些小动物的图片来当做我翻牌的图片，然后利用ps将他们都改成了50x50像素大小统一的图片
2.游戏画面布局
   我设定了游戏画面为10x10的100个宽度为50像素的方格。每个格子是一个div（div里面还有span用来做翻牌的背面），每行十个div装进一个li，一共10行也就是10个li，整个游戏界面是一个ul。

简单的设置span的背景色和每个格子（div）的margin就可以看到整个布局的效果：

3.利用js给每个格子（div）加上小动物（背景图片）
   需要注意的是

1. 此时加上背景图后是看不到的，因为div中的span会挡住div的背景图，想查看插入效果可以暂时将span标签的背景色给去掉。
2. 要设法控制每张图片出现的次数必须是偶数，不然肯定会有剩余没法消除的牌，游戏就没法玩了。

我在这里控制了十张图，每张图出现十次，然后随机将这100张图插入100个div当背景。上代码：

var img_data = [];
for(var i = 0;i < 10;i++){
	_img = {
		src: './img/' + i + '.png',
		number:0
	};
	img_data.push(_img);
}
// 分配背景图片
for (var i = 0;i < lis.length;i++){
	_div = lis[i].getElementsByTagName('div');
	for(var j = 0;j < _div.length;j++){
		writeBackground(_div[j]);
	}
}

function writeBackground (element){
	let rand = parseInt(Math.random() * 10)
	if(img_data[rand].number < 10){
		element.style.background = "url( " + img_data[rand].src + " ) no-repeat";
		img_data[rand].number++;
		element.img_index = rand;
	}else{
		writeBackground(element)
	}
}

4.理清游戏规则，转换为js代码

• 首先，我们先来理清游戏规则
  • 玩家点击鼠标左键可以翻牌
  • 玩家连续点击两张牌，若两张牌一样，则‘消除’
  • 玩家连续点击两张牌，若两张牌不一样，则自动翻回去
  • 所有牌全部消除，游戏结束
• 转化为js代码后
  • 玩家点击每个div，div都会进行3d翻转到180°
  • 玩家连续点击两个div之后触发判断，若两个div背景图一样，则取消这两个div的背景图，同时取消这两个div的3d翻转（点击无效）；若这两个div背景图不一样，则自动再次进行3d翻转到0°翻回背面。
  • 若所有div都没有背景图，游戏结束

想明白这些以后，就可以根据规则写自己的代码了，用js将这些规则实现出来，整个游戏就完成了。上代码：

var lis = document.getElementById('bg').getElementsByTagName('li');
for (var i = 0;i < lis.length;i++){
	_div = lis[i].getElementsByTagName('div');
	for(var j = 0;j < _div.length;j++){

		_div[j].onclick = function(){
			this.judge = false;
			flip(this, this.judge);
			var click = document.getElementsByClassName('click');
			if(click.length == 2){
				let click1 = click[0];
				let click2 = click[1];
				if(click1.img_index == click2.img_index){
					var t = setTimeout(() => {
						click1.style.background = 'unset';
						click2.style.background = 'unset';
						click1.setAttribute('class', '');
						click1.onclick = null;
						click2.setAttribute('class', '');
						click2.onclick = null;
					}, 500);
				}else{
					var t = setTimeout(function() {
						flip(click1, true);
						flip(click2, true);
					}, 500);
					click1.setAttribute('class', '');
					click2.setAttribute('class', '');
				}
			}
		}
		
	}
}

function flip (element, judge){
	if(judge){
		element.style.transform = 'rotateY(0deg)';
		element.judge = false;
	}else if(!judge && document.getElementsByClassName('click').length < 2){
		element.style.transform = 'rotateY(180deg)';
		element.judge = true;
		element.className = 'click';
	}
}

自此，大功告成！！！

获取完整代码看这里：https://pan.baidu.com/s/1FMuIM2ybMj5FUKDx_d5ISQ
提取码：xx4l