commit 56c478d614acc1ff03225df6bbf59416a1efcb8c Author: JDG Date: Wed Nov 10 21:58:35 2021 +0100 Testing requestAnimationFrame diff --git a/index.html b/index.html new file mode 100644 index 0000000..027d142 --- /dev/null +++ b/index.html @@ -0,0 +1,8 @@ + + + + + +

+ + \ No newline at end of file diff --git a/index.js b/index.js new file mode 100644 index 0000000..ed8f2d2 --- /dev/null +++ b/index.js @@ -0,0 +1,69 @@ +"use strict"; + +document.addEventListener('DOMContentLoaded', init); + +function init() { + var canvas = document.getElementById("canvas"); + canvas.width = window.innerWidth + canvas.height = window.innerHeight + + const ctx = canvas.getContext('2d'); + var balls = []; + add(); + document.addEventListener('keydown', control); + + anim(); + + function control(e) { + switch(e.key) { + case 'ArrowUp': add(); break; + case 'ArrowDown': remove(); break; + } + } + + function remove() { + balls.pop(); + } + + function add() { + let x = Math.floor(Math.random() * canvas.width); + let y = Math.floor(Math.random() * canvas.height); + let speed = 1 + Math.floor(Math.random() * 10); + let angle = Math.floor(Math.random() * 360); + + // angle must be in radians (now it's wrong) + balls.push({ x: x, y: y, size: 20, speed: speed, angle: angle, color:'black' }); + } + + function anim() { + ctx.fillStyle = 'white'; + ctx.fillRect(0, 0, canvas.width, canvas.height); + + balls.forEach(b => { + update(b); + draw(b); + } + ); + requestAnimationFrame(anim); + } + + + function update(b) { + b.x += b.speed * Math.cos(b.angle); + b.y += b.speed * Math.sin(b.angle); + + if ( b.x<0 || b.x>canvas.width || b.y<0 || b.y>canvas.height ) bounce(b); + } + + function bounce(b) { + b.angle += 180; + } + + function draw(b) { + ctx.fillStyle = b.color; + ctx.fillRect(b.x, b.y, b.size, b.size); + } + +} + +