help understanding collision detection js

Question

Hey everyone so Im still working on canvas animations and have gotten to the point where im fairly comfy when it comes to creating images and supplying them with simple animations so that they move about the screen. The problem I run into is that im trying to experiment with collision detection between objects and i just cant seem to wrap my head around it. Ive got two simple balls that bounce around the screen and Ive tried to implement Math.sqrt((ball2.x-ball.x)2 +(ball2.y-ball.y)2) -(ball2.radius+ball.radius) <0 to see if they are colliding and if they are than log collided to the console. There seems to be an error somewhere though in my thought process because when i analyze the code the collided ends up jumping erratically even when the objects are no where near eachother, this makes it impossible to create a response for the objects so that when they do collide they can bounce off one another. Anyway heres the js file below, if anyone can tell me where ive gone wrong i would really appreciate it

var canvas=document.getElementById("canvas");
  var width=canvas.width;
  var height=canvas.height;
  var ctx=canvas.getContext('2d');


  var ball={
    x:50,
    y:50,
    radius:50,
    vx:4,
    vy:5,
    color:'black',
    draw: function()
    {
    ctx.fillStyle=this.color;
    ctx.beginPath();
    ctx.arc(this.x,this.y,this.radius,0,6.24,false);
    ctx.fill();
  }

  };



  var ball2={
    x:550,
    y:50,
    radius:50,
    vx:5,
    vy:3,
    color:'black',
    draw: function()
    {
    ctx.fillStyle=this.color;
    ctx.beginPath();
    ctx.arc(this.x,this.y,this.radius,0,6.24,false);
    ctx.fill();
  }

  };






  function draw(){
    ctx.clearRect(0,0,canvas.width,canvas.height);

  //ball 1 boundry control
    ball.x += ball.vx;
    ball.y+=ball.vy;
    if(ball.x+ball.vx>width -ball.radius || ball.x+ ball.vx<0+ ball.radius){ball.vx= -ball.vx;}
    if(ball.y+ball.vy>height - ball.radius || ball.y+ball.vy<0+ ball.radius){ball.vy= -ball.vy;}



  //ball 2 boundry control
  ball2.x += ball2.vx;
  ball2.y+=ball2.vy;
  if(ball2.x+ball2.vx>width -ball2.radius|| ball2.x+ball2.vx<0+ ball2.radius){ball2.vx= -ball2.vx;}
  if(ball2.y+ball2.vy>height -ball2.radius|| ball2.y+ball2.vy<0+ ball2.radius){ball2.vy= -ball2.vy;}


  //collision detection between balls.
  if(
  Math.sqrt((ball2.x-ball.x)^2 +(ball2.y-ball.y)^2)
  -(ball2.radius+ball.radius) <0
  )
  {console.log("collided");}

    ball.draw();
    ball2.draw();
    window.requestAnimationFrame(draw);
  }

  window.onload=draw;

Welcome to the Treehouse Community

Looking to learn something new?

Daniel Springer

Daniel Springer

help understanding collision detection js