如何用JavaScript编写一个简单的翻牌记忆游戏来识别长尾关键词？

2026-04-03 06:401阅读0评论SEO资讯

内容介绍
文章标签
相关推荐

本文共计1033个文字，预计阅读时间需要5分钟。

原文：本文实例为大家分享了js实现简单翻牌小游戏的整体代码，供大家参考。内容如下：

1. 简介一个非常简单的网络消消乐小游戏实现，代码量较少，未遇到bug和自行开发的过程。

改写后：

1.简介

分享一个简单的网络消消乐小游戏实现代码，代码量少，无bug，开发过程自主。

本文实例为大家分享了js实现简单翻牌小游戏的具体代码，供大家参考，具体内容如下

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个背景图片随机分布

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存储上个图片的index,；利用id2存储上个图片的id
再进行以下操作比较

图片操作函数

重置页面函数

function re(){ window.location.reload(); }

页面的设计

3.已知bug 说明（已解决）

1.点击图片本身两次导致匹配成功

解决方式：加入id判断是否为自身比较

f==index&&id!=id2

2.已匹配的图片再次点击会消除

解决方式：加入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

实现效果

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持自由互联。

标签：实现简单翻牌小游戏本文