yihan.yu @
henlo
Welcome to yihan.yu's Sandbox.
View Other Sites from yihan.yu
Toggle Full-Width
HTML
<canvas id="myCanvas"></canvas>
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