Написал скрипт, по клику шары начинают движение в произвольном направлении. Все работает хорошо, кроме столкновений.
проблема: код брал изначально чужой, там были не рисунки из файла, а нарисованные шарики, поэтому координаты 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();
