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
浙公网安备 33010602011771号