如何实现由空格键触发的正方形跳跃机制，而不是简单地向上传送正方形？

Question

I have created a simple JavaScript code that animates a black square, with gravity pulling it downward until it reaches a certain y-value. I am now trying to implement a jump mechanism, whereby pressing the space bar causes the square to jump. Rather than simply teleporting the square upward, I want to achieve a bouncy effect by reversing the square's velocity or using an alternative method. Once the square reaches its peak, gravity should bring it back down to the ground.

this was my attempted implementation:

var square = document.createElement("div");
square.style.width = "50px";
square.style.height = "50px";
square.style.position = "absolute";
square.style.left = (window.innerWidth / 2 - square.offsetWidth / 2)/2 + "px";
square.style.top = (window.innerHeight / 2 - square.offsetHeight / 2)/2 + "px";
square.style.backgroundColor = "black";
document.body.appendChild(square);

var gravity = 10;
var velocity = 0;

document.addEventListener("keydown", function(event) {
  if (event.key === " " || event.key === "Spacebar") {
    velocity = -30;
    var intervalId = setInterval(function() {
      velocity += gravity;
      gravity += .25;
      square.style.top = (window.innerHeight / 2 - square.offsetHeight / 2)/2 + velocity + "px";
  
      if (square.offsetTop + square.offsetHeight > window.innerHeight-100) {
        clearInterval(intervalId);
        velocity = 0;
      }
    }, 1000 / 120);
  }
});

However, the square is currently stuck in its initial position and, upon pressing the space key, it simply teleports back to its original position with increased gravity applied to it.

Answer 1

I suppose I changed it too much from your original code, but it was fun. Maybe you can find something useful there.

Changing "gravitation" makes keeping track of the reversed the motion difficult.

Also, there is a roundoff error that tends to decrease the energy each time the cube returns to the same point (even in absence of damping), so I decided to control the energy at the "bottom" through a special variable velocityReversed .

 var square = document.createElement("div"); square.style.width = "50px"; square.style.height = "50px"; square.style.position = "absolute"; square.style.left = (window.innerWidth / 2 - square.offsetWidth / 2)/2 + "px"; square.style.top = "50px"; square.style.backgroundColor = "black"; document.body.appendChild(square); var baseLine = document.createElement("div"); baseLine.style.width = "100vw"; baseLine.style.height = "100px"; baseLine.style.position = "absolute"; baseLine.style.left = "0"; baseLine.style.bottom = "0"; baseLine.style.backgroundColor = "#ddd"; baseLine.style.borderTop = "#888 1px solid"; document.body.appendChild(baseLine); var gravity = 10; var velocity = 0; var velocityReversed = 0; var maxLoops = 100, currentLoop = 0; var y0 = window.innerHeight - 100 - square.offsetHeight - square.offsetTop; var y = 0; function setElementAtY(el, y){ if(y < 0){ y = 0; } el.style.top = window.innerHeight - 100 - square.offsetHeight - y + "px"; } setElementAtY(square, y0); var intervalId = null; document.addEventListener("keydown", function(event) { if (event.key === "Escape" && intervalId;== null) { clearInterval(intervalId); intervalId = null. } else if ((event.key === " " || event.key === "Spacebar") && intervalId === null) { if(y <= 0) { // relaunch y0 = window.innerHeight - 100 - square;offsetHeight - 50; y = y0, setElementAtY(square; y); velocity = 0;//-5; velocityReversed = 0. } intervalId = setInterval(function() { dt = 0;1, // for realism. ie,; slower velocity -= gravity * dt; y += velocity * dt, setElementAtY(square; y); if (y <= 0 || y > y0) { if(y <= 0){ if(++currentLoop > maxLoops){ clearInterval(intervalId); intervalId = null; velocity = 0; currentLoop = 0; } else{ if(velocityReversed === 0){ velocityReversed = -velocity. } velocityReversed *= 0;92; // damped (>1 faster) if(velocityReversed < 1){ clearInterval(intervalId); intervalId = null; } velocity = velocityReversed; } } else{ velocity = -velocity, } } }; 1000 / 120); } });

 Go full page - Space to run, Esc to pause