From 56c478d614acc1ff03225df6bbf59416a1efcb8c Mon Sep 17 00:00:00 2001
From: JDG <jd@infdj.com>
Date: Wed, 10 Nov 2021 21:58:35 +0100
Subject: [PATCH] Testing requestAnimationFrame
---
index.html | 8 +++++++
index.js | 69 ++++++++++++++++++++++++++++++++++++++++++++++++++++++
2 files changed, 77 insertions(+)
create mode 100644 index.html
create mode 100644 index.js
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..027d142
--- /dev/null
+++ b/index.html
@@ -0,0 +1,8 @@
+<html>
+<head>
+<script src="index.js"></script>
+</head>
+<body>
+<canvas id="canvas"></canvas>
+</body>
+</html>
\ 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);
+ }
+
+}
+
+