html+css+js寫一個簡易功能的消消樂~~~~

時間 2019-11-16
標籤 html+css+js html css 一個簡易功能欄目 HTML 简体版
原文原文鏈接
三消樂的規則就是：當一行或者一列知足有三個以及三個以上相同的動物就消除。css
具體步驟：html
　　　　　　　一、html+css實現網格，本人用的是divhtml5
　　　　　　　二、實現網格上任意相鄰的兩張圖片可以交換java
　　　　　　　三、一行一列有相同的要消除，同時要補上git
　　　　　　　四、補上的時候用上全盤掃描，掃描是否有知足消除的動物github
代碼以下：數組
  1 <html>
  2 <head>
  3   <meta name="generator"
  4   content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" />
  5   <meta charset="UTF-8" />
  6   <title>三消樂</title>
  7 <style type="text/css">
  8 #box {
  9   background-color: #55D88B;
 10   width: 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   width: 60px;
 23   margin-top: 4px;
 24   margin-left: 4px;
 25 }
 26 #img {
 27   position: relative;
 28   float: left;
 29 }
 30 </style>
 31 </head> 
 32 <body bgcolor="#868398"  onload="init()">
 33  <script type = "text/javaScript" >
 34 var divy = new Array();
 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 function init() {
 42     //生成界面
 43     for (var i = 0; i < 7; i++) {
 44         imgdata[i] = new Array();
 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] = new Array();
 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 += "<div onclick=exchange(this," + i + "," + j + ")><img src=" + img_lib[imgdata[i][j]]+ "></div>";
 60         }
 61     }
 62     //因爲開始就是隨機生成整盤動物，必須全盤掃描是否有知足能夠消除的動物，並消除
 63     scanallimgs();
 64 }
 65 function exchange(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 = '<img src="' + img_lib[imgdata[x][y]] + '">';
 84                 divy[lastx * 7 + lasty + 1].innerHTML = '<img src="' + img_lib[imgdata[lastx][lasty]] + '">';
 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 = '<img src="' + img_lib[imgdata[x][y]] + '">';
101                     divy[lastx * 7 + lasty + 1].innerHTML = '<img src="' + img_lib[imgdata[lastx][lasty]] + '">';
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 function scan(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 function addimg() {   
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 = '<img src="' +img_lib[imgdata[i][j]] + '">';
208             }
209         }
210     }
211 }
212 
213 //消除圖片
214 function removeimg() {
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 = '<img src="' + "" + '">';//消除圖片
224                 flag = 1;
225             }
226         }
227     }
228     return flag;
229 }
230 
231 //全盤掃描動物，整盤標記完再掃描，否則有些先刪除了，後面掃描就會出問題
232 function scanallimgs() {
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 </script>
246 <div id="box" > 
247 </div>
248 </body>
249 </html>