Игра: квадрат не падает в холст fiddle javascript, html5

Dan спросил: 28 марта 2018 в 04:18 в: javascript

Я создаю эту прыгающую игру

ПРОБЛЕМА

С помощью логики перехода я добавляю Player.y +=Player.vy;, чтобы сделать красный квадрат падение однажды достигло более высокого уровня (симулируя гравитацию), но оно просто застревает вверху. https://jsfiddle.net/0f34at75/6/

Что я делаю неправильно?

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>

1 ответ

Есть решение
Stuart ответил: 28 марта 2018 в 05:48

Как говорит @ Nicolás Marzano, отделите свою логику прыжков и падений.

В качестве альтернативы (хотя эффект немного отличается) вы можете рассмотреть фактическое ускорение в стиле гравитации к земле, вместо этого - прыжок будет выглядеть более реалистично, и это может быть проще для программирования.

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/

Dan ответил: 28 марта 2018 в 05:10
круто, нет необходимости использовать логические значения, это про! спасибо +1