JS实现2048代码

最新推荐文章于 2022-05-15 17:16:51 发布
aihuiju2691
最新推荐文章于 2022-05-15 17:16:51 发布
阅读量233
点赞数
原文链接：http://www.cnblogs.com/Q1143316492/p/8883583.html
版权
  1 <!DOCTYPE html>
  2 <html>
  3     <head>
  4         <meta charset="UTF-8">
  5         <title>cwl's 2048</title>
  6         <style>
  7             *{
  8                 margin: 0;
  9                 padding: 0;
 10             }
 11             body{
 12                 background-color: #5ad9ff;
 13             }
 14         </style>
 15     </head>
 16     <body>
 17         <script>
 18             
 19             function canvas_node() {
 20                 /**
 21                 var canvas = document.getElementById('tutorial');
 22                 var ctx = canvas.getContext('2d');
 23                 
 24                 ctx.fillStyle = "rgb(200,0,0)";
 25                 ctx.fillRect(25,25,100,100);
 26                 ctx.clearRect(45,45,60,60);
 27                 ctx.strokeRect(50,50,50,50);
 28                  
 29                 ctx.beginPath();
 30                 ctx.moveTo(75,50);
 31                 ctx.lineTo(100,75);
 32                 ctx.lineTo(100,25);
 33                 ctx.fill();        
 34         
 35                 */
 36             }
 37         
 38             function rand_num(l,r) {
 39                 l = Math.min(l,r);
 40                 r = Math.max(l,r);
 41                 return Math.floor(Math.random()*(r-l+1)+l);
 42             }
 43             
 44             function draw_num(num,x,y,x0,y0) {
 45                   var ctx = document.getElementById('canvas').getContext('2d');
 46                 ctx.fillStyle = "black";
 47                   ctx.font = "30px serif";
 48                 ctx.textAlign = "center";
 49                 ctx.textBaseline = "middle"
 50                   ctx.fillText(num.toString(),x0+x*100+40,y0+y*100+40,100);
 51             }
 52             
 53             function show_map(arr) {
 54                 var ctx = document.getElementById('canvas').getContext('2d');
 55                 var width = window.innerWidth;
 56                 var height = window.innerHeight;
 57                 var x0 = width/2 - 200;
 58                 var y0 = window.innerHeight/5;
 59                 ctx.fillStyle = "#8ece44";
 60                 ctx.fillRect(x0-25,y0-25,430,430);
 61                 ctx.fillStyle = "#ffe945";
 62                 for(var i = 0; i < 4; i ++ ) {
 63                     for(var j = 0; j < 4; j ++ ) {
 64                         ctx.fillRect(x0+i*100,y0+j*100,80,80);
 65                     }
 66                 }
 67                 for(var i = 0; i < 4; i ++ ) {
 68                     for(var j = 0; j < 4; j ++ ) {
 69                         if(arr[i][j]!=0) {
 70                             draw_num(arr[i][j],i,j,x0,y0);
 71                         }
 72                     }
 73                 }
 74             }
 75             
 76             function init_game() {
 77                 var arr = new Array(4);
 78                 for(var i = 0; i < 4; i ++ ) {
 79                     arr[i] = new Array(4);
 80                 }
 81                 for(var i = 0; i < 4; i ++ ) {
 82                     for(var j = 0; j < 4; j ++ ) {
 83                         arr[i][j] = 0;
 84                     }
 85                 }
 86                 new_num(arr);
 87                 new_num(arr);
 88                 show_map(arr);
 89                 return arr;
 90             }
 91             
 92             function new_num(arr) {
 93                 var ok = 0;
 94                 for(var i = 0; i < 4; i ++ ) {
 95                     for(var j = 0; j < 4; j ++ ) {
 96                         if(!arr[i][j]) {
 97                             ok = 1;
 98                         }
 99                     }
100                     if(ok) {
101                         break;
102                     }
103                 }
104                 while(ok) {
105                     var x = rand_num(0,3);
106                     var y = rand_num(0,3);
107                     var t = rand_num(1,2);
108                     if(arr[x][y] == 0) {
109                         arr[x][y] = t*2;
110                         break;
111                     }
112                 }
113             }
114             
115             function is_end(arr) {
116                 var xx = [-1, 1, 0, 0];
117                 var yy = [ 0, 0,-1, 1];
118                 for(var i = 0; i < 4; i ++ ) {
119                     for(var j = 0; j < 4; j ++ ) {
120                         if(arr[i][j] == 0) {
121                             return false;
122                         }
123                         else {
124                             for(var k = 0; k < 4; k ++ ) {
125                                 var next_x = i + xx[k];
126                                 var next_y = j + yy[k];
127                                 if(is_in(next_x,next_y) && arr[next_x][next_y] == arr[i][j]) {
128                                     return false;
129                                 }
130                             }
131                         }
132                     }
133                 }
134                 return true;
135             }
136             
137             function is_in(x,y) {
138                 return x >= 0 && y >= 0 && x < 4 && y < 4;
139             }
140             
141             function join(arr,dir,x,y) {
142                 var xx = [-1, 1, 0, 0];
143                 var yy = [ 0, 0,-1, 1];
144                 var flag = 0;//判断是否能继续合并
145                 while(is_in(x,y)) {
146                     var next_x = x+xx[dir];
147                     var next_y = y+yy[dir];
148                     if(!is_in(next_x,next_y)) {
149                         break;
150                     }
151                     if(arr[next_x][next_y] == 0) {
152                         arr[next_x][next_y] = arr[x][y];
153                         arr[x][y] = 0;
154                     }
155                     else if(arr[next_x][next_y] == arr[x][y] && !flag) {
156                         arr[next_x][next_y] *= 2;
157                         arr[x][y] = 0;
158                         flag = 1;
159                     }
160                     else break;
161                     x = next_x;
162                     y = next_y;
163                 }
164                 
165             }
166             
167             function change(arr,dir) {
168                 if(dir == 2) { // up
169                     for(var i = 0; i < 4; i ++ ) {
170                         for(var j = 0; j < 4; j ++ ) {
171                             join(arr,dir,i,j);
172                         }
173                     }
174                 }
175                 else if(dir == 3) { //down
176                     for(var i = 0; i < 4; i ++ ) {
177                         for(var j = 3; j >= 0; j -- ) {
178                             join(arr,dir,i,j);
179                         }
180                     }
181                 }
182                 else if(dir == 0) {
183                     for(var i = 0; i < 4; i ++ ) {
184                         for(var j = 0; j < 4; j ++ ) {
185                             join(arr,dir,i,j);
186                         }
187                     }
188                 }
189                 else if(dir == 1) {
190                     for(var i = 3; i >= 0; i -- ) {
191                          for(var j = 0; j < 4; j ++ ) {
192                             join(arr,dir,i,j);
193                         }
194                     }
195                 }
196                 //console.log(arr);
197                 if(is_end(arr)) {
198                     alert("end");
199                     return 1;
200                 }
201                 new_num(arr);
202                 show_map(arr);
203                 return 0;
204             }
205             
206             function main() {
207                 document.body.style.overflow="hidden";
208                 var can = document.createElement('canvas');
209                 can.id = "canvas";
210                 can.width = window.innerWidth;
211                 can.height = window.innerHeight;
212                 document.body.appendChild(can);
213                 var arr = init_game();
214                 
215                 var keyIsDown = 0;
216                 
217                 window.addEventListener('mousemove', function(event) {
218                     console.log(event)
219                 })
220                 
221                 window.addEventListener('keydown',function(event){
222                     var key = event.keyCode;
223                     var ret = 0;
224                     if(keyIsDown == 0) {
225                         keyIsDown = 1;
226                         if(key == 38) {//up
227                             ret = change(arr,2);
228                         }
229                         else if(key == 40) {//down
230                             ret = change(arr,3);
231                         }
232                         else if(key == 37) {//left
233                             ret = change(arr,0);
234                         }
235                         else if(key == 39) {//right
236                             ret = change(arr,1);
237                         }
238                         if(ret) {
239                             arr = init_game();
240                             show_map(arr);
241                         }
242                     }
243                 })
244                 
245                 window.addEventListener('keyup',function(){
246                     keyIsDown = 0;
247                 })
248 
249                 window.onresize = function()
250                 {
251                     var can = document.getElementById("canvas");
252                     var height = window.innerHeight;
253                     var width = window.innerWidth;
254                     can.height = height;
255                     can.width = width;
256                     show_map(arr);
257                 }
258             }
259             main();
260         </script>
261     </body>
262 </html>
263