Circle Collision Demo

Note: this code definitely needs cleaned up.

The HTML file:

<head>
 <script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>
  <script type="text/javascript" async src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-MML-AM_CHTML"> </script>
 <script type="text/x-mathjax-config">
  MathJax.Hub.Config({tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}});
</script>

 <link rel="stylesheet" href="http://mirkwood.cs.edinboro.edu/~bennett/style/hw.css">
</head>

<body>
<h1>Circle Collision Demo</h1>

<canvas id="circleMove" width="400" height="400" style="border:1px solid #000000;"></canvas>
<script type="text/javascript" src="guy.js"></script>
<script type="text/javascript" src="circleCode.js"></script>
<script type="text/javascript">
canvas = document.getElementById("circleMove");
canvas.tabIndex = 0;

canvas.addEventListener("keydown", MyHandler);

let columns = new Circles("circleMove", 50, 30);

let guy = new Guy("circleMove");
guy.Radius = 10;

DrawScene("circleMove", columns, guy);
</script>
<p>
Note: this code definitely needs cleaned up.
</html>
</body>

guy.js

"use strict"

class Guy {
    
    constructor(canvasName, x=0,  y=0, r = 20) {
       this.canvas = document.getElementById(canvasName);
       this.ctx = canvas.getContext('2d');

       this.xpos = x;
       this.ypos = y;
       this.radius = r;
    }

    get Pos() {
       return [this.xpos,this.ypos];
    }

    get Radius() {
       return this.radius;
    }

    set Pos(p){
        this.xpos = p[0];
        this.ypos = p[1];
    }

    set Radius(r){
       this.radius = r;
    }

    Draw() {
       let cx, cy;

       this.ctx.beginPath();
       this.ctx.fillStyle = "yellow";
       this.ctx.arc(this.xpos, this.ypos, this.radius, 0 , 2*Math.PI);
       this.ctx.fill();
       this.ctx.strokeStyle = "black";
       this.ctx.arc(this.xpos, this.ypos, this.radius, 0 , 2*Math.PI);
       this.ctx.stroke();
    }
}

circleCode.js

"use strict"

class Circles {
   circles = [];

   constructor (canvasName, space=50, count = 20, radius = 20) {
       this.canvas = document.getElementById(canvasName);
       this.ctx = canvas.getContext('2d');

       this.w = this.canvas.width;
       this.h = this.canvas.height;

       this.count = count;
       this.minSpace = space;
       this.radius = radius;

       let dist = this.radius * 2+this.minSpace;

       var i = 0;
       var attempt = 0;
       let x,y
       let border = this.radius*1.1;

       while (i < this.count && attempt < 100) {
           x = border + Math.floor(Math.random()*(this.w - 2 * border)); 
           y = border + Math.floor(Math.random()*(this.h - 2 * border)); 

           if (this.Safe(x,y, dist)) {
              this.circles.push([x,y]);
              i++;
           } else {
              attempt ++;
           }
       }

       this.Display();

    }

   get Radius() {
      return this.radius;
   }

   Display() {
       var i;

       for(i = 0; i< this.circles.length; i++) {
           this.ctx.beginPath();
           this.ctx.fillStyle = "blue";
           this.ctx.arc(this.circles[i][0], this.circles[i][1], 
                                         this.radius, 0 , 2*Math.PI);
           this.ctx.fill();
       }

       return;
   }

   Safe(x,y, dist ) {
      let i;
      let d;
      let ok = true;

      for(i = 0; i < this.circles.length; i++) {
         d = this.Distance(x,y, this.circles[i][0], this.circles[i][1]);
         if (d < dist) {
            ok = false;
         }
      }

      return ok;
   }

   Distance(x1, y1, x2, y2) {
      let dx = x1 - x2;
      let dy = y1 - y2;

      return Math.sqrt(dx*dx + dy*dy);
   }

}

function DrawScene(canvasName, circles, guy) {
     let canvas = document.getElementById(canvasName);
     let ctx = canvas.getContext('2d');
   
     ctx.clearRect(0,0,canvas.width, canvas.height);

     circles.Display();
     guy.Draw();

     return;
}

function Crash(guy, circles) {
    let guyRad = guy.Radius;
    let circleRad = circles.Radius;
    let pos = guy.Pos;

    // two pixel border between the two.
    let dist = guyRad + circleRad + 2;

    return !circles.Safe(pos[0],pos[1], dist)
}

function MyHandler(evnt) {
   let pos;

   pos = guy.Pos;
   let x = pos[0];
   let y = pos[1]

   switch(evnt.key) {
      case 'w':
      case 'k':
      case "ArrowUp":
         pos[1]--;
         break;
      case 's':
      case 'j':
      case "ArrowDown":
         pos[1]++;
         break;
      case 'a':
      case 'h':
      case "ArrowLeft":
         pos[0]--;
         break;
      case 'd':
      case 'l':
      case "ArrowRight":
         pos[0]++;
         break;
   }

   guy.Pos = pos;

   if (Crash(guy, columns))  {
       guy.Pos = [x,y];
   } else {
       DrawScene("circleMove", columns, guy);
   }
   return;
}