Gravity Guy
Материал из Department of Theoretical and Applied Mechanics
Описание[править]
- Реализация компьютерной игры Gravity Guy на языке программирования JavaScript
- Автор: Павлова Екатерина
- Группа 3630103/90003
Игра[править]
Код программы[править]
HTML:
1 <!DOCTYPE html>
2 <html>
3
4 <head>
5 <meta charset="UTF-8">
6 <title>Gravity guy!</title>
7 </head>
8
9 <body>
10
11 <script src="Курсач.js"></script>
12 <canvas id="cnvs" width="760" height="363"></canvas>
13
14 </body>
15
16 </html>
JavaScript:
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 }
