游戏：方形不会落在画布小提琴中javascript，html5

Question

I'm creating this jumping game

PROBLEM

Withing the jumping logic I add Player.y +=Player.vy; to make the red square fall once reached the higher level (simulating gravity), but it just get stucked at the top. https://jsfiddle.net/0f34at75/6/

What am I doing wrong?

 var canvas = document.getElementById('myCanvas'); var ctx = canvas.getContext("2d"); var ground = 130; var Player = { x: 20, y: ground, vx: 5, vy: 5, yMax: 10, gravity: 3, jumping: false }; function jump() { Player.jumping = true; } function gravity() { if (Player.jumping == true) { if (Player.y < Player.yMax) { Player.y += Player.vy; } else { Player.y -= Player.vy; } } else { Player.y = ground; } } function createPlayer() { ctx.fillStyle = "red"; ctx.fillRect(Player.x, Player.y, 50, 50); } function createGround() { ctx.fillStyle = "blue"; ctx.fillRect(0, 180, 100, 50); } function ClearCanvas() { ctx.clearRect(0, 0, canvas.width, canvas.height); } setInterval(function() { ClearCanvas(); gravity(); createGround() createPlayer(); }, 20); canvas.addEventListener("click", jump); 

 #myCanvas{ border:1px solid red; } 

 <canvas id="myCanvas" width="400" height="200">click</canvas> 

Answer 1

As @Nicolás Marzano says, separate your jumping and falling logic.

Alternatively (although the effect is slightly different) you might consider an actual gravity-style acceleration towards the ground, instead - the jump will look more realistic and it can be easier to programme.

var Player = {
  x: 20,
  y: ground,
  jumpSpeed: 5,
  vx: 0,
  vy: 0,
  gravity: 0.1
};

function jump() {
  Player.vy = -Player.jumpSpeed;
}

function gravity() {
  Player.y += Player.vy;
  Player.vy += Player.gravity;
  if (Player.y >= ground) {
     Player.y = ground;
     Player.vy = 0;
  }
}

https://jsfiddle.net/sjcmrn/f1bw9nx1/10/