html毕业作业消消乐,html+css+js写一个简易功能的消消乐~~~~

今天药忘吃喽~ 2022-10-07 08:51 198阅读 0赞

4 content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" />

三消乐

8 \#box \{9 background-color: \#55D88B;10 450px;11 height: 450px;12 position: relative;13 margin: 80px 350px;14 \}15 \#box div \{16 float: left;17 position: relative;18 background-color: \#E0DFE4;19 border: 2px;20 border-radius: 2px;21 height: 60px;22 60px;23 margin-top: 4px;24 margin-left: 4px;25 \}26 \#img \{27 position: relative;28 float: left;29 \}30

34 var divy = newArray();35 var sum = 0,lastx = 0,lasty = 0,l\_rnum = 0,o\_dnum = 0,sum = 0,clickedimg = "",36 left\_x = 0,left\_y = 0,up\_x = 0,up\_y = 0;37 var img\_lib = new Array("狐狸.png", "猫头鹰.png", "河马.png", "小鸡.png", "熊.png");//图片库

38 var imgdata = new Array();//存储动物对应的数字

39 var vis = new Array(); //标记数组

40 var \_clickedimg = new Array();//用来存点击的两张图片

41 functioninit() \{42 //生成界面

43 for (var i = 0; i < 7; i++) \{44 imgdata\[i\] = newArray();45 for (var j = 0; j < 7; j++) \{46 imgdata\[i\]\[j\] ="";47 \}48 \}49 for (var i = 0; i < 7; i++) \{50 vis\[i\] = newArray();51 for (var j = 0; j < 7; j++) \{52 vis\[i\]\[j\] = 0;53 \}54 \}55 var x = document.getElementById("box");56 for (var i = 0; i < 7; i++) \{57 for (var j = 0; j < 7; j++) \{58 imgdata\[i\]\[j\] = parseInt(Math.random() \* 10) % 5;//随机数，imgdata数组存的是数字

59 x.innerHTML += "

![\+%20img\_lib%5Bimgdata%5Bi%5D%5Bj%5D%5D+%20][20img_lib_5Bimgdata_5Bi_5D_5Bj_5D_5D_20]

";60 \}61 \}62 //由于开始就是随机生成整盘动物，必须全盘扫描是否有满足可以消除的动物，并消除

63 scanallimgs();64 \}65 functionexchange(obj, x, y) \{66 var n = 0, m = 0;67 if (sum == 0) \{//sum用来计算第几次点击

68 lastx = x;//把第一次点击的照片存起来，方便后面的画图，不然找不到上一次点击的图片是什么

69 lasty =y;70 \}71 \_clickedimg\[sum\] =imgdata\[x\]\[y\]; //把交换的图片存起来

72 sum++;73 if (sum >= 2 && lastx == x && lasty == y) sum = 1; //处理连续点击一样的图片

74 if (sum == 2) \{75 if(imgdata\[x\]\[y\]==imgdata\[lastx\]\[lasty\])\{76 alert("它们长一样，待在原来地方就好！！");77 \}78 else if (lastx == x || lasty ==y) \{79 if (Math.abs(lasty - y) == 1 || Math.abs(lastx - x) == 1) \{80 imgdata\[x\]\[y\] = \_clickedimg\[0\];//交换图片

81 imgdata\[lastx\]\[lasty\] = \_clickedimg\[1\];82 divy = document.getElementsByTagName("div");83 obj.innerHTML = '!['%20+%20img\_lib%5Bimgdata%5Bx%5D%5By%5D%5D%20+%20'][20img_lib_5Bimgdata_5Bi_5D_5Bj_5D_5D_20]';84 divy\[lastx \* 7 + lasty + 1\].innerHTML = '!['%20+%20img\_lib%5Bimgdata%5Blastx%5D%5Blasty%5D%5D%20+%20'][20img_lib_5Bimgdata_5Bi_5D_5Bj_5D_5D_20]';85 n = scan(x, y); //对两张图片分别扫描是否能够消除

86 m =scan(lastx, lasty);87 if (n == 1 || m == 1) \{ //只要其中一个可以消除，就满足交换

88 sum = 0;89 \_clickedimg\[0\] = \_clickedimg\[1\] = 0;90 removeimg(); //消除图片

91 alert("消除成功！！！新的动物马上赶来！！");92 addimg(); //添加图片

93 scanallimgs(); //扫描随机添加上来的图片是否可以消除

94 \} else\{95 //两张图片都不满足交换，就还原位置

96 imgdata\[x\]\[y\] = \_clickedimg\[1\];97 imgdata\[lastx\]\[lasty\] = \_clickedimg\[0\];98 \_clickedimg\[0\] = \_clickedimg\[1\] = 0;99 divy = document.getElementsByTagName("div");100 obj.innerHTML = '!['%20+%20img\_lib%5Bimgdata%5Bx%5D%5By%5D%5D%20+%20'][20img_lib_5Bimgdata_5Bi_5D_5Bj_5D_5D_20]';101 divy\[lastx \* 7 + lasty + 1\].innerHTML = '!['%20+%20img\_lib%5Bimgdata%5Blastx%5D%5Blasty%5D%5D%20+%20'][20img_lib_5Bimgdata_5Bi_5D_5Bj_5D_5D_20]';102 sum = 0;103 alert("OMG！它们不能消除！交换失败！");104 l\_rnum = 0;105 o\_dnum = 0;106 \}107

108 \} else\{109 alert("这两只不相邻！！！！！！"); //在同行或者同列不相邻

110 sum = 0;111 \}112 \} else\{113 alert("这两只不相邻！！！！！！"); //不在同行也不在同列相邻

114 sum = 0;115 \}116 \}117 \}118

119 //扫描，以当前的点击的这个图片为中心，向左向右，向上向下

120 functionscan(x, y) \{121 clickedimg =img\_lib\[imgdata\[x\]\[y\]\];122 var scan\_lr = 1,scan\_ud = 1;123 left\_x =x;124 left\_y =y;125 up\_x =x;126 up\_y =y;127 //如果该动物的左边与它自己相同，并且对应的标记数组大于0，就不继续扫描(因为代表已经扫过了一这行)

128 if (y != 0 && img\_lib\[imgdata\[x\]\[y-1\]\] == clickedimg && vis\[x\]\[y - 1\] > 0) \{129 scan\_lr = 0;130 \}131 //如果该动物的上边与它自己相同，并且对应的标记数组大于0，就不继续扫描(因为代表已经扫过了一这列)

132 if (x != 0 && img\_lib\[imgdata\[x-1\]\[y\]\] == clickedimg && vis\[x - 1\]\[y\] > 0) \{133 scan\_od = 0;134 \}135 if (scan\_lr == 1) \{136 for (var a = 0;; a++) \{137 if (y - a < 0 || img\_lib\[imgdata\[x\]\[y-a\]\] !=clickedimg) \{138 break;139 \} else if (img\_lib\[imgdata\[x\]\[y-a\]\] == clickedimg) \{ //向左扫描

140 vis\[x\]\[y - a\]++;141 l\_rnum++;142 if (a != 0) left\_y--;//记下与当前动物相同的最左边的动物，横向重置标记数组的时候是用循环从最左边开始

143 \}144 \}145 for (var a = 1;; a++) \{146 if (y + a > 6 || img\_lib\[imgdata\[x\]\[y+a\]\] != clickedimg) break;147 else if (img\_lib\[imgdata\[x\]\[y+a\]\] == clickedimg) \{ //向右扫描

148 vis\[x\]\[y + a\]++;149 l\_rnum++;150 \}151 \}152

153 //向左与向右的相同动物加起来不超过三个，即横向不能消除，

154 if (l\_rnum < 3) \{155 for (var i = 0; i < l\_rnum; i++) \{156 vis\[left\_x\]\[left\_y + i\] = vis\[left\_x\]\[left\_y + i\] - 1;157 \}158 l\_rnum = 0;159 \}160 \}161 if (scan\_ud == 1) \{162 for (var b = 0;; b++) \{163 if (x - b < 0 || img\_lib\[imgdata\[x-b\]\[y\]\] !=clickedimg) \{164 break;165 \}166 else if (img\_lib\[imgdata\[x-b\]\[y\]\] == clickedimg) \{ //向上扫描

167 vis\[x - b\]\[y\]++;168 o\_dnum++;169 if (b != 0) up\_x--;//记下与当前动物相同的最上边的动物，纵向重置标记数组的时候是用循环从最上边开始

170 \}171

172 \}173 for (var b = 1;; b++) \{174 if (x + b > 6 || img\_lib\[imgdata\[x+b\]\[y\]\] != clickedimg) break;175 else if (img\_lib\[imgdata\[x+b\]\[y\]\] == clickedimg) \{ //向下扫描

176 vis\[x + b\]\[y\]++;177 o\_dnum++;178 \}179 \}180 //向下与向上的相同动物加起来不超过三个，即纵向不能消除，就要把标记数组减一，而不是设置为0，因为不能保证横向不能消除，为了保存那个共享的动物。

181 if (o\_dnum < 3) \{182 for (var j = 0; j < o\_dnum; j++) \{183 vis\[up\_x + j\]\[up\_y\] = vis\[up\_x + j\]\[up\_y\] - 1;184 \}185 o\_dnum = 0;186 \}187 \}188 if (l\_rnum >= 3 || o\_dnum >= 3) \{ //有一行或者有一列满足消除，即相同的动物大于等于3，返回1，表示可以交换

189 l\_rnum = 0;190 o\_dnum = 0;191 return 1;192 \} else\{193 l\_rnum = 0;194 o\_dnum = 0;195 return 0;196 \}197 \}198

199 //添加图片

200 functionaddimg() \{201 for (var i = 0; i < 7; i++) \{202 for (var j = 0; j < 7; j++) \{203 if (imgdata\[i\]\[j\] == 9) \{204 imgdata\[i\]\[j\] = parseInt(Math.random() \* 10) % 5; //随机添加

205 divy = document.getElementsByTagName("div");206 \_divnum = i \* 7 + 1 +j;207 divy\[\_divnum\].innerHTML = '!['%20+img\_lib%5Bimgdata%5Bi%5D%5Bj%5D%5D%20+%20'][20img_lib_5Bimgdata_5Bi_5D_5Bj_5D_5D_20]';208 \}209 \}210 \}211 \}212

213 //消除图片

214 functionremoveimg() \{215 var flag = 0;216 for (var i = 0; i < 7; i++) \{217 for (var j = 0; j < 7; j++) \{218 if (vis\[i\]\[j\] > 0) \{ //对应数组标记大于0就消除，并且把标记的数组标记为0

219 vis\[i\]\[j\] = 0;220 imgdata\[i\]\[j\] =9;221 divy = document.getElementsByTagName("div");222 \_divnum = i \* 7 + 1 +j;223 divy\[\_divnum\].innerHTML = '!['%20+%20][20img_lib_5Bimgdata_5Bi_5D_5Bj_5D_5D_20]';//消除图片

224 flag = 1;225 \}226 \}227 \}228 returnflag;229 \}230

231 //全盘扫描动物，整盘标记完再扫描，不然有些先删除了，后面扫描就会出问题

232 functionscanallimgs() \{233 var c = 0,234 s = 1;235 while (s != 0) \{ //s!=0表示上一个整盘动物与当前的整盘动物一样，即没有动物可以消除,s由removeimg()返回

236 for (var i = 0; i < 7; i++) \{237 for (var j = 0; j < 7; j++) \{238 scan(i, j);239 \}240 \}241 s =removeimg();242 addimg();243 \}244 \}245

246

247

248

249

[20img_lib_5Bimgdata_5Bi_5D_5Bj_5D_5D_20]: