JS連連看原始碼完美註解版(推薦)_javascript技巧-js教程-PHP中文網

首頁

web前端

js教程

JS連連看原始碼完美註解版(推薦)_javascript技巧

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 05:10 PM

閒來無事，也寫一個javascript連連看，註解比較完整，想學的朋友可要看了。

連連看最困難的部分應該是路徑搜索，即滑鼠點的兩點之間看有無可通的路徑。看過有人寫的遞歸寫法，心裡癢癢，就捉摸了一下，發現不用遞歸的情況下難度也不大。

路徑搜尋由簡到難分析，先分析一條直線上是否可直線連通，再分析一條直線上的兩點通過拐兩個彎是否可通,最後分析不在一條直線上的情況.

在IE6, IE8, firefox3.0.3下測試.

複製程式碼程式碼

JS连连看源码完美注释版

<script><BR>//以下部分为路径搜索算法部分,与表现层无关
<P>//全局变量<BR>var X = 16;//总行数<BR>var Y = 14;//总列数<BR>var types = 15;//图形种类
<P>//布局矩阵<BR>//为了算法方便，矩阵的第一行，第一列，最后一行，最后一列都标注为0，天然通路。<BR>var arr = new Array(Y);<BR>var tbl;//显示布局的table元素
<P>var p1 = null;//搜索路径用的第1个点的坐标<BR>var p2 = null;//搜索路径用的第2个点的坐标<BR>var e1 = null;//第1个点对应的元素<BR>var e2 = null;//第2个点对应的元素<P>//路徑搜索，給出兩個點，搜尋出通路<BR>//通路用可連通的點表示<BR>function getPath(p1, p2){<BR> //開始搜尋前對p1 ,p2排序，使p2盡可能的在p1的右下方。 <BR> //這樣做可以簡單化演算法<BR> if(p1.x>p2.x){<BR>  var t = p1; <BR>  p1 = p2;<BR>  p2 = t <<🎠 <BR> else if(p1.x==p2.x){<BR>  if(p1.y>p2.y){<BR>   var t = p1; <BR>   p1 = p2;< t; <BR>  }<BR> }<BR> //透過分析連連看中兩點之間的位置關係，逐步由簡到難分析每一種類型<BR> //第一種類型， 兩點是否在一條直線上，且兩點之間可直線連通<BR> if((onlineY(p1, p2)||onlineX(p1, p2)) && hasLine(p1, p2)){<BR>  status = ' type 1';<BR>  return [p1,p2];<BR> }<BR> //第二種類型， 如果兩點中任何一點被全包圍，則不通。 <BR> if( !isEmpty({x:p1.x, y:p1.y 1}) && !isEmpty({x:p1.x, y:p1.y-1}) && !isEmpty({x: p1.x-1, y:p1.y}) && !isEmpty({x:p1.x 1, y:p1.y}) ){<BR>  status = 'type 2';<BR>  return null; <BR> }<BR> if( !isEmpty({x:p2.x, y:p2.y 1}) && !isEmpty({x:p2.x, y:p2.y-1}) && !isEmpty ({x:p2.x-1, y:p2.y}) && !isEmpty({x:p2.x 1, y:p2.y}) ){<BR>  status = 'type 2';<BR>  return null;<BR> }<BR> //第三種類型， 兩點在一條直線上，但是不能直線連接<BR> var pt0, pt1, pt2, pt3;<BR> //如果都在x軸，則由左至右掃描可能的路徑，<BR> //每次構造4個頂點pt0, pt1, pt2, pt3，然後看他們兩兩之間是否連通<BR> if(onlineX(p1, p2 )){<BR>  for(var i=0; i<Y; i ){<BR>   if(i==p1.y){<BR>    continue;<> 🎜>   pt1 = {x: p1.x, y: i};<BR>   pt2 = {x: p2.x, y: i};<BR>   pt3 = p2;<BR>  ，則該路不通。 <BR>   if(!isEmpty(pt1) || !isEmpty(pt2)){<BR>    continue;<BR>   }<BR>  continif( 🎜>   }<BR>  , pt3) ){<BR>    status = '(x:' pt0.x ',y:' pt0.y ')' ', (x:' pt1.x ',y:' pt1.y ')' ' , (x:' pt2.x ',y:' pt2.y ')' ', (x:' pt3.x ',y:' pt3.y ')';<BR>    return [pt0, pt1, pt2 , pt3];<BR>   }<BR>  }<BR> }<BR> //如果都在y軸，則自上至下掃描可能的路徑，<BR> //每次構造4個頂點pt0, pt1, pt2, pt3，然後看他們兩兩之間是否連通<BR> if(onlineY(p1, p2)){<BR>  for(var j=0; j<X; j ){<BR>   if( j==p1.x){<BR>    continue; <BR>   }<BR>   pt0 = p1;<BR>   pt1 = {x:j, y:ptp1. , y:p2.y};<BR>   pt3 = p2;<BR>   //若頂點不為空，則該路不通。 <BR>   if(!isEmpty(pt1) || !isEmpty(pt2)){<BR>    continue;<BR>   }<BR>  continif( 🎜>   }<BR>  , pt3) ){<BR>    status = '(x:' pt0.x ',y:' pt0.y ')' ', (x:' pt1.x ',y:' pt1.y ')' ' , (x:' pt2.x ',y:' pt2.y ')' ', (x:' pt3.x ',y:' pt3.y ')';<BR>    return [pt0, pt1, pt2 , pt3];<BR>   }<BR>  }<BR> }<BR> //第四種類型， 兩點不在一條直線上。<BR> //先纵向扫描可能的路径<BR> //同样，每次构造4个顶点，看是否可通<BR> for(var k=0; k<Y; k++){<BR>   pt0 = p1;<BR>   pt1 = {x:p1.x, y:k};<BR>   pt2 = {x:p2.x, y:k};<BR>   pt3 = p2;<BR>   status = '(x:' + pt0.x + ',y:' + pt0.y + ')' + ', (x:' + pt1.x + ',y:' + pt1.y + ')' + ', (x:' + pt2.x + ',y:' + pt2.y + ')' + ', (x:' + pt3.x + ',y:' + pt3.y + ')';<BR>   //特殊情况，如果pt0和pt1重合<BR>   if(equal(pt0,pt1)){<BR>    //如果pt2不为空，则此路不通<BR>    if(!isEmpty(pt2)){<BR>     continue;<BR>    }<BR>    if( hasLine(pt1, pt2) && hasLine(pt2, pt3) ){<BR>     return [pt1, pt2, pt3];<BR>    }<BR>    else{<BR>     continue;<BR>    }<BR>   }<BR>   //特殊情况，如果pt2和pt3重合<BR>   else if(equal(pt2,pt3)){<BR>    //如果pt1不为空，则此路不通<BR>    if(!isEmpty(pt1)){<BR>     continue;<BR>    }<BR>    if( hasLine(pt0, pt1) && hasLine(pt1, pt2) ){<BR>     return [pt0, pt1, pt2];<BR>    }<BR>    else{<BR>     continue;<BR>    }<BR>   }<BR>   //如果pt1, pt2都不为空,则不通<BR>   if(!isEmpty(pt1) || !isEmpty(pt2)){<BR>    continue;<BR>   }<BR>   if( hasLine(pt0, pt1) && hasLine(pt1, pt2) && hasLine(pt2, pt3) ){<BR>    return [pt0, pt1, pt2, pt3];<BR>   }<BR> }<BR> //横向扫描可能的路径<BR> for(var k=0; k<X; k++){<BR>   pt0 = p1;<BR>   pt1 = {x:k, y:p1.y};<BR>   pt2 = {x:k, y:p2.y};<BR>   pt3 = p2;<BR>   status = '(x:' + pt0.x + ',y:' + pt0.y + ')' + ', (x:' + pt1.x + ',y:' + pt1.y + ')' + ', (x:' + pt2.x + ',y:' + pt2.y + ')' + ', (x:' + pt3.x + ',y:' + pt3.y + ')';<BR>   if(equal(pt0,pt1)){<BR>    if(!isEmpty(pt2)){<BR>     continue;<BR>    }<BR>    if( hasLine(pt1, pt2) && hasLine(pt2, pt3) ){<BR>     return [pt1, pt2, pt3];<BR>    }<BR>   }<BR>   if(equal(pt2,pt3)){<BR>    if(!isEmpty(pt1)){<BR>     continue;<BR>    }<BR>    if( hasLine(pt0, pt1) && hasLine(pt1, pt2) ){<BR>     return [pt0, pt1, pt2];<BR>    }<BR>   }<BR>   if(!isEmpty(pt1) || !isEmpty(pt2)){<BR>    continue;<BR>   }<BR>   if( hasLine(pt0, pt1) && hasLine(pt1, pt2) && hasLine(pt2, pt3) ){<BR>    return [pt0, pt1, pt2, pt3];<BR>   }<BR> }<BR> //status='type4';<BR> return null;<BR> /********** end type 4 **************/<BR>}
<P>function equal(p1, p2){<BR> return ((p1.x==p2.x)&&(p1.y==p2.y));<BR>}
<P>function onlineX(p1, p2){<BR> return p1.y==p2.y;<BR>}
<P>function onlineY(p1, p2){<BR> return p1.x==p2.x; <BR>}
<P>function isEmpty(p){<BR> return (arr[p.y][p.x]==0); <BR>}
<P>function hasLine(p1, p2){<BR> if(p1.x==p2.x&&p1.y==p2.y){<BR>  return true; <BR> }<BR> if(onlineY(p1, p2)){<BR>  var i = p1.y>p2.y?p2.y:p1.y;<BR>  i = i+1;<BR>  var max = p1.y>p2.y?p1.y:p2.y;<BR>  for(; i<max; i++){<BR>   var p = {x: p1.x, y: i};<BR>   if(!isEmpty(p)){<BR>    break<BR>   }<BR>  }<BR>  if(i==max){<BR>   return true;<BR>  }<BR>  return false;<BR> }<BR> else if(onlineX(p1, p2)){<BR>  var j = p1.x>p2.x?p2.x:p1.x;<BR>  j = j+1;<BR>  var max = p1.x>p2.x?p1.x:p2.x;<BR>  for(; j<max; j++){<BR>   var p = {x: j, y: p1.y};<BR>   if(!isEmpty(p)){<BR>    break<BR>   }<BR>  }<BR>  if(j==max){<BR>   return true;<BR>  }<BR>  return false;<BR> }<BR>}<BR>//以下部分为表现层部分,包括绘图, 初始化矩阵, 绑定鼠标事件...<BR>function $(id){return document.getElementById(id)}<P>var t1, t2;//測試用<BR>//圖片基底路徑<BR>var IMG_PATH = 'http://www.jb51.net';<BR>//初始化<BR>function init( ){<BR> //建構圖片庫<BR> var imgs = new Array(30);<BR> for(var i=1; i<=30; i ){<BR>  imgs[i] = 'r_ ' i '.gif';<BR> }<BR> tbl = $('tbl');<BR> //構造table<BR> for(var row=0;row<Y-2;row ){<BR>  var tr=tbl.insertRow(-1);<BR>  for(var col=0;col<X-2;col ) {<BR>   var td=tr.insertCell(-1);<BR>   var td=tr.insertCell(-1);<BR>;<🎜} <BR> }<BR> //建構矩陣<BR> for(var i=0; i<Y; i ){<BR>  arr[i] = new Array(X);<BR>  for(var j== 0; j<X; j ){<BR>   arr[i][j] = 0;<BR>  }<BR> }<BR> var total = (X-2)*(Y-2);<BR> var tmp = new Array(total);//產生隨機位置用<BR> for(var i=0; i<total; i ){<BR>  tmp[i] = 0;<BR> }<BR> for(var i=0; i<total; i ){<BR>  if(tmp[i]==0){<BR>   var t = Math.floor(Math.random()*types) 1;<BR>   tmp[i] = t;<BR>   while(true){<BR>    var c = Math.floor(Math.random()*(total-i)) i 🎜>   =0){<BR>     tmp[c] = t;<BR>     break;<BR>    }<BR>   )<BR>   }<BR>   }< =1; i<Y-1; i ){<BR>  for(var j=1; j<X-1; j ){<BR>   arr[i][j] = tmp[c ];<BR> tbl.rows[i-1].cells[j-1].innerHTML = '<img  src="' IMG_PATH imgs[arr[i][j]] '" / alt="JS連連看原始碼完美註解版(推薦)_javascript技巧" >';<BR>  } <BR> } <BR> //綁定滑鼠事件<BR>  var img1, img2;<BR> document.body.onclick = function(e){<BR>  var el = document.all?event.srcElement:e.target;<BR>  if(el.parentNode.tagName!='TD'){<BR>   return;<BR>  }<BR>  if(!img1){<BR> <BR>   img2 = el;<BR>  }<BR>  el.style.border = 'solid #3399FF 3px';<BR>  el = 'solid #3399FF 3px';<BR>  el = el.parentNodeo< <BR>   p1 = p2 = e1 = e2 = null;<BR>  }<BR>  var r = el.parentNode.rowIndex 1;<BR>  var c = el.parentNode.rowIndex 1;<BR>  var c = el.pcellIndex 1; ){<BR>   //el.childNodes[0].style.border = 'solid #ccc 3px';<BR>   p1 = {x:c, y:r};<BR>   p1 = {x:c, y:r};<BR> . }<BR>  else{<BR>   p2 = {x:c, y:r};<BR>   e2 = el;<BR>   if(!equal(p1, p2)&MLe1.innerHTML) <BR>    var path = getPath(p1, p2);<BR>    if(path!=null){<BR>     e1.innerHTML = e2.innerHTML = ''<1. x] = arr[p2.y][p2.x] = 0;<BR>    }<BR>   }<BR>   if(t1){t1.style.backgroundColor = '';}<BR>h.; <BR>   if(t2){t2.style.backgroundColor = '';}<BR>   t2 = e2;<BR>   img1.style.border = 'solid #orderf 3px';<🠎. 'solid #fff 3px';<BR>   p1 = p2 = e1 = e2 = img1 = img2 = null;<BR>   t1.style.backgroundColor = t2.style.background>< }<BR>}<BR></script>

 js連連看完美註解版

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

