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连连看源码完美注释版(推荐)
闲来无事,也写一个javascript连连看,注释比较完整,想学的朋友可要看了. 连连看最难的部分应该是路径搜索,即鼠标点的两点之间看有无可通的路径. 看过有人写的递归写法,心里痒痒,就捉摸了一下,发现不用递归的情况下难度也不大. 路径搜索由简到难分析,先分析一条直线上是否可直线连通,再分析一条直线上的两点通过拐两个弯是否可通,最后分析不在一条直线上的情况. 在IE6, IE8, firefox3.0.3下测试过. 复制代码 代码如下: <html><head><meta h
-
JavaScript实现连连看连线算法
本文实例为大家分享了JavaScript实现连连看连线算法的多种情况,供大家参考,具体内容如下 第一种情况为两个精灵能通过一条直线连接,如下图 代码如下: var self = this; //用self变量来保存当下的这个this,以免在其他函数域中this指向不同对象而调用错误 //直线连接的两个对象 function isDirectLink(_begin,_end){ //若传入的是同一对象,连线的长度为0,返回false row col 分别表示精灵的行号和列号 if(_begin.r
-
原生JavaScript编写canvas版的连连看游戏
本文实例为大家分享了JavaScript编写canvas版的连连看游戏的具体实现代码,供大家参考,具体内容如下 效果图: 实现代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> #box{ /*border: 1px solid #D1D1D1; */ overflow: hidden; pos
-
使用非html5实现js板连连看游戏示例代码
向大家分享一款如何实现js版连连看游戏,如下图所示: 首先看一下html的布局方式在index.html文件中: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http
-
原生javascript实现连连看游戏
本文实例为大家分享了js实现连连看游戏的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <title>连连看</title> <meta charset="gbk"> <style type="text/css"> body { text-align: center; } .text {text-align: center; margi
-
javascript 连连看代码出炉
0 && TmpInt0 && TmpInt0 && TmpInt0 && TmpInt"; for(j=0; j"; for(i=0; i"; } else{ TmpInt--; Matrix[i][j] = 1 + Math.floor( PicMax * Math.random() ); if(TmpInt"; //添图片(webdings图标) TmpStr += String.fromChar
-
JavaScript编写连连看小游戏
天天看到别人玩连连看, 表示没有认真玩过, 不就把两个一样的图片连接在一起么, 我自己写一个都可以呢. 使用Javascript写了一个, 托管到github, 在线DEMO地址查看:打开 最终的效果图: 写连连看之前要先考虑哪些呢? 1:如何判断两个元素可以连接呢, 刚刚开始的时候我也纳闷, 可以参考这里:打开: 2:模板引擎怎么选择呢, 我用了底线库的template,因为语法简单. 本来想用Handlebars,但是这个有点大啊, 而且底线库也提供很多常用工具方法( •̀ ω •́ )y:
-
用javascript做一个webgame连连看大家看下
最后成品代码写的仓促,没有容错,封装也不合理,只实现了核心部分,其他部分,喜欢添加的旧添加吧. 下面就开始我的教程(姑且算是教程吧,草草写点吧,时间太少,大家原谅) 以最高难度游戏级别作的分析. 第一步,大体分析 看看游戏主要包含哪些元素,发现3部分,一些成对的图片块,一个能盛图片块的方盘容器,一个能连接两个图块的线. 第二步,元素分析 图块:图块一共有32种不同的图案,每种图案4张,图块会相应鼠标的点击,图块会消失,图块有高度和宽度. 方盘:能承载128个图块,2维承载,横向16块,纵向8块,
-
原生JavaScript实现连连看游戏(附源码)
向大家推荐一款原生JavaScript版连连看游戏,源码下载,首页如下图所示: 首先看一下html的布局方式在index.html文件中: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head>
-
js实现连连看游戏
本文实例为大家分享了js实现连连看游戏的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <style type="text/css"> *{ margin: 0; padding: 0
-
js贪吃蛇游戏实现思路和源码
本文实例为大家分享了js贪吃蛇游戏的相关代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>贪吃蛇小游戏</title> <style> *{margin:0; padding:0;} header { display: block; margin: 0 auto;
-
Android实现疯狂连连看游戏之加载界面图片和实现游戏Activity(四)
正如在<我的Android进阶之旅------>Android疯狂连连看游戏的实现之状态数据模型(三)>一文中看到的,在AbstractBoard的代码中,当程序需要创建N个Piece对象时,程序会直接调用ImageUtil的getPlayImages()方法去获取图片,该方法会随机从res/drawable目录中取得N张图片. 下面是res/drawable目录视图: 为了让getPlayImages()方法能随机从res/drawable目录中取得N张图片,具体实现分为以下几步: 通
-
JS实现网页游戏中滑块响应鼠标点击移动效果
本文实例讲述了JS实现网页游戏中滑块响应鼠标点击移动效果.分享给大家供大家参考,具体如下: 这是网页游戏中的一个有趣效果,可以完成以下几个动作:滚动.scroll 8个方向.鼠标坐标获娶对象上下左右位置获取,大家可以自己添加.MoveReady和ScrollReady两个注释掉了 取消注释后防止鼠标连续点击效果叠加. 在线演示地址如下: http://demo.jb51.net/js/2015/js-web-game-click-move-demo/ 具体代码如下: <!DOCTYPE html
-
JS数字抽奖游戏实现方法
本文实例讲述了JS数字抽奖游戏实现方法.分享给大家供大家参考.具体实现方法如下: <!doctype html> <html> <head> <meta charset="utf-8"> <title>新年网页抽奖程序</title> <style type="text/css"> * {margin:0; padding:0;} ul,li {list-style-type:non
-
Android实现疯狂连连看游戏之开发游戏界面(二)
连连看的游戏界面十分简单,大致可以分为两个区域: --游戏主界面区 --控制按钮和数据显示区 1.开发界面布局 本程序使用一个RelativeLayout作为整体的界面布局元素,界面布局上面是一个自定义组件,下面是一个水平排列的LinearLayout. 下面是本程序的布局文件:/res/layout/main.xml <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:andr