JSFiddle - React, Tailwind, and code Playground

by Scott Kaye

JavaScript

const canvas = document.createElement("canvas");
canvas.width = 400;
canvas.height = 400;

document.body.append(canvas);

const ctx = canvas.getContext("2d");

let x = 10;
let y = 390;
let vx = 5;
let vy = -10;

function draw() {
	ctx.clearRect(0, 0, 400, 400);
	
	vy += 0.2;

	x += vx;
	y += vy;
	
	vx *= 0.99;
	vy = Math.min(vy, 25);
	
	ctx.beginPath();
	ctx.arc(x, y, 2, 0, 2 * Math.PI);
	ctx.fill();
	
	if (y > 395) {
		vy *= -0.75;
		y += vy * 2;
	}
	
	if (x < 5 || x > 395) {
		vx *= -0.8;
		y += vx;
	}
	
	requestAnimationFrame(draw);
}

draw();