如何使用JS和百度地图实现地图平移功能Nov 21, 2023 am 10:00 AM

如何使用JS和百度地图实现地图平移功能百度地图是一款广泛使用的地图服务平台，在Web开发中经常用于展示地理信息、定位等功能。本文将介绍如何使用JS和百度地图API实现地图平移功能，并提供具体的代码示例。一、准备工作使用百度地图API前，首先需要在百度地图开放平台（http://lbsyun.baidu.com/）上申请一个开发者账号，并创建一个应用。创建完成

js字符串转数组Aug 03, 2023 pm 01:34 PM

js字符串转数组的方法：1、使用“split()”方法，可以根据指定的分隔符将字符串分割成数组元素；2、使用“Array.from()”方法，可以将可迭代对象或类数组对象转换成真正的数组；3、使用for循环遍历，将每个字符依次添加到数组中；4、使用“Array.split()”方法，通过调用“Array.prototype.forEach()”将一个字符串拆分成数组的快捷方式。

如何使用JS和百度地图实现地图热力图功能Nov 21, 2023 am 09:33 AM

如何使用JS和百度地图实现地图热力图功能简介：随着互联网和移动设备的迅速发展，地图成为了一种普遍的应用场景。而热力图作为一种可视化的展示方式，能够帮助我们更直观地了解数据的分布情况。本文将介绍如何使用JS和百度地图API来实现地图热力图的功能，并提供具体的代码示例。准备工作：在开始之前，你需要准备以下事项：一个百度开发者账号，并创建一个应用，获取到相应的AP

