Javascript游戲，撞牆時的碰撞檢測

Question

我一直在遵循W3schools教程，以在畫布上創建JavaScript游戲https://www.w3schools.com/graphics/game_obstacles.asp

我已經到了他們在其中添加障礙物的階段。目前，它具有碰撞檢測功能，可以在撞到牆壁時停止游戲。 我正在嘗試找出一種方法，將其像一堵牆一樣，盒子可能會撞到牆，不再移動該方向並繼續游戲，從而使牆起作用。

這是到目前為止我所擁有的： https : //jsfiddle.net/j9cy1mne/1/

<body onload="startGame()">
  <script>
    var myGamePiece;
    var myObstacle;

    var speed = 3;

    function startGame() {
      myGamePiece = new component(30, 30, "red", 10, 120);
      myObstacle = new component(10, 200, "green", 300, 120);
      myGameArea.start();
    }

    var myGameArea = {
      canvas: document.createElement("canvas"),
      start: function() {
        this.canvas.width = 480;
        this.canvas.height = 270;
        this.context = this.canvas.getContext("2d");
        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);
      }
    }

    function component(width, height, color, x, y) {
      this.width = width;
      this.height = height;
      this.speedX = 0;
      this.speedY = 0;
      this.x = x;
      this.y = y;
      this.update = function() {
        ctx = myGameArea.context;
        ctx.fillStyle = color;
        ctx.fillRect(this.x, this.y, this.width, this.height);
      }
      this.crashWith = function(otherobj) {
        var myleft = this.x;
        var myright = this.x + (this.width);
        var mytop = this.y;
        var mybottom = this.y + (this.height);
        var otherleft = otherobj.x;
        var otherright = otherobj.x + (otherobj.width);
        var othertop = otherobj.y;
        var otherbottom = otherobj.y + (otherobj.height);
        var crash = true;

        if ((mybottom < othertop) || (mytop > otherbottom) || (myright < otherleft) || (myleft > otherright)) {
          crash = false;

        }


        return crash;
      }
    }

    function updateGameArea() {
      if (myGamePiece.crashWith(myObstacle)) {
        console.log("crash");
      } else {
        myGameArea.clear();
        myObstacle.update();
        myGamePiece.x += myGamePiece.speedX;
        myGamePiece.y += myGamePiece.speedY;
        myGamePiece.update();
      }
    }
    document.onkeydown = checkKeyD;

    function checkKeyD(e) {

      e = e || window.event;

      if (e.keyCode == '38') {
        // up arrow
        myGamePiece.speedY = -speed;
      } else if (e.keyCode == '40') {
        // down arrow
        myGamePiece.speedY = speed;
      } else if (e.keyCode == '37') {
        // left arrow
        myGamePiece.speedX = -speed;
      } else if (e.keyCode == '39') {
        // right arrow
        myGamePiece.speedX = speed;
      }

    }

    document.onkeyup = clearmove;

    function clearmove() {
      myGamePiece.speedX = 0;
      myGamePiece.speedY = 0;
    }

  </script>

</body>

Answer 1

我看到您已經完成了一部分。 您只需要在if語句中添加崩潰代碼即可向右移動播放器。 僅當玩家按下向右箭頭時，這將運行代碼。

else if (e.keyCode == '39') { // right arrow // add crash code here myGamePiece.speedX = speed; }

Answer 2

您的游戲循環僅在沒有崩潰時執行：

function updateGameArea() {
  if (myGamePiece.crashWith(myObstacle)) {
    console.log("crash");
  } else {
    myGameArea.clear();
    myObstacle.update();
    myGamePiece.x += myGamePiece.speedX;
    myGamePiece.y += myGamePiece.speedY;
    myGamePiece.update();
  }
}

您要做的就是在檢測到沖突時將myGamePiece.speedX和myGamePiece.speedX設置為0 。 就像是：

function updateGameArea() {
  myGameArea.clear();
  myObstacle.update();
  if (myGamePiece.crashWith(myObstacle)) {
    myGamePiece.speedX = 0;
    myGamePiece.speedY = 0;
  }
  myGamePiece.x += myGamePiece.speedX;
  myGamePiece.y += myGamePiece.speedY;
  myGamePiece.update();
}

編輯：您可能想在檢測到碰撞時將一些代碼應用於“備份”，因此零件不再處於碰撞狀態

Javascript游戲，撞牆時的碰撞檢測

問題描述

2 個解決方案

解決方案1
0 2019-01-11 02:17:48

解決方案2
0 2019-01-11 02:17:58

Javascript游戲，撞牆時的碰撞檢測

問題描述

2 個解決方案

解決方案1 0 2019-01-11 02:17:48

解決方案2 0 2019-01-11 02:17:58

解決方案1
0 2019-01-11 02:17:48

解決方案2
0 2019-01-11 02:17:58