2048 — различия между версиями

  1 window.addEventListener('load', main, false);
  2 function main() {
  3 	canvas=document.getElementById("canvas");
  4 	ctx=canvas.getContext('2d');
  5 	var N = 4;
  6 	var busy = false;
  7 
  8 	//задание поля и клеток
  9 
 10 	var dis=[[0,0,0,0],[0,0,0,0],[0,0,0,0],[0,0,0,0]];
 11 	var color=["gray","rgb(250,200,200)","rgb(240,200,160)","rgb(160,120,150)","cyan","blue","rgb(0,0,100)","rgb(0,200,0)","rgb(0,50,0)","rgb(150,100,50)","rgb(100,150,50)","rgb(200,0,0)"];
 12 
 13 	function display(){
 14 
 15 		console.log(dis);
 16 
 17 		for(var j=0;j<4;j++)
 18 			for(var i=0;i<4;i++){
 19 
 20 				//color to be decided by dis[i][j]
 21 				if(dis[i][j]!=0)
 22 					ctx.fillStyle=color[Math.log2(dis[i][j])];
 23 				else{
 24 					ctx.fillStyle="rgb(230,230,230)";
 25 				}
 26 				ctx.fillRect(i*100+2,j*100+2,96,96);
 27 
 28 				if(dis[i][j]!=0){
 29 					ctx.font = "20px Comic Sans MS";
 30 					ctx.fillStyle = "black";
 31 					ctx.textAlign = "center";
 32 					ctx.fillText(dis[i][j], i*100+50,j*100+60); 
 33 				}
 34 
 35 			}
 36 
 37 	}
 38 
 39 	//случайное целое от min до max
 40 		function randomInteger(min, max) {
 41 			var rand = min - 0.5 + Math.random() * (max - min + 1)
 42 			rand = Math.round(rand);
 43 			return rand;
 44 		}
 45 
 46 	//задание поля и цветов 
 47 		
 48 	// генерация двойки
 49 		function generateNumber() {
 50 			var flag = true;
 51 			while (flag) {
 52 				var x = randomInteger(0, N-1);
 53 				var y = randomInteger(0, N-1);
 54 				if (dis[x][y] == 0){
 55 					flag = false;
 56 				}
 57 			}
 58 			dis[x][y] = 2;
 59 			console.log(x,y)
 60 		}
 61 		
 62 		generateNumber();
 63 		console.table(dis);
 64 
 65 	//сдвиги клеток
 66 		function shift(direction) {
 67 			busy = true;
 68 			var b = false;
 69 			if (direction=='up'){
 70 				for (var i = 0; i<N; i++) {
 71 					for (var j = 0; j<N; j++){
 72 						//console.log('Проверяю клетку', i , j);
 73 						if ((dis[i][j]==0)&&(j!=(N-1))&&(dis[i][j+1]!=0)){
 74 							dis[i][j]=dis[i][j+1];
 75 							dis[i][j+1] = 0;
 76 							//console.log('Сдвинул',i, j-1,'вниз');
 77 							if (j!=0) j-=2;
 78 							
 79 						} 
 80 						else {
 81 							if (dis[i][j]==dis[i][j+1]){
 82 								dis[i][j] *=2;
 83 								dis[i][j+1] = 0;
 84 							}
 85 						}
 86 					}
 87 				}
 88 				
 89 			}
 90 			if (direction == 'down') {
 91 				for (var i = 0; i<N; i++) {
 92 					for (var j=N-1; j>-1; j--){
 93 						//console.log('Проверяю клетку', i , j);
 94 						if ((dis[i][j]==0)&&(j!=0)&&(dis[i][j-1]!=0)){
 95 							dis[i][j]=dis[i][j-1];
 96 							dis[i][j-1] = 0;
 97 							//console.log('Сдвинул',i, j-1,'вниз');
 98 							if (j!=(N-1)) j+=2;
 99 							
100 						} 
101 						else {
102 							if (dis[i][j]==dis[i][j-1]){
103 								dis[i][j] *=2;
104 								dis[i][j-1] = 0;
105 							}
106 						}
107 					}
108 				}
109 			}
110 			if (direction=='left'){
111 				for (var j = 0; j<N; j++) {
112 					for (var i = 0; i<N; i++){
113 						//console.log('Проверяю клетку', i , j);
114 						if ((dis[j][i]==0)&&(j!=(N-1))&&(dis[j+1][i]!=0)){
115 							dis[j][i]=dis[j+1][i];
116 							dis[j+1][i] = 0;
117 							//console.log('Сдвинул',i, j-1,'вниз');
118 							if (j!=0) j-=2;
119 						} 
120 						else {
121 							if ((dis[j][i])==(dis[j+1][i]) && j+1 < 100){
122 								dis[j][i] *=2;
123 								dis[j+1][i] = 0;
124 							}
125 						}
126 					}
127 				}
128 			}
129 			if (direction=='right'){
130 				for (var j = 0; j<N; j++) {
131 					for (var i=N-1; i>-1; i--){
132 						console.log('Проверяю клетку', i , j);
133 						if ((dis[j][i] == 0)&&(j != 0)&&(dis[j-1][i] != 0)) {
134 							dis[j][i]=dis[j-1][i];
135 							dis[j-1][i] = 0;
136 							//console.log('Сдвинул',i, j-1,'вниз');
137 							if (j!=(N-1)) j+=2;
138 							
139 						} 
140 						else {
141 							if ((dis[j][i]) == (dis[j-1][i])) {
142 								dis[j][i] *=2;
143 								dis[j-1][i] = 0;
144 							}
145 						}
146 					}
147 				}
148 			}
149 			busy = false;
150 		}
151 		
152 		
153 	display();
154 
155 	var disable=0;
156 	function gameover(){
157 		ctx.font = "50px Comic Sans MS";
158 		ctx.fillStyle = "red";
159 		ctx.textAlign = "center";
160 		ctx.fillText("GAME OVER!!", 200,180); 
161 		disable=1;
162 
163 		ctx.fillStyle = "red";
164 		ctx.textAlign="center";
165 		ctx.font="30px Comic Sans MS";
166 
167 		var count=0;
168 		for(var i=0;i<4;i++)
169 		for(var j=0;j<4;j++)
170 		{
171 
172 			count+=dis[i][j];
173 
174 		}
175 
176 		ctx.fillText("Your Score is "+count.toString(),200,220);
177 
178 	}
179 
180 
181 	window.addEventListener('keydown', function (e) {
182 		if(disable==1)
183 		   return;
184 		
185 		key = e.keyCode;
186 		if(key==37){
187 			e.preventDefault();
188 			shift('left');;;
189 		}
190 		if(key==38){
191 			e.preventDefault();
192 			shift('up');;
193 		}
194 		if(key==39){
195 			e.preventDefault();
196 			shift('right');;
197 		}
198 		if(key==40){
199 			e.preventDefault();
200 			shift('down');;
201 		}
202 		
203 		//if everything is full.
204 		var count=0;
205 		for(var i=0;i<4;i++)
206 			for(var j=0;j<4;j++){
207 				if(dis[i][j]==0)
208 				{   
209 					count++;
210 				}  
211 				
212 			}
213 		
214 		if(count==0)
215 			{gameover();
216 			 return;
217 			}
218 		
219 		else{
220 		var n=Math.floor(Math.random()*16);
221 			for(;n<32;n++){
222 				m=n%16;
223 			if(dis[Math.floor(m/4)][m%4]==0)
224 				{
225 					dis[Math.floor(m/4)][m%4]=2;
226 					break;
227 				}
228 			}
229 		
230 		  
231 		}
232 		
233 	display();
234 		
235 	});
236 }