javascript - 反转游戏方向

Question

我正在开发一款基本游戏，用户需要穿过开口并避免撞到障碍物。我现在的问题是游戏的流程是从底部到顶部，而实际上我需要障碍物从顶部到底部。

代码中缺少什么？感谢您的帮助。

let myObstacles = [];

let myGameArea = {
    canvas: document.createElement("canvas"),
    frames: 0,
    start: function() {
      this.canvas.width = 700;
      this.canvas.height = 500;
      this.context = this.canvas.getContext("2d");
      this.canvas.classList.add('canvasBg');
      document.body.insertBefore(this.canvas, document.body.childNodes[0]);
      this.interval = setInterval(updateGameArea, 20);
    },
    clear: function() {
        this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
    },
    stop: function() {
        clearInterval(this.interval);
    },
    score: function() {
        var points = Math.floor(this.frames / 5);
        this.context.font = "18px serif";
        this.context.fillStyle = "black";
        this.context.fillText("Score: " + points, 350, 50);
    }
  }


  class Component {
    constructor(width, height, color, x, y) {
      this.width = width;
      this.height = height;
      this.color = color;
      this.x = x;
      this.y = y;
      this.speedX = 0;
      this.speedY = 0;
    }
  
    update() {
      let ctx = myGameArea.context;
      ctx.fillStyle = this.color;
      ctx.fillRect(this.x, this.y, this.width, this.height);
    }

    newPos() {
        this.x += this.speedX;
        this.y += this.speedY;
      }

    left() {
        return this.x;
    }
    right() {
        return this.x + this.width;
    }
    top() {
        return this.y;
    }
    bottom() {
        return this.y + this.height;
    }
    
    crashWith(obstacle) {
        return !(
          this.bottom() < obstacle.top() ||
          this.top() > obstacle.bottom() ||
          this.right() < obstacle.left() ||
          this.left() > obstacle.right()
        );
      }
    }
  
    function checkGameOver() {
        let crashed = myObstacles.some(function(obstacle) {
          return player.crashWith(obstacle);
        });
      
        if (crashed) {
          myGameArea.stop();
        }
      }
  

  document.onkeydown = function(e) {
    switch (e.keyCode) {
      case 38: // up arrow
        player.speedY -= 1;
        break;
      case 40: // down arrow
        player.speedY += 1;
        break;
      case 37: // left arrow
        player.speedX -= 1;
        break;
      case 39: // right arrow
        player.speedX += 1;
        break;
    }
  };

  function updateObstacles() {
    for (i = 0; i < myObstacles.length; i++) {
        myObstacles[i].y += -3;
        myObstacles[i].update();
      }


    myGameArea.frames += 1;
    if (myGameArea.frames % 60 === 0) {
      let x = myGameArea.canvas.width;
      let y = myGameArea.canvas.height;
      let minWidth = 20;
      let maxWidth = 200;
      let width = Math.floor(
        Math.random() * (maxWidth - minWidth + 1) + minWidth
      );
      var minGap = 70;
      var maxGap = 200;
      var gap = Math.floor(Math.random() * (maxGap - minGap + 1) + minGap);
      myObstacles.push(new Component(width, 10, "green", 0, y));
      myObstacles.push(
        new Component(y-width-gap, 10, "green", width+gap, y)
      );
    }
  }


  document.onkeyup = function(e) {
    player.speedX = 0;
    player.speedY = 0;
  };

  function updateGameArea() {
    myGameArea.clear();
    player.newPos();
    player.update();
    updateObstacles();
    checkGameOver();
    myGameArea.score();
  };

myGameArea.start();
let player = new Component(30, 30, "red", 0, 110);

Answer 1

我通过更改您的 updateObstacles 函数中的 3 项来让它工作。

首先，将 myObstacles[i].y += -3 更改为 myObstacles[i].y += 3

其次，将let y = myGameArea.canvas.height更改为let y = 0

三、改变

new Component(y-width-gap, 10, "green", width+gap, y)

到

new Component(x-width-gap, 10, "green", width+gap, y)

完整代码:

function updateObstacles() {
  for (i = 0; i < myObstacles.length; i++) {
    myObstacles[i].y += 3;
    myObstacles[i].update();
  }


  myGameArea.frames += 1;
  if (myGameArea.frames % 60 === 0) {
    let x = myGameArea.canvas.width;
    let y = 0;
    let minWidth = 20;
    let maxWidth = 200;
    let width = Math.floor(
      Math.random() * (maxWidth - minWidth + 1) + minWidth
    );
    var minGap = 70;
    var maxGap = 200;
    var gap = Math.floor(Math.random() * (maxGap - minGap + 1) + minGap);
    myObstacles.push(new Component(width, 10, "green", 0, y));
    myObstacles.push(
      new Component(x-width-gap, 10, "green", width+gap, y)
    );
  }
}

Example jsfiddle