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>运行结果：
点两个数字相同的棋子：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了详解CocosCreator项目结构机制，只有了解这些机制后，才能更好的进行项目开发，避免潜在错误，并且快速的除错2021-04-04
Javascript获取background属性中url的值
Javascript获取CSS中属性值方法有很多，今天工作的时候遇到了一个问题是需要利用Javascript获取css中background-img属性url的值，通过查阅网站的资料找到了解决方法，现在将方法分享给大家，有需要的朋友们们可以参考借鉴，下面来一起看看吧。2016-10-10
下面小编就为大家带来一篇浅谈js for循环输出i为同一值的问题。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-03-03
这篇文章主要为大家详细介绍了JavaScript实现商品放大镜效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-10-10
这篇文章主要分享了一则javascript 调试技巧,需要的朋友可以参考下2015-01-01
JavaScript 进阶问题列表(各种js代码段1-65)
从基础到进阶,测试你有多了解 JavaScript,刷新你的知识,或者帮助你的 coding 面试！ :muscle: :rocket: 我每周都会在这个仓库下更新新的问题2024-11-11
这篇文章主要介绍了JS使用正则截取两个字符串之间的字符串实现方法,结合实例形式简单分析了JS正则匹配与截取操作的实现技巧,并拓展分析了数量词的概念与功能,需要的朋友可以参考下2017-01-01
这篇文章主要为大家详细介绍了javascript实现图片轮播简单效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-07-07
Javascript 判断客户端是否为 PC 还是手持设备，有时候项目中需要用到，很方便的检测，源生的哦，方法一共有两种2014-04-04
这篇文章主要介绍了微信小程序如何调用新闻接口实现列表循环,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2019-07-07
最新评论