jdg/requestAnimationFrame
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Cleaning up

Browse Source
This commit is contained in:
José David Guillén 2021-11-11 22:06:54 +01:00
parent 56c478d614
commit a025dae28d
2 changed files with 58 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
index.html
View File

@ -3,6 +3,5 @@
<script src="index.js"></script> <script src="index.js"></script>
</head> </head>
<body> <body>
<canvas id="canvas"></canvas>
</body> </body>
</html> </html>

97
index.js
View File

@ -1,26 +1,37 @@
"use strict"; "use strict";
document.addEventListener('DOMContentLoaded', init); document.addEventListener('DOMContentLoaded', () => init());
let ctx, canvas = document.createElement("canvas");
function init() { function init() {
var canvas = document.getElementById("canvas"); function start() {
canvas.width = window.innerWidth canvas.width = window.innerWidth
canvas.height = window.innerHeight canvas.height = window.innerHeight
ctx = canvas.getContext('2d');
document.body.insertBefore(canvas, document.body.childNodes[0]);
document.addEventListener('keydown', controls);
run();
const ctx = canvas.getContext('2d'); for (let i = 0; i < 15; i++) add();
var balls = [];
add();
document.addEventListener('keydown', control);
anim();
function control(e) {
switch(e.key) {
case 'ArrowUp': add(); break;
case 'ArrowDown': remove(); break;
}
} }
function run() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
update();
requestAnimationFrame(run);
}
function controls(e) {
switch (e.key) {
case 'ArrowUp': add(); break;
case 'ArrowDown': remove(); break;
}
}
// -------------------------------------------------------------------
let balls = [];
function remove() { function remove() {
balls.pop(); balls.pop();
} }
@ -30,40 +41,48 @@ function init() {
let y = Math.floor(Math.random() * canvas.height); let y = Math.floor(Math.random() * canvas.height);
let speed = 1 + Math.floor(Math.random() * 10); let speed = 1 + Math.floor(Math.random() * 10);
let angle = Math.floor(Math.random() * 360); let angle = Math.floor(Math.random() * 360);
// angle must be in radians (now it's wrong) balls.push(new ball(x, y, speed, angle));
balls.push({ x: x, y: y, size: 20, speed: speed, angle: angle, color:'black' }); }
function update() {
balls.forEach(b => b.update());
} }
function anim() { start();
ctx.fillStyle = 'white'; }
ctx.fillRect(0, 0, canvas.width, canvas.height);
balls.forEach(b => { class ball {
update(b); constructor(x, y, speed, angle) {
draw(b); this.x = x;
} this.y = y;
); this.speed = speed;
requestAnimationFrame(anim); this.angle = angle;
this.color = 'black';
this.size = 20;
} }
update() {
function update(b) { this.move();
b.x += b.speed * Math.cos(b.angle); this.draw();
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) { draw() {
b.angle += 180; ctx.fillStyle = this.color;
ctx.fillRect(this.x, this.y, this.size, this.size);
} }
function draw(b) { move() {
ctx.fillStyle = b.color; this.x += this.speed * Math.cos(this.angle);
ctx.fillRect(b.x, b.y, b.size, b.size); this.y += this.speed * Math.sin(this.angle);
if (this.x < 0 || this.x > canvas.width || this.y < 0 || this.y > canvas.height)
this.bounce();
} }
bounce() {
this.angle += 180;
}
} }