本文实例为大家分享了js实现翻牌小游戏的具体代码，供大家参考，具体内容如下效果图需求分析1、生成两组顺序随机的1-8数据
2、卡片需要有翻转效果
3、两次翻转数据不相等，回复原状
4、两次翻转数据相等，卡片相等，不能再被点击
5、当所有卡片不能被点击游戏结束
6、限制最大点击次数50次
HTML结构

css布局
实现卡片翻转效果需要3个关键属性1.perspective: 1000px; 透视深度，形成3d视角
2.transform: rotateY(180deg);旋转
3.backface-visibility: hidden; 元素背面不可见

* {

margin: 0;

padding: 0;
}

body,
html {

height: 100%;
}

.wrap {

perspective: 1000px;

width: 320px;

height: 320px;

position: absolute;

top: 0;

bottom: 0;

left: 0;

right: 0;

margin: auto;

display: flex;

justify-content: center;

text-align: center;

flex-wrap: wrap;
}

.wrap div {

/* box-shadow: 5px 5px 10px #000; */

transition: 1s;

position: relative;

text-align: center;

line-height: 60px;

height: 60px;

width: 60px;

border-radius: 10px;


margin: 10px 10px;
}

.wrap div .active1 {

transform: rotateY(180deg);
}

.wrap div .active2 {

transform: rotateY(360deg);
}

.wrap p {

border-radius: 10px;

background-color: blueviolet;

transition: 1s;

backface-visibility: hidden;

display: block;

height: 60px;

width: 60px;

position: absolute;

/* transform: rotateY(180deg); */
}

.wrap .bottom {

transform: rotateY(180deg);
}
h3{

text-align: center;

width: 200px;

height: 30px;

margin: 150px auto;
}
* {

margin: 0;

padding: 0;
}

body,
html {

height: 100%;
}

.wrap {

perspective: 1000px;

width: 320px;

height: 320px;

position: absolute;

top: 0;

bottom: 0;

left: 0;

right: 0;

margin: auto;

display: flex;

justify-content: center;

text-align: center;

flex-wrap: wrap;
}

.wrap div {

/* box-shadow: 5px 5px 10px #000; */

transition: 1s;

position: relative;

text-align: center;

line-height: 60px;

height: 60px;

width: 60px;

border-radius: 10px;


margin: 10px 10px;
}

.wrap div .active1 {

transform: rotateY(180deg);
}

.wrap div .active2 {

transform: rotateY(360deg);
}

.wrap p {

border-radius: 10px;

background-color: blueviolet;

transition: 1s;

backface-visibility: hidden;

display: block;

height: 60px;

width: 60px;

position: absolute;

/* transform: rotateY(180deg); */
}

.wrap .bottom {

transform: rotateY(180deg);
}
h3{

text-align: center;

width: 200px;

height: 30px;

margin: 150px auto;
}js

class Game {

constructor(selector) {

this.init(selector);

}

init(selector) {

let arr = this.randomArr();

this.nodes = [...document.querySelectorAll(selector)];//获取每一个卡片

this.step = 50;//定义可以被点击的次数

this.tit = document.querySelector("h3");

this.nodes.forEach((item,index) => {//初始化卡片的值，并保存在num属性中

item.children[1].innerHTML = arr[index];

item.num = arr[index];

var that = this

item.onclick = function () {//给每一个卡片绑定事件

that.handle(this);

}

})

}

handle(ele) {

if(this.step === 0){

alert('游戏结束')

return

}

if(ele.active !== true){

this.step--;

this.tit.innerText = `剩余步数：${this.step}`

}

ele.children[0].classList.add('active1');//卡片翻转

ele.children[1].classList.add('active2');

let res = this.nodes.filter(item => item.children[0].classList.contains('active1')&& item.active !== true); //获取翻过来的且没有配对成功的卡片

if(res.length === 2 && res[0].num !== res[1].num){//如果有两张并且数值不相等，恢复原状

setTimeout(()=>{

res[0].children[0].classList.remove('active1');

res[0].children[1].classList.remove('active2');

res[1].children[0].classList.remove('active1');

res[1].children[1].classList.remove('active2');

},1000)//延迟一秒形成动画

}else if(res.length === 2 && res[0].num === res[1].num){//如果数值相等则配对成功

res[0].active = true;//锁定卡片

res[1].active = true;

}

}

randomArr() {

let arr = [];

for (let i = 0, n = 8; i < n; i++) {

do {

var item = randomInt(1, 8);

} while (arr.indexOf(item) !== -1)

arr.push(item);

}

arr.push(...arr);

return arr;

}
}
new Game('.wrap div')
function randomInt(min, max) {//产生[min,max]范围内的整数
return Math.round(Math.random() * (max - min)) + min
}
class Game {

constructor(selector) {

this.init(selector);

}

init(selector) {

let arr = this.randomArr();

this.nodes = [...document.querySelectorAll(selector)];//获取每一个卡片

this.step = 50;//定义可以被点击的次数

this.tit = document.querySelector("h3");

this.nodes.forEach((item,index) => {//初始化卡片的值，并保存在num属性中

item.children[1].innerHTML = arr[index];

item.num = arr[index];

var that = this

item.onclick = function () {//给每一个卡片绑定事件

that.handle(this);

}

})

}

handle(ele) {

if(this.step === 0){

alert('游戏结束')

return

}

if(ele.active !== true){

this.step--;

this.tit.innerText = `剩余步数：${this.step}`

}

ele.children[0].classList.add('active1');//卡片翻转

ele.children[1].classList.add('active2');

let res = this.nodes.filter(item => item.children[0].classList.contains('active1')&& item.active !== true); //获取翻过来的且没有配对成功的卡片

if(res.length === 2 && res[0].num !== res[1].num){//如果有两张并且数值不相等，恢复原状

setTimeout(()=>{

res[0].children[0].classList.remove('active1');

res[0].children[1].classList.remove('active2');

res[1].children[0].classList.remove('active1');

res[1].children[1].classList.remove('active2');

},1000)//延迟一秒形成动画

}else if(res.length === 2 && res[0].num === res[1].num){//如果数值相等则配对成功

res[0].active = true;//锁定卡片

res[1].active = true;

}

}

randomArr() {

let arr = [];

for (let i = 0, n = 8; i < n; i++) {

do {

var item = randomInt(1, 8);

} while (arr.indexOf(item) !== -1)

arr.push(item);

}

arr.push(...arr);

return arr;

}
}
new Game('.wrap div')
function randomInt(min, max) {//产生[min,max]范围内的整数
return Math.round(Math.random() * (max - min)) + min
}以上就是本文的全部内容，希望对大家的学习有所帮助。