A glaring math problem pointed out by DMGregory is that you're multiplying your
y position by
-0.9, meaning it's oscillating between positive and negative. That's probably a good brunt of why jumping doesn't work, even ignoring the other problems below.
detectKeys doesn't at all do what you think it's doing. It's just registering a callback on
onkeypress. It won't actually read any keys at that time. The event handler will get triggered when a key is pressed. And since you're re-registering this over and over again via
setInterval, you're registered multiple handlers, which will all get called whenever a key is pressed. You just want to register the handlers once at the beginning of the game and never again; the callbacks will be invoked when a key is pressed so there's no need to keep polling. The callback will be called only when the key state is triggered (I'll address that below).
document.onkeypress isn't what you want anyway. It is triggered when you first press the key and is automatically repeated based on the browser's/OS's key repeat rate. You want to use
Third, and going back to how you're using the callbacks, you're only applying movement when the key is triggered (first pressed, or on the key repeated rate because you're using
onkeypress). You want to store the input state (e.g. whether the player is trying to move left/right or is trying to jump) and apply that state, rather than directly responding to keyboard events. This means using
onkeyup to update some state variables and then reading those state variables in your game loop.
Fourth, you have a typo in
jump. You wrote
y=+20 instead of
y+=20. What you wrote is equivalent to saying
y=(+20) or just
Finally (from what I see in a quick perusal), the way you're trying to do the game loop is wrong. You have
draw correctly keyed to
requestAnimationFrame, but your
updateVariables should be as well.
setInterval is not a good function to use in general for this kind of stuff, because the interval is non-reliable (it might be more or less frequent than requested or be skipped periodically, etc.). Make just a single
update function that is scheduled via
requestAnimationFrame, and then have this
update function call your
updateVariables function and then the
draw function. You'd also insert a new function here that reads those keyboard state variables and applies the requested movement. I'd further add that you want to use a time delta (because you can't predict the framerate that
requestAnimationFrame will run at) when applying your physics/movement code so that you get smooth and predictable movement; you can calculate a time delta via the