连连看html游戏全代码js、jquery操作

运行图片
目录路径
连连看水果方块版.html
连连看算法
进行下一个游戏的开发！
注意事项

我会把html文件、css文件提供下载地址，文件夹路径也展示给大家。但是图片就不给大家了，毕竟博主辛辛苦苦做出来的游戏。但是我其实是很愿意给那些为了自己锻炼而需要参考我的代码的同志们。所以，大家有需要的话

点击下载：https://download.csdn.net/download/qq_43592352/12368553

运行图片

目录路径

连连看水果方块版.html

<html>
<head><title>水果连连看</title><link rel="stylesheet" type="text/css" href="css/style.css"/><script src="jquery-3.3.1.js" type="text/javascript"></script>
</head>
<body style="background:rgba(161, 92, 2, 0.651)"><div id=container><div id=left-tab><div id=tab_time class=tabStyle><p><span></span></p></div><button id=re_button>重新开始</button></div><div id=right-con><div id=gameBox></div></div></div>
</body><script  type="text/javascript">var boxDomArray=new Array();var boxDomNum=196;var hasSelected=0;var selectedIndex=-1;var fruitPic=new Array('','css/img/1.png','css/img/2.png','css/img/3.png','css/img/4.png','css/img/5.png','css/img/6.png','css/img/7.png','css/img/8.png','css/img/9.png','css/img/10.png','css/img/11.png','css/img/12.png','css/img/13.png');/**********************自定义便捷函数*******************************/
function getRandom(min,max){//获取在区间[min.max]内的int数var s;s=parseInt(Math.random()*max+1);while(s<min){s=parseInt(Math.random()*max+1);}return s;}var initDataFlag=new Array();
for(var i=0;i<boxDomNum;i++)initDataFlag[i]=-1;function isNum(num){var flag=0;for(var i=0;i<boxDomNum;i++)if(num==initDataFlag[i]) flag=1;return flag;
}
/**************************系统设置*****************************************//***封装游戏容器居中*****/function onResizeContainer(){var screenHeight=parseInt($(window).height()); //浏览器时下窗口可视区域高度var screenWidth=parseInt($(window).width()); //浏览器时下窗口可视区域高度var containerHeigth=parseInt($("#container").height());//container容器高度var containerWidth=parseInt($("#container").width());//container容器宽度$("#container").css({'marginLeft':(screenWidth-containerWidth)/2+'px','marginTop':(screenHeight-containerHeigth)/2+'px',})}onResizeContainer();//时间var minute=0,second=0;function timedCount(){if(second==60) {second=0;minute++;}second++;$("span")[0].innerHTML="时间 "+(minute>9?minute:"0"+minute)+":"+(second>9?second:"0"+second);setTimeout("timedCount()",1000); }timedCount();
/******************************游戏开始****************************///初始化196个方格容器、html的文本function initialHtml(i){var div=$('<div class=box index='+i+' exist=1></div>');$("#gameBox").append(div);}for(var i=0;i<196;i++) initialHtml(i);//初始化游戏图片、数据以及一些后台数据function initialData(){for(var i=0;i<boxDomNum;i++)//把196个格子存为jq对象数组，方便访问，注意boxDomArray是全局变量boxDomArray[i]=$(".box").eq(i);for(var i=0;i<98;i++){var nowData=getRandom(1,13);var color=['','yellow','green','grey','wheat','sandybrown','red','pink','purple','teal','violet'];var data_l=getRandom(0,196)-1,data_r=getRandom(0,196)-1;while(isNum(data_l)) data_l=getRandom(0,196)-1;while(isNum(data_r)||data_l==data_r) data_r=getRandom(0,196)-1;initDataFlag[i*2]=data_l;initDataFlag[i*2+1]=data_r;boxDomArray[data_l].attr('value',nowData);boxDomArray[data_r].attr('value',nowData);boxDomArray[data_l].css('background','url('+fruitPic[nowData]+')');boxDomArray[data_r].css('background','url('+fruitPic[nowData]+')');}}initialData();$(".box").on("click",function(e){if(hasSelected==0){if($(e.target).attr("exist")!=0){$(e.target).css('border','1px solid black');selectedIndex=$(e.target).attr('index');hasSelected=1;}}else if(hasSelected==1){//判定操作if($(e.target).attr("index")!=selectedIndex){var nowIndex=$(e.target).attr('index');boxDomArray[selectedIndex].css('border','none');if(check_1(selectedIndex,nowIndex)){boxDomArray[selectedIndex].attr("exist",0);boxDomArray[nowIndex].attr("exist",0);boxDomArray[selectedIndex].css("background",'none');boxDomArray[nowIndex].css("background",'none');}else if(check_2(selectedIndex,nowIndex)){boxDomArray[selectedIndex].attr("exist",0);boxDomArray[nowIndex].attr("exist",0);boxDomArray[selectedIndex].css("background",'none');boxDomArray[nowIndex].css("background",'none');}else if(check_3(selectedIndex,nowIndex)){boxDomArray[selectedIndex].attr("exist",0);boxDomArray[nowIndex].attr("exist",0);boxDomArray[selectedIndex].css("background",'none');boxDomArray[nowIndex].css("background",'none');}//初始化状态hasSelected=0;selectedIndex=-1;}}})$("#re_button").on('click',function(){hasSelected=0;selectedIndex=-1;for(var i=0;i<boxDomNum;i++)initDataFlag[i]=-1;initialData();})function check(index1,index2){//检测直线连通、无拐点console.log("check!");var x1=parseInt(index1/14);var y1=parseInt(index1%14);var x2=parseInt(index2/14);var y2=parseInt(index2%14);index1=parseInt(index1);index2=parseInt(index2);if(x1==x2){if(Math.abs(y1-y2)!=1){for(var i=1;i<=Math.abs(y1-y2)-1;i++){if(y1>y2) index1=index2;if(boxDomArray[index1+i].attr("exist")==1) return 0;}}return 1;}else if(y1==y2){if(Math.abs(x1-x2)!=1){for(var i=1;i<=Math.abs(x1-x2)-1;i++){if(x1>x2) index1=index2; if(boxDomArray[index1+i*14].attr("exist")==1) return 0;}}return 1;}return 0;}function check_1(index1,index2){//检测连通类型1console.log("CHECK_1!");if(boxDomArray[index1].attr("value")!=boxDomArray[index2].attr("value")) return 0;if(check(index1,index2)) return 1;return 0;}function check_2(index1,index2){//检测连通类型2console.log("CHECK_2!");var x1=parseInt(index1/14);var y1=parseInt(index1%14);var x2=parseInt(index2/14);var y2=parseInt(index2%14);index1=parseInt(index1);index2=parseInt(index2);//两个交点，坐标分别为:(x1,y2)、(x2,y1)var index3=x1*14+y2;var index4=x2*14+y1;if(boxDomArray[index1].attr("value")!=boxDomArray[index2].attr("value")) return 0;//颜色相同才可以消除if(boxDomArray[index3].attr("exist")!=1)if(check(index3,index1)&&check(index3,index2)) return 1;if(boxDomArray[index4].attr("exist")!=1)if(check(index4,index1)&&check(index4,index2)) return 1;return 0;}function check_3(index1,index2){//检测连通类型3console.log("check3");var x1=parseInt(index1/14);var y1=parseInt(index1%14);var x2=parseInt(index2/14);var y2=parseInt(index2%14);index1=parseInt(index1);index2=parseInt(index2);if(boxDomArray[index1].attr("value")!=boxDomArray[index2].attr("value")) return 0;//颜色相同才可以消除for(var i=0;i<14;i++)//对行遍历{if(i==y1) continue;var index3=x1*14+i;if(boxDomArray[index3].attr("exist")==1||check(index1,index3)==0) continue;else{var x3=parseInt(index3/14);var y3=parseInt(index3%14);var index4=x3*14+y2;var index5=x2*14+y3;if(boxDomArray[index4].attr("exist")!=1)if(check(index4,index3)&&check(index4,index2)) return 1;if(boxDomArray[index5].attr("exist")!=1)if(check(index5,index3)&&check(index5,index2)) return 1;}}for(var i=0;i<14;i++)//对列遍历{if(i==x1) continue;var index3=i*14+y1;if(boxDomArray[index3].attr("exist")==1||check(index1,index3)==0) continue;else{var x3=parseInt(index3/14);var y3=parseInt(index3%14);var index4=x3*14+y2;var index5=x2*14+y3;if(boxDomArray[index4].attr("exist")!=1)if(check(index4,index3)&&check(index4,index2)) return 1;if(boxDomArray[index5].attr("exist")!=1)if(check(index5,index3)&&check(index5,index2)) return 1;}}return 0;}
</script>
</html>

连连看算法

博主这里采用了相关的算法，这里进行解释。

首先，我们知道，在连连看游戏中，两个相同图片有三种方式相连：
1，直线相连，即有0个拐点相连
2，有1个拐点相连
3，有2个拐点相连

假设现在有点index1(x1，y1)，index2(x2，y2)。

进行下一个游戏的开发！

指尖大冒险、跳一跳
是男人就下一百层

注意事项

【1】原创博客，转载本篇请与我联系，尊重版权。
【2】关于阅读本篇博客的所有问题、代码源码、图片素材、编程技巧、编程经历都可联系我，与我交流讨论。
【3】 本人部分时间承接各种毕业设计、网站编写、微信小程序编写、数据库作业编写。需要请加QQ：1460787433，详聊。

连连看html游戏全代码js、jquery操作相关推荐

飞机大战html游戏全代码js、jquery操作
飞机大战html游戏全代码博主的话运行图片目录路径飞机大战.html style.css 进行下一个游戏的开发! 注意事项博主的话当时博主只会html,css和原生JavaScript,假 ...
指尖大冒险、跳一跳升级版html5游戏全代码
指尖大冒险.跳一跳升级版html游戏全代码博主的话文件目录运行图片指尖大冒险.html style.css 进行下一个游戏的开发! 博主的话这是最后一个纯原生js代码编出来的游戏了.我连这个 ...
json.js+ jquery 操作笔记
json.js+ jquery 操作笔记 json.js下载地址: http://www.json.org/js.html 我初学JSON,按照官方说明,在json2.js中有parse和string ...
html游戏代码_JS实现连连看小游戏，代码很简单，思路很清晰！
前言:这是web前端源码交流QQ群:828036770领取素材资料开发工具和听课权限!每日仅限300名!!! 这是一款比较经典的连连看游戏源码,规则比较简单,基于html5实现的连连看网页游戏.游戏目 ...
js jquery操作的方面xml dom html dom css dom
1 xml dom 类似xml document 操作 --文档处理 js createTextNode createElementNode ... jq ...
JS/JQuery操作iframe元素
JS操作iframe元素父页面操作子页面 //获取iframe元素 var oIframe = document.getElementById('iframe1');oIframe.contentW ...
多关卡连连看php源码_前端实现连连看小游戏实例代码
博主玩了这么久的连连看,居然是第一次发现,连连看最多只能有2个转弯.orz- 在网上搜索连连看的连线算法判断,并没有找到很全面的,经过自己摸索之后,画了下面的图(图有点丑--) 一. 2个物体在同一直 ...
JS JQuery 操作: Json转 Excel 下载文件
方法的调用 var json = '[' + '{"申请流水号":"123456","保险公司":"测试数据",&quo ...
“是男人就下一百层”h5游戏全网最详细教学、全代码，js操作
"是男人就下一百层"h5游戏全网最详细教学.全代码,js操作博主的话游戏展示编程工具介绍游戏代码代码讲解 js 第一步切换div的显示与隐藏 js 第二步在菜单页面用 ...

连连看html游戏全代码js、jquery操作

连连看html游戏全代码js、jquery操作

运行图片

目录路径

连连看水果方块版.html

连连看算法

进行下一个游戏的开发！

注意事项

连连看html游戏全代码js、jquery操作相关推荐

最新文章

热门文章