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