JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.5/p5.js"></script>
JavaScript
var px = 50;
var py = 430;
var velocity = new p5.Vector(0,0);
var collision = false;
function setup() {
createCanvas(500, 500);
background(100);
}
function draw() {
if (py > 430) {
// Don't apply gravity
collision = true;
}
else {
var gravity = createVector(0, 5);
velocity.y = gravity.y;
py += velocity.y;
collision = false;
}
noStroke();
fill(55, 37, 73);
background(100);
rect(px, py, 50, 70);
}
function keyPressed() {
if (key == ' ' && collision) {
var jump = createVector(0, -150);
velocity.y = jump.y;
py += velocity.y;
}
}