js实现连连看游戏
更新时间：2022年05月09日 12:31:49 作者：IT-Aurora
这篇文章主要为大家详细介绍了js实现连连看游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了js实现连连看游戏的具体代码，供大家参考，具体内容如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style type="text/css">
*{
margin: 0;
padding: 0;
}
ul{
width: 400px;
height: 400px;
border: 1px solid goldenrod;
margin: 30px auto;
list-style: none;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
li{
width: 100px;
height: 100px;
border: 1px solid goldenrod;
text-align: center;
line-height: 100px;
font-size: 30px;
/*怪异盒模型*/
box-sizing: border-box;
}
</style>
<title></title>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>
<script type="text/javascript">
//1.获取标签
var liArray = document.getElementsByTagName("li");
//2.定义变量
var numArray = [];
//3.封装函数
//随机数
function randomNum(min, max){
return Math.floor(Math.random() * (max - min + 1) + min);
}
//随机颜色
function randomColor(){
var red = randomNum(0, 255);
var green = randomNum(0, 255);
var blue = randomNum(0, 255);
return "rgb(" + red + "," + green + "," + blue + ")";
}
//封装函数 用于填满数组
function setNumberArray(){
//16个数 两两相等
for(var i = 0; i < 8; i++){
var temp = randomNum(30, 90);
//卡着!!一旦随机数已经出现过!就重新再取数字!
//标记 查看是否可用
var isExits = false;//默认希望temp不存在
//经过for循环遍历对比
for(var j = 0; j < numArray.length; j++){
if(temp == numArray[j]){
//随机数已经出现过了!
isExits = true;
break;//结束 for..j循环
}
}
//for..j结束 查看isExits的标记状态
if(isExits == false){
//随机数可用
numArray.push(temp);
numArray.push(temp);
}else{
i--; //此次循环失效!i-- 再来一次!!
}
}
//循环结束 16个数字已经进入数组中
console.log(numArray);
//打乱数组
crash(numArray);
console.log(numArray);
}
//调用函数
setNumberArray();
//封装打乱数组的函数
function crash(arr){
for(var i = 0; i < 15; i++){
var n1 = randomNum(0, 15);
//16个元素,下标是0---15
var n2 = randomNum(0, 15);
if(n1 != n2){
var t = arr[n1];
arr[n1] = arr[n2];
arr[n2] = t;
}
}
}
//封装函数 用于设置li标签
function setLiArray(){
for(var i = 0; i < liArray.length; i++){
//赋值文本 li的个数和数字个数一致! 所以下标也一致!
liArray[i].innerHTML = numArray[i];
//设置字体颜色随机
liArray[i].style.color = randomColor();
//设置li的背景颜色
liArray[i].style.backgroundColor = randomColor();
}
}
//调用函数
setLiArray();
//--------------------------------
//给li添加点击事件
//专门定义一个数组 来存储点击的li标签
var arr = [];
for(var i = 0; i < liArray.length; i++){
liArray[i].onclick = function(){
arr.push(this);
console.log(arr);
//两个就得判断
if(arr.length == 2){
//不能重复点击一个标签且点击的两个标签值还得一样
if(arr[0] != arr[1] && arr[0].innerHTML == arr[1].innerHTML){
//消除成功!
arr[0].style.visibility = "hidden";
arr[1].style.visibility = "hidden";
}
//在这里 只要arr中存储了两个li 就清空 为下次存储li做准备
arr = [];
}
}
}
</script>运行结果：
点两个数字相同的棋子：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
深入学习js函数的隐式参数 arguments 和 this
这篇文章主要介绍了 深入学习js函数的隐式参数 arguments 和 this，arguments是一个类数组结构，它保存了调用时传递给函数的所有实参；this是函数执行时的上下文对象, 这个对象有些让人感到困惑的行为。 下面分别对他们进行讨论。,需要的朋友可以参考下2019-06-06
这篇文章主要为大家介绍了uniapp界面新增水印实现示例，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-07-07
javascript禁制后退键(Backspace)实例代码
这篇文章介绍了javascript禁制后退键(Backspace)实例代码，有需要的朋友可以参考一下2013-11-11
这篇文章主要为大家详细介绍了原生JS实现简单放大镜效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-02-02
在本篇文章里我们给大家整理了关于JavaScript中表单注册、表单验证、运算符的代码示例，有兴趣的朋友们可以测试学习下。2018-10-10
这篇文章主要介绍了微信小程序rich-text富文本用法,结合实例形式分析了微信小程序rich-text富文本插件的功能、用法及相关操作注意事项,需要的朋友可以参考下2019-05-05
这篇文章主要介绍了微信小程序 路线规划实现过程详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2019-08-08
JavaScript知识点总结(十六)之Javascript闭包（Closure）代码详解
闭包是可以包含自由（未绑定）变量的代码块；这些变量不是在这个代码块或者任何全局上下文中定义的，而是在定义代码块的环境中定义。本文主要介绍了javascript中的闭包,感兴趣的朋友一起看看吧2016-05-05
这篇文章主要介绍了JS取得绝对路径的实现代码,需要的朋友可以参考下2015-01-01
这篇文章主要介绍了JavaScript实现求最大公共子串的方法,涉及javascript针对字符串的遍历、匹配、运算等相关操作技巧,需要的朋友可以参考下2018-02-02
最新评论