Tower Bloxx
Материал из Department of Theoretical and Applied Mechanics
Версия от 15:30, 27 мая 2021; 92.255.89.210 (обсуждение) (Новая страница: «== Описание == * Реализация компьютерной игры Tower Bloxx на языке программирования JavaScript * Авт…»)
Описание
- Реализация компьютерной игры Tower Bloxx на языке программирования JavaScript
- Автор: Павличук Полина, Еремеева Наталья
- Группа 3630103/00001
Игра
Код программы
HTML:
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset='utf-8'>
5 <script src="Kursovaya.js"></script>
6 </head>
7 <style>
8 body {
9 background-color: #c7b39b;
10 }
11 </style>
12 <body>
13 <canvas id = "canvas_ex" width = 700 height =700
14 style = "border: 1px black solid;"
15 ></canvas>
16 </body>
17 </html>
JavaScript:
1 window.addEventListener('load', main, false);
2 var BlockImage = new Image;
3 BlockImage.onload = function() {
4 console.log('Loaded')
5 }
6 BlockImage.src = 'popit5.png';
7 var BackImage = new Image;
8 BackImage.onload = function() {
9 console.log('Loaded')
10 }
11 BackImage.src = 'stroika.png';
12 function main() {
13 var ctx = canvas_ex.getContext('2d');
14 var w = canvas_ex.width;
15 var h = canvas_ex.height;
16 const vibing = 0;
17 const falling = 1;
18 const away = 3;
19 const idle = 2;
20
21 function Cube(x, y) {
22 this.x = x;
23 this.y = y;
24 this.status = 0;
25 this.w = 100;
26 this.h = 100;
27 this.vx = 200;
28 this.vy = 0;
29 this.ay = 0;
30 this.alpha = 0;
31 this.omega = 0;
32 this.draw = ()=>{
33 if (this.alpha==0) {
34 ctx.drawImage(BlockImage, this.x, this.y, this.w, this.h);//отрисовка кубиков
35 } else {
36 ctx.translate(this.x+this.w/2, this.y+this.h/2);
37 ctx.rotate(this.alpha);
38 ctx.drawImage(BlockImage, -this.w/2, -this.h/2, this.w, this.h);//отрисовка кубиков
39 ctx.rotate(-this.alpha);
40 ctx.translate(-this.x-this.w/2, -this.y-this.h/2);
41 }
42 }
43 }
44
45 var dt = 1/60;
46 var cubes = [];//задаем массив кубиков
47 var target = null;
48 var lastCube = null;
49
50 function init() {
51 target = new Cube(w/2-50, h-100);
52 target.status = falling;
53 cubes.push(target);
54 }
55
56 function spawnNewCube() {
57 target = new Cube(w/2, 0)
58 cubes.push(target);
59 }
60
61 function dvig()
62 {
63 for (const cube of cubes) {
64 if (lastCube != null){
65 if ( lastCube.y< 2*h/3) //опускаем кубики как только постройка достигает заданной высоты
66 {
67 cube.y+=200*dt;
68 }
69 if (lastCube.y> h-100)
70 {
71 cube.y-=200*dt;
72 }}
73 cube.x+=cube.vx*dt;
74 cube.vy +=cube.ay*dt;
75 cube.alpha += cube.omega*dt;
76 cube.y+=cube.vy*dt;
77
78 if (cube.status == vibing)
79 {
80 cube.y = 0;
81 if (cube.x+cube.w>=w || cube.x<=0)//условие движения верхнего кубика и отталкивание от стенок
82 cube.vx = - cube.vx;
83
84 } else if (cube.status == falling)
85 {
86 if (cube.y+cube.h>=h && lastCube==null)
87 {
88
89 cube.y = h - cube.h;
90 cube.status = idle;
91 cube.vx = 0;
92 cube.vy = 0;
93 cube.ay =0;
94 lastCube = cube;
95 spawnNewCube();
96 }
97 else {
98 if ( cube.y+cube.h>=lastCube.y )
99 {
100 if (cube.x>=lastCube.x && cube.x<= lastCube.x+lastCube.w)
101 {
102
103 if ( cube.x<=lastCube.x+lastCube.w/2 )
104 {
105 var flag = true;
106 for (var i = cubes.length-2; i>0; i--) {//цикл, который считает центр масс при попадании нового кубика и сравнивает с предыдущим
107 var cm = 0;
108 for ( var j = cubes.length-1; j>=i; j--)
109 {
110 cm+= cubes[j].x +cubes[j].w/2;
111
112 }
113 cm = cm/(cubes.length-i);
114 if ( cm < cubes[i-1].x || cm > cubes[i-1].x + cubes[i-1].w)
115 {
116 flag = false;
117 for ( var j = cubes.length-1; j>=i; j--)
118 {
119 cubes[j].status = away;//отлет кубика
120 cubes[j].vx = -300;
121 cubes[j].omega = -10;
122 cubes[j].vy = 300;
123 lastCube = cubes[i-1];
124 }
125 spawnNewCube();
126
127
128
129 }
130 if (flag==false) {
131
132 break;
133 }
134 }
135 if (flag) {
136 cube.y = lastCube.y - cube.h;
137 cube.status = idle;
138 cube.vx = 0;
139 cube.vy = 0;
140 cube.ay =0;
141 lastCube = cube;
142 spawnNewCube();
143 }
144
145 }
146 else
147 {
148 if (cube.y>h) {
149 cubes.pop();
150 spawnNewCube();
151 }
152 cube.vx = 300;
153 cube.omega = 10;
154 }
155 }
156 else if (cube.x+cube.w>=lastCube.x && cube.x+cube.w<=lastCube.w+lastCube.x)
157 {
158
159 if ( cube.x+cube.w>=lastCube.x+lastCube.w/2 )
160 {
161 var flag = true;
162 for (var i = cubes.length-2; i>0; i--) {//цикл, который считает центр масс при попадании нового кубика и сравнивает с предыдущим
163 var cm = 0;
164 for ( var j = cubes.length-1; j>=i; j--)
165 {
166 cm+= cubes[j].x +cubes[j].w/2;
167
168 }
169 cm = cm/(cubes.length-i);
170 if ( cm < cubes[i-1].x || cm > cubes[i-1].x + cubes[i-1].w)
171 {
172 flag = false;
173 for ( var j = cubes.length-1; j>=i; j--)
174 {
175 cubes[j].status = away;//отлет кубика
176 cubes[j].vx = -300;
177 cubes[j].vy = 300;
178 cubes[j].omega = -10;
179 lastCube = cubes[i-1];
180 }
181 spawnNewCube();
182 }
183 if (flag==false) {
184 break;
185 }
186 }
187 if (flag) {
188 cube.y = lastCube.y - cube.h;
189 cube.status = idle;
190 cube.vx = 0;
191 cube.vy = 0;
192 cube.ay =0;
193 lastCube = cube;
194 spawnNewCube();
195 }
196 }
197 else
198 {
199 if (cube.y>h)
200 {
201 cubes.pop();
202 spawnNewCube();
203
204 }
205 cube.vx = -300;
206 cube.omega = -10;
207
208
209 }
210 }
211 else
212 {
213 if (cube.y>h) {
214 cubes.pop();
215 spawnNewCube();
216 }
217 }
218 }
219 }
220 } else if (cube.status == idle) {
221
222 }
223
224
225 }
226 }
227
228 function draw()
229 {
230 ctx.clearRect(0,0,w,h);
231 ctx.drawImage(BackImage, 0, 0,w, h);//Фон
232 for (const cube of cubes) {
233 cube.draw();
234 }
235
236 }
237
238 function control()
239 {
240 dvig();
241 draw();
242 }
243
244
245 canvas_ex.onclick = (e)=>{//при нажатии кубик начинает падать
246 target.status = falling;
247 target.vx = 0;
248 target.vy = 300;
249 target.ay = 100;
250 target = null;
251 }
252
253 init();
254 setInterval(control, 1000*dt);
255
256 }
