JSFiddle - React, Tailwind, and code Playground

by hugoruscitti

HTML

<canvas id='canvas' width=300 height=300>

JavaScript

var canvas = document.getElementById('canvas');
var c = canvas.getContext('2d');

function azar(min, max) {
    return Math.random() * (max - min) + min;
}

var p = {
    x: 150,
    y: 150,
    vx: azar(-10, 10),
    vy: azar(-10, 10),
    ancho: 50
}

function dibujar() {
    c.fillStyle='rgba(255, 255, 255, 0.2)';
    c.fillRect(0, 0, 300, 300);
    
    c.fillStyle = 'blue';
    p.x += p.vx;
    p.y += p.vy;
    p.vy += 0.2;
    p.ancho = p.ancho * 0.95;
    c.fillRect(p.x, p.y, p.ancho, p.ancho);
}

setInterval(dibujar, 30);