如何使用JS和百度地图实现地图多边形绘制功能Nov 21, 2023 am 10:53 AM

如何使用JS和百度地图实现地图多边形绘制功能在现代网页开发中，地图应用已经成为常见的功能之一。而地图上绘制多边形，可以帮助我们将特定区域进行标记，方便用户进行查看和分析。本文将介绍如何使用JS和百度地图API实现地图多边形绘制功能，并提供具体的代码示例。首先，我们需要引入百度地图API。可以利用以下代码在HTML文件中导入百度地图API的JavaScript

js中new操作符做了哪些事情Nov 13, 2023 pm 04:05 PM

js中new操作符做了：1、创建一个空对象，这个新对象将成为函数的实例；2、将新对象的原型链接到构造函数的原型对象，这样新对象就可以访问构造函数原型对象中定义的属性和方法；3、将构造函数的作用域赋给新对象，这样新对象就可以通过this关键字来引用构造函数中的属性和方法；4、执行构造函数中的代码，构造函数中的代码将用于初始化新对象的属性和方法；5、如果构造函数中没有返回等等。

用JavaScript模拟实现打字小游戏！Aug 07, 2022 am 10:34 AM

这篇文章主要为大家详细介绍了js实现打字小游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。

php可以读js内部的数组吗Jul 12, 2023 pm 03:41 PM

php在特定情况下可以读js内部的数组。其方法是：1、在JavaScript中，创建一个包含需要传递给PHP的数组的变量；2、使用Ajax技术将该数组发送给PHP脚本。可以使用原生的JavaScript代码或者使用基于Ajax的JavaScript库如jQuery等；3、在PHP脚本中，接收传递过来的数组数据，并进行相应的处理即可。