Показать сообщение отдельно
  #1 (permalink)  
Старый 27.08.2013, 23:03
Новичок на форуме
Отправить личное сообщение для Jokovich Посмотреть профиль Найти все сообщения от Jokovich
 
Регистрация: 27.08.2013
Сообщений: 1

Проблема столкновения шаров
Написал скрипт, по клику шары начинают движение в произвольном направлении. Все работает хорошо, кроме столкновений.

проблема: код брал изначально чужой, там были не рисунки из файла, а нарисованные шарики, поэтому координаты x и y теперь не в центре, а в верхнем левом углу.

Вот собственно, код, функция collision. Кто подскажет как здесь устроить столкновения более разумно? Заранее спасибо
var canvas = document.getElementById("canvas");
		canvas.width = 650;
		canvas.height = 400;
		var context = canvas.getContext("2d");

		var animamtion = new Animation();
		var k;
		onclick = function() {
						k=1;
					}

		var balls = [];
		var myPics = {}; // Глобальный обьект, в котором будем хранить картинки
			myPics.ball1 = new Image();//Создаем пустую картинку
			myPics.ball1.src = "ball.png";//Указываем путь к файлу
			myPics.ball2 = new Image();//Создаем пустую картинку
			myPics.ball2.src = "ball.png";//Указываем путь к файлу
			myPics.ball3 = new Image();//Создаем пустую картинку
			myPics.ball3.src = "ball.png";//Указываем путь к файлу
		vspeed1 = random(-2000,  2000);
		vspeed2 = random(-2000,  2000);
		vspeed3 = random(-2000,  2000);
		balls.push({
				imag: myPics.ball1,
				//координаты по x и y
				x: 50,
				y: 100,
				//скорость по x и y
				vx: vspeed1 ,
				//vy: random(-2000,  2000), 
				vy: Math.sqrt(4*1000000 - (vspeed1*vspeed1)), 
				//массаm радиус и цвет шара 
				massa: 2000,
				radius: 45
				//color: _color,
				//shadowBlur: _shadowBlur
			})

		balls.push({
				imag: myPics.ball2,
				//координаты по x и y
				x: 150,
				y: 100,
				//скорость по x и y
				vx: vspeed2 ,
				//vy: random(-2000,  2000),
				vy: Math.sqrt(4*1000000 - (vspeed2*vspeed2)), 
				//массаm радиус и цвет шара 
				massa: 2000,
				radius: 45
				//color: _color,
				//shadowBlur: _shadowBlur
			})
		balls.push({
				imag: myPics.ball3,
				//координаты по x и y
				x: 250,
				y: 100,
				//скорость по x и y
				vx: vspeed3 ,
				//vy: random(-2000,  2000), 
				vy: Math.sqrt(4*1000000 - (vspeed3*vspeed3)),
				//массаm радиус и цвет шара 
				massa: 2000,
				radius: 45
				//color: _color,
				//shadowBlur: _shadowBlur
			})
			
		// физика
		var gravity = 0; // пиксель / секунду^2
		var collisionDamper = 1;
		var timeInterval = animamtion.getTimeInterval();	
		var floorFriction = 9000; // пиксель / секунду^2



		function random(min, max){

			return Math.floor(Math.random() * (max - min + 1)) + min;
		}

		function movement(obj){	

		   timeInterval = animamtion.getTimeInterval()/10000;	

	       obj.vy += gravity * timeInterval;

	       // позиция
	       obj.y += obj.vy * timeInterval;
	       obj.x += obj.vx * timeInterval;

	       // столкновение с нижней стенкой  
	       if (obj.y > (canvas.height - 2*obj.radius)) {
	           obj.y = canvas.height - 2*obj.radius;
	           obj.vy *= -1;
	           obj.vy *= collisionDamper;
			
			}
	       // трение о верхнюю стенку
	       if (obj.y == canvas.height - obj.radius) {

	           if (obj.vx > 0.1)
	               obj.vx -= floorFriction * timeInterval;
	           else if (obj.vx < -0.1) 
	                obj.vx += floorFriction * timeInterval;
				else 
			    	obj.vx = 0;

			}
	       // столкновение с верхней стенкой  
	      // if (obj.y < (obj.radius)) {
		if (obj.y < 0) {
	           //obj.y = obj.radius;
		   obj.y=0;
	           obj.vy *= -1;
	           obj.vy *= collisionDamper;
			}
	       // столкновение с правой стенкой
	       if (obj.x > (canvas.width - 2*obj.radius)) {
	           obj.x = canvas.width - 2*obj.radius;
	           obj.vx *= -1;
	           obj.vx *= collisionDamper;
			}
	       // столкновение с левой стенкой
	       if (obj.x < 0) {
	           obj.x = 0;
	           obj.vx *= -1;
	           obj.vx *= collisionDamper;
			}
		}

		function collision(obj,obj2){


			var center1x = obj.x+45;
			var center1y = obj.y+45;
			var center2x = obj2.x+45;
			var center2y = obj2.y+45;
			var dX = center1x - center2x;
			var dY = center1y - center2y;
			//var dX = obj.x - obj2.x;
			//var dY = obj.y - obj2.y;
			var cx = (center1x + center2x)/2;
  			var cx = (center1y + center2y)/2;
			var disnance = Math.sqrt ( (dX*dX) + (dY*dY));
			
				
			if ( disnance <= (90) ){


				if ( disnance < (90) ){

					//if ( obj.x<  obj2.x){
					if ( center1x <  center2x){
					 	obj.x--;
					 	obj2.x++;
					 }
					 //else if ( obj.x > obj2.x){
					else if ( center1x > center2x){
					 	obj.x++;
					 	obj2.x--;

					 }

				}
				if ( disnance < (obj.radius + obj2.radius) ){

					// if ( obj.y<  obj2.y){
					if ( center1y<  center2y){
					 	obj.y--;
					 	obj2.y++;
					 }
					 //else if ( obj.y > obj2.y){
					if ( center1y<  center2y){
					 	obj.y++;
					 	obj2.y--;

					 }

				}

					   var objVx = obj.vx;
					   var objVy = obj.vy;

			          obj.vx = obj2.vx;//*0.999;
			          obj2.vx = objVx;//*0.999;

			          obj.vy = obj2.vy;//*0.999;
			          obj2.vy = objVy;//*0.999; */



			   }
		}

	

	

	
		

		animamtion.setStage(function(){

				context.beginPath();
				context.fillStyle = 'rgba( 200, 255, 255, '+random(1, 1)+')';

				context.rect(0,0, canvas.width, canvas.height);
				context.closePath();
				context.fill();

				for (var i = 0; i < balls.length; i++){
					//movement(balls[i]);
					context.beginPath();
					//context.arc(balls[i].x, balls[i].y, balls[i].radius, 0, 2 * Math.PI, false);
					context.drawImage(balls[i].imag,balls[i].x,balls[i].y);
					//context.fillStyle = balls[i].color;
					//context.shadowColor =   balls[i].color;
					//context.shadowBlur = balls[i].shadowBlur;
					context.shadowOffsetX = 0;
					context.shadowOffsetY = 0;
				    context.closePath();
					context.fill();
					for (var j = balls.length-1; j >= 0; j--) (i != j) ? collision(balls[i], balls[j]) : 1;
				}
				
					for (var i = 0; i < balls.length; i++){
					//movement(balls[i]);
					context.beginPath();
					//context.arc(balls[i].x, balls[i].y, balls[i].radius, 0, 2 * Math.PI, false);
					context.drawImage(balls[i].imag,balls[i].x,balls[i].y);
					//context.fillStyle = balls[i].color;
					//context.shadowColor =   balls[i].color;
					//context.shadowBlur = balls[i].shadowBlur;
					context.shadowOffsetX = 0;
					context.shadowOffsetY = 0;
				    	context.closePath();
					context.fill();
					for (var j = balls.length-1; j >= 0; j--) (i != j) ? collision(balls[i], balls[j]) : 1;
				}
					
					
					
					if(k==1){
						for (var i = 0; i < balls.length; i++){	
							movement(balls[i]);	
						}
					}
					

				

				

		});

		
		animamtion.start();
Ответить с цитированием