yihan.yu's Sandbox

Welcome to yihan.yu's Sandbox.

View Other Sites from yihan.yu

Toggle Full-Width

HTML

JavaScript

// jshint esversion: 6

let canvas = document.getElementById('myCanvas');
canvas.width = window.innerWidth - 10;
canvas.height = window.innerHeight - 10;
let c = canvas.getContext('2d');

var time = 20;
var timeOut  = null;
var interval;

listOfWalls = []

var wall = [.1, .2, .03, .4]
listOfWalls.push(wall);

wall = [.1, .6, .03, .2]
listOfWalls.push(wall);

wall = [.1, .2, .25, .03]
listOfWalls.push(wall);

wall = [.1, .4, .25, .03]
listOfWalls.push(wall);

wall = [.4, .6, .03, .2]
listOfWalls.push(wall);

wall = [.5, .1, .03, .2]
listOfWalls.push(wall);

wall = [.6, .8, .03, .2]
listOfWalls.push(wall);

wall = [.7, .6, .03, .2]
listOfWalls.push(wall);

wall = [.8, .3, .03, .2]
listOfWalls.push(wall);

wall = [.8, .8, .2, .03]
listOfWalls.push(wall);

wall = [.4, .7, .2, .03]
listOfWalls.push(wall);

wall = [.8, .1, .2, .04]
listOfWalls.push(wall);

for (var i = 0; i < 12; i++) {
  listOfWalls[i][0] *= canvas.width;
  listOfWalls[i][1] *= canvas.height;
  listOfWalls[i][2] *= canvas.width;
  listOfWalls[i][3] *= canvas.height;
}

function drawWall() {
  for (var wall of listOfWalls) {
    c.rect(wall[0], wall[1], wall[2], wall[3]);
    c.fillStyle = 'blue';
    c.fill();
  }
}

class Ball {
  constructor() {
    this.r = 20;
    this.x = this.r;
    this.y = this.r;
    this.dx = 10*(Math.random() * 1 - 0.5);
    this.dy = 10*(Math.random() * 1 - 0.5);
    this.theta = 0;
    this.dtheta = 0.1 * (Math.random() - 1);
    this.setColor();
  }

move() {
    // Loop over all walls to detect collisions
    for (var wall of listOfWalls) {
      if ((this.x + this.r > wall[0]) &&
          (this.x - this.r < wall[0] + wall[2]) &&
          (this.y + this.r < wall[1] + wall[3]) &&
          (this.y - this.r > wall[1])
         )
      { 
        this.dx = -this.dx;
      }
      if ((this.y + this.r > wall[1]) &&
          (this.y - this.r < wall[1] + wall[3]) &&
          (this.x + this.r < wall[0] + wall[2]) &&
          (this.x - this.r > wall[0])
         )
      {
        this.dy = -this.dy; 
      }
    }

// Bouncing off the side walls of the canvas.
    if ((this.x < this.r) || (this.x > canvas.width - this.r)) {
      this.dx = -this.dx;
    }
    if ((this.y < this.r) || (this.y > canvas.height - this.r)) {
      this.dy = -this.dy;
    }

this.x += this.dx;
    this.y += this.dy;
    this.theta += this.dtheta;
  }
 
  
  setColor() {
    let red = Math.floor(Math.random() * 256);
    let green = Math.floor(Math.random() * 256);
    let blue = Math.floor(Math.random() * 256);
    this.color = 'rgb(' + red.toString() + ', ' +
                          green.toString() + ', ' +
                          blue.toString() + ')';
  }

draw() {
    c.beginPath();
    c.arc(this.x, this.y, this.r, 0, 2 * 3.14159);
    c.closePath();
    c.fillStyle = this.color;
    c.fill();
    c.beginPath();
    c.moveTo(this.x, this.y);
    c.lineTo(this.x + this.r * Math.cos(this.theta),
             this.y + this.r * Math.sin(this.theta));
    c.lineWidth = this.radius;
    c.strokeStyle = 'black'
    c.stroke();
  }
}

balls = [];
for (let i = 0; i < 10; i++) {
  balls.push(new Ball());
}

function run() {
  c.clearRect(0, 0, canvas.width, canvas.height);
  for (let ball of balls) {
    ball.move();
    ball.draw();
  }
  drawWall();
}

setInterval(run, 20);

CSS