JavaScript 实现简易翻牌配对游戏：核心逻辑与 Bug 修复
本文详细介绍使用原生 JavaScript 开发简易翻牌配对游戏的实现过程。内容涵盖利用递归生成随机数列确保图片成对分布，通过 DOM 操作动态生成网格界面，以及处理点击事件时的状态判断。重点解析了防止重复点击自身和已匹配图片消除的 Bug 修复方案，提供完整代码参考与样式设计思路。
本文分享了一个基于 JavaScript 实现的简易翻牌配对游戏的完整代码示例，供开发者参考学习。
项目简介
1. 项目简介
这是一个轻量级的网页版翻牌消除游戏。虽然代码规模不大，但在开发过程中遇到的技术难点及 Bug 修复经历具有一定的参考价值。
核心功能实现
2. 核心功能实现
首先需要通过算法生成随机数列，以确定图片在界面中的随机分布位置。
function getImgIndex(is){
var index = parseInt(Math.random()*8)+1;
if(is[index] < 2){
is[index]++;
} else {
index = getImgIndex(is);
}
return index;
}利用 window.onload 事件初始化页面，将 8 种背景图片随机分配到 16 个网格容器中。
window.onload = function(){
//规则：五个背景图，每张图出现两次，随机分配到16个div中
var ele = document.getElementById("parent");
var imgs = [1,2,3,4,5,6,7,8];
var is = [0,0,0,0,0,0,0,0,0];
for(var i = 0; i < 16; i++){
var index = getImgIndex(is);
console.info(index);
ele.innerHTML += "<div id='k"+i+"' class='kid' "
+"οnclick='oclick(this.id,"+index+");'></div>";
//通过字符串拼接方式，将H5代码发送给网页执行
}
}定义点击事件处理函数。在 oclick 函数中，使用变量 f 记录上一次点击的图片索引，使用 id2 记录上一次点击的元素 ID，随后进行匹配逻辑判断。
function oclick(id,index)
{
if(find[index]<2)
{
if(f==0){
find[index]++;
look(id,index);
f=index;
id2=id;
}
else
{
if(f==index&&id!=id2)
{
find[index]++;
look(id,index);
f=0;
id2=0;
marked++;
}
else
{
find[f]=0;
look(id,index);
look(id2,f);
clearStyle(id);
clearStyle(id2);
f=0;
id2=0;
}
}
}
if(marked==8)
{
alert("恭喜完成");
}
}封装图片显示与样式清除函数，用于控制翻牌动画效果。
function look(id,index){
var ele = document.getElementById(id);
ele.style="background-image: url("+index+".gif);";
}
function clearStyle(id){
setTimeout(function(){
var ele = document.getElementById(id);
ele.style="";
}, 200);
}提供页面重置功能，允许用户重新开始游戏。
function re(){
window.location.reload();
}介绍页面的基础布局与 CSS 样式设计。
<body>
<div id="parent" class="par"></div>
<input type="button" name="b1" id="b1" value="再van♂一次" onclick="re();"/>
</body>已知 Bug 及解决方案
3. 已知 Bug 及解决方案
问题一：连续点击同一张卡片两次会被错误判定为匹配成功。
解决方案：在判断逻辑中加入 ID 比对，确保两次点击的不是同一张卡片。
f==index&&id!=id2问题二：已经匹配成功的卡片再次被点击时，会被错误地消除或重置。
解决方案：引入 find[] 数组统计每张卡片的点击次数，当点击次数超过两次时，不再进行匹配比较。
if(find[index]<2)完整代码示例
4. 完整代码示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
/* 父子网页界面设计 */
.kid{
width: 100px;
height: 100px;
background-color: #aaffff;
border: 1px solid black;
margin: 10px;
float: left;
}
.par{
width: 1000px;
padding: 10px;
border: 1px solid black;
float: left;
}
</style>
<script>
var f=0;
var id2=0;
var find = [0,0,0,0,0,0,0,0,0];
var marked=0;
window.onload = function(){
//规则：五个背景图，每张图出现两次，随机分配到16个div中
var ele = document.getElementById("parent");
var imgs = [1,2,3,4,5,6,7,8];
var is = [0,0,0,0,0,0,0,0,0];
for(var i = 0; i < 16; i++){
var index = getImgIndex(is);
console.info(index);
ele.innerHTML += "<div id='k"+i+"' class='kid' "
+"οnclick='oclick(this.id,"+index+");'></div>";
}
}
function getImgIndex(is){
var index = parseInt(Math.random()*8)+1;
if(is[index] < 2){
is[index]++;
} else {
index = getImgIndex(is);
}
return index;
}
function oclick(id,index)
{
if(find[index]<2)
{
if(f==0){
find[index]++;
look(id,index);
f=index;
id2=id;
}
else
{
if(f==index&&id!=id2)
{
find[index]++;
look(id,index);
f=0;
id2=0;
marked++;
}
else
{
find[f]=0;
look(id,index);
look(id2,f);
clearStyle(id);
clearStyle(id2);
f=0;
id2=0;
}
}
}
if(marked==8)
{
alert("恭喜完成");
}
}
function look(id,index){
var ele = document.getElementById(id);
ele.style="background-image: url("+index+".gif);";
}
function clearStyle(id){
setTimeout(function(){
var ele = document.getElementById(id);
ele.style="";
}, 200);
}
function re(){
window.location.reload();
}
</script>
</head>
<body>
<div id="parent" class="par"></div>
<input type="button" name="b1" id="b1" value="再van♂一次" onclick="re();"/>
</body>
</html>注意：使用时需根据实际资源路径修改图片地址 url。
运行效果展示
以上就是本文的全部内容，希望能为读者的学习提供有益帮助，欢迎继续支持本站获取更多技术分享。
D3.js 比例尺与坐标轴的配置详解
2026-11-05 16:54:46
JavaScript怎么遍历对象的Symbol键和不可枚举属性
2026-11-05 13:13:39
封装一个健壮的JS字符串判空工具函数
2026-11-05 12:16:14
JavaScript合并数组的三种常用方法：concat、扩展运算符与push
2026-11-05 11:22:29
JavaScript立即执行函数(IIFE)是什么及基本语法
2026-11-05 10:51:19