How to fix collisions if Im using images for simple game in javascript??

Answer 1

Could you share a link to your code?

Answer 2

Uhmm....I used a library called P5JS

Answer 3

In that case, it should be easier actually. I can help you out more if you provide a link to your sketch or an example of your problem.

Answer 4

function Ball1() {
this.x = 300;
this.y = 100;
this.show = function() {
image(img, this.x, this.y, 50, 50);
}
this.move = function() {
this.y += 5;
}
this.hits = function(other) {
//calculate distance
var d = dist(this.x, this.y, other.x, other.y);
if (d < 50) {
return true;
} else {
return false;
}
}
}

function Ball() {
this.x = 300;
this.y = 400;
this.display = function() {
image(img1, this.x, this.y, 50, 50);
}
}

var img;
var img2;

function preload() {
img = loadImage('img1');
img2 = loadImage('img2');
}

var ball;
var ball1;

function setup() {
ball = new Ball();
ball1 = new Ball1();
}

//loop
function draw() {
ball.show();
ball1.display();
ball.move();
//intersection
if (ball1.hits(ball)) {
this.y += 5;
}
}

Answer 5

So what happend is that....the collision worked but it only happened in the left side....so I did is that I draw an ellipse and it was displayed in the left side of the
image...so I think I need to create Like a boundry that will soround the image..
but Im not sure haha