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

  1 window.addEventListener('load', main, false);
  2 	
  3 	function createImage(imagePath) {
  4 		let img = new Image();
  5 		img.src = imagePath;
  6 		return img;
  7 	}
  8 	
  9 	var bgImage = createImage('bg_760.jpg'); // Фон
 10 	var UpImage = createImage('Up.png'); // Блок вверхний
 11 	var BottomImage = createImage('Bottom.png'); // Блок нижний
 12 	var playerImage = createImage('pl.png'); // Игрок
 13 	var coinImage = createImage('coin.png'); // Монетка
 14 	
 15 function main() {
 16 	
 17 	function drawImage(obj) {
 18 		ctx.drawImage(obj.image, obj.x-obj.w/2, obj.y-obj.h/2, obj.w, obj.h);
 19 	}
 20 	
 21 	var ctx = cnvs.getContext('2d');
 22 	var w = cnvs.width;
 23 	var h = cnvs.height;
 24 	
 25 	var defaultUp = 60;
 26 	var defaultBottom = 300;
 27 	var gap = 150; // Отступ между блоками
 28 	var lastBlock = false;
 29 	
 30 	var dt = 0.1;
 31 	var score = 0;
 32 	
 33 	// Создание блоков
 34 	function createBlockUp(x, y) {
 35 		return {
 36 			x: x,
 37 			y: y,
 38 			w: 150,
 39 			h: 40,
 40 			image: UpImage,
 41 		}
 42 	}
 43 	
 44 	function createBlockBottom(x, y) {
 45 		return {
 46 			x: x,
 47 			y: y,
 48 			w: 150,
 49 			h: 40,
 50 			image: BottomImage,
 51 		}
 52 	}
 53 	
 54 	var blocksUp = [
 55 		createBlockUp(90+gap, defaultUp),
 56 		createBlockUp(90+3*gap, defaultUp),
 57 	];
 58 	
 59 	var blocksBottom = [
 60 		createBlockBottom(90, defaultBottom),
 61 		createBlockBottom(90+2*gap, defaultBottom),
 62 		createBlockBottom(90+4*gap, defaultBottom),
 63 	];
 64 	
 65 		
 66 	// Создание монеток
 67 	function createCoin(x, y) {
 68 		return {
 69 			x: x,
 70 			y: y,
 71 			w: 30,
 72 			h: 30,
 73 			image: coinImage,
 74 		}
 75 	}
 76 
 77 	var coins = [];	
 78 	
 79 	// Игрок
 80 	var player = {
 81 		x: 90,
 82 		y: 200,
 83 		grav: 30,
 84 		vx: 10,
 85 		vy: 0,
 86 		w: 36,
 87 		h: 36,
 88 		image: playerImage,
 89 		inAir: true,
 90 	}
 91 	
 92 	
 93 	// При нажатии на кнопку
 94 	document.addEventListener('keydown', (event) => {
 95 		const keyName = event.key;
 96 		if (!player.inAir) {
 97 			player.grav *= -1;
 98 			player.vy *= -10;
 99 		}
100 	})
101 	
102 	
103 	function draw() {
104 		
105 		// Рисует фон
106 		ctx.clearRect(0,0,w,h)
107 		ctx.drawImage(bgImage, 0, 0);
108 		
109 		// Счёт монеток
110 		ctx.fillStyle = '#000';
111 		ctx.font = '24px Verdana';
112 		ctx.fillText('Монеток: ' + score, w - 180, 40);
113 		
114 		// Рисует игрока
115 		drawImage(player);
116 
117 		// Рисует платформы и монетки
118 		for (var i=0; i < blocksBottom.length; i++) {
119 			drawImage(blocksBottom[i]);
120 		}
121 		for (var i=0; i < blocksUp.length; i++) {
122 			drawImage(blocksUp[i]);
123 		}
124 		for (var i=0; i < coins.length; i++) {
125 			drawImage(coins[i]);
126 		}
127 		
128 	}
129 	
130 	function physics() {
131 		
132 		// Движение игрока
133 		player.y += player.grav * dt;
134 		player.inAir = true;
135 		
136 		// Столкновение с платформой
137 		for (var i=0; i < blocksBottom.length; i++) {
138 			var block = blocksBottom[i]
139 			if (player.x > block.x-block.w/2 
140 				&& player.x < block.x+block.w/2 
141 					&& player.y + player.h/2 > block.y-block.h/2 - 20) {
142 				player.y = block.y - block.h/2 - 5;
143 				player.vy = 1;
144 				player.inAir = false;
145 			}					
146 		}
147 		
148 		for (var i=0; i < blocksUp.length; i++) {
149 			var block = blocksUp[i];
150 			if (player.x > block.x - block.w/2 
151 				&& player.x < block.x + block.w/2 
152 					&& player.y - player.h/2 - 10 < block.y + block.h/2 - 20) {
153 				player.y = block.y + block.h/2 - 5;
154 				player.vy = -1;
155 				player.inAir = false;
156 			}
157 		}
158 		
159 		// Движение платформ и монеток
160 		for (var i=0; i < blocksBottom.length; i++) {
161 			blocksBottom[i].x -= player.vx * dt;
162 		}
163 		for (var i=0; i < blocksUp.length; i++) {
164 			blocksUp[i].x -= player.vx * dt;
165 		}
166 		for (var i=0; i < coins.length; i++) {
167 			coins[i].x -= player.vx * dt;
168 		}
169 		
170 		// Создание новых платформ с монетками
171 		if (blocksBottom[blocksBottom.length-1].x < 800 - gap && !lastBlock) {
172 			
173 			var x = 800 - Math.floor(Math.random()*50);
174 			var y = Math.floor(defaultUp + Math.random()*60)
175 			
176 			blocksUp.push(createBlockUp(x, y))
177 			coins.push(createCoin(x-40, y+25));
178 			coins.push(createCoin(x, y+25));
179 			coins.push(createCoin(x+40, y+25));
180 			
181 			lastBlock = true;
182 			dt += 0.01;
183 		}
184 		
185 		if (blocksUp[blocksUp.length-1].x < 800 - gap && lastBlock) {
186 			
187 			var x = 800 - Math.floor(Math.random()*20);
188 			var y = Math.floor(defaultBottom - Math.random()*50)
189 			
190 			blocksBottom.push(createBlockBottom(x, y))
191 			coins.push(createCoin(x-40, y-25));
192 			coins.push(createCoin(x, y-25));
193 			coins.push(createCoin(x+40, y-25));
194 			
195 			lastBlock = false;
196 		}
197 		
198 		// Перезапуск игры
199 		if(player.y + player.h <= 0 || player.y - player.h >= defaultBottom) {
200 			location.reload();
201 		}
202 		
203 	}
204 	
205 	function collectingCoins() {
206 		// Сбор монеток
207 		for (var i=0; i < coins.length; i++) {
208 			
209 			var penny = coins[i];
210 			
211 			if (player.w/2 + penny.w/2 > penny.x - player.x 
212 			&& player.h/2 + player.h/2 > player.y - penny.y 
213 			&& player.h/2 + player.h/2 > penny.y - player.y ) {
214 				coins.splice(0, 1);
215 				score++;
216 			}
217 									
218 		}
219 		
220 	}
221 	
222 	
223 	function control() {
224 		draw();
225 		physics();
226 		collectingCoins();
227 		requestAnimationFrame(control);
228 	}
229 	
230 	control();
231 	
232 }