Оператор If внутри requestanimationframe продолжается, даже если параметры не выполнены

#javascript

Вопрос:

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

 
canvasmain.width  = window.innerWidth;
canvasmain.height = window.innerHeight;

//CHARACTER:
const square = {
    height: 75,
    jumping: true,
    width: 75,
    x: canvasmain.width / 2,
    xVelocity: 0,
    y: canvasmain.height / 2,
    yVelocity: 0
  };

  //floor
  const platform = {
      height: 30,
      width: 100,
      x: square.x,
      xVelocity: 0,
      y: square.y   square.height,
      yVelocity:0
  }

//MOVEMENT:
const controller = {
    left: false,
    right: false,
    up: false,
    keyListener: function (event) {
      let key_state = (event.type == "keydown") ? true : false;
      switch (event.keyCode) {
        case 37: // left arrow
          controller.left = key_state;
          break;
        case 38: // up arrow
          controller.up = key_state;
          break;
        case 39: // right arrow
          controller.right = key_state;
          break;
      }
    }
  };
  const loop = function () {

    if (controller.up amp;amp; square.jumping == false) {
      square.yVelocity -= 30;
      square.jumping = true;
    }
  
    if (controller.left) {
      square.xVelocity -= 0.5;
    }
  
    if (controller.right) {
      square.xVelocity  = 0.5;
    }
  
    square.yVelocity  = 1.5;// gravity
    square.x  = square.xVelocity;
    square.y  = square.yVelocity;
    square.xVelocity *= 0.9;// friction
    square.yVelocity *= 0.9;// friction

    // if square is falling below floor line
    if (square.y > canvasmain.height - 75) {
  
      square.jumping = false;
      square.y = canvasmain.height - 75;
      square.yVelocity = 0;
  
    }
  
    // if square is going off the left of the screen
    if (square.x < 0) {
  
      square.x = 0;
  
    } else if (square.x > canvasmain.width - 75) {// if square goes past right boundary
  
      square.x = canvasmain.width - 75;
  
    }
    // Creates the backdrop for each frame
    context.fillStyle = "#394129";
    context.fillRect(0, 0, canvasmain.width, canvasmain.height); // x, y, width, height
  

    // Creates and fills the cube for each frame
    context.fillStyle = "#8DAA9D"; // hex for cube color
    context.beginPath();
    context.rect(square.x, square.y, square.width, square.height);
    context.fill();
  

    // Creates the "ground" for each frame
    context.fillStyle = "#202020";
    context.beginPath();
    context.rect(platform.x, platform.y, platform.width, platform.height)
    context.fill();

    // call update when the browser is ready to draw again
    window.requestAnimationFrame(loop);

    //platform
    platform.y  = platform.yVelocity;

    console.log(square.yVelocity)
  
    if (square.yVelocity > 0.1 ) {
      platform.yVelocity = 1.5
  };
    
    if (square.yVelocity < 0 ) {
      platform.yVelocity = -1.5
  };
}

  window.addEventListener("keydown", controller.keyListener)
  window.addEventListener("keyup", controller.keyListener);
  window.requestAnimationFrame(loop);

1. Вы установили platform.yVelocity значение 1.5 или -1.5 , но никогда не назначаете 0 свойство.

2. не совсем понятно, чего вы пытаетесь достичь

3. @Teemu в первой части я установил: платформа const = { высота: 30, ширина: 100, x: квадрат.x, xVelocity: 0, y: квадрат.y квадрат.высота, yVelocity:0 }

4. @B_Joker Я пытаюсь заставить платформу двигаться вниз, когда квадрат y движется вверх.

5. Да, но при .yVelocity изменении во время анимации вы не сбрасываете значение. Может быть , вам следует добавить if «для проверки square.yVelocity == 0 «, и если это пройдет, установите .yVelocity значение «ноль»..?

Ответ №1:

Вы не сбрасываете значение . yVelocity

Ответ №2:

Понял, ребята, thx @Teemu, мне просто нужно было установить значение 0, если бы это не было «если». Черт, действительно заняло какое-то время. if (square.yVelocity > 0 ) {platform.yVelocity = 1.5} else{ platform.yVelocity = 0}; if (square.yVelocity < 0 ) {platform.yVelocity = -1.5} else { platform.yVelocity = 0} } правка: фрик, он перемещает платформу только тогда, когда куб поднимается, а не опускается ;-;