Tower Bloxx

Материал из Department of Theoretical and Applied Mechanics
Версия от 15:30, 27 мая 2021; 92.255.89.210 (обсуждение) (Новая страница: «== Описание == * Реализация компьютерной игры Tower Bloxx на языке программирования JavaScript * Авт…»)

(разн.) ← Предыдущая | Текущая версия (разн.) | Следующая → (разн.)
Перейти к: навигация, поиск

Описание

Игра

Код программы

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 }