JavaScript Spiel - Objekt, das nicht gekreuzt werden kann

Question

Ich habe ein Projekt zu tun, da ich JavaScript lerne. Dies ist ein einfaches Spiel. Sie müssen vom unteren zum oberen Rand des Canvas gehen. Ich möchte einen Stein auf die Leinwand legen, was nicht überkreuzt werden kann und der Spieler muss darum herumgehen. Können Sie mir helfen, dieses Problem zu lösen?

Dies ist, wie ich der Spieler die Kontrolle

Player.prototype.handleInput = function() { 
    var self = this; 
    console.log(self); 
    document.addEventListener('keyup', function (event) { 
     var keyName = event.which || event.keyCode; 

     switch (keyName) { 
      case true: 
       return self.x = 0, self.y = 0; 


      case 37: 
      case 65: 
      case 100: 
       return self.x -= 20; 

      case 38: 
      case 87: 
      case 104: 
       return self.y -= 20; 

      case 39: 
      case 68: 
      case 102: 
       return self.x += 20; 

      case 40: 
      case 83: 
      case 101: 
       return self.y += 20; 
     } 
    }) 

} 

den Felsen Konstruktor Dies ist

Rock = function(){ 
    this.x = getRandomInt(50, 700); 
    this.y = getRandomInt(50, 400); 
    this.width = 101; 
    this.height = 171; 
} 

ich auch eine Kollisionserkennung haben, was von der Website MDN ist

function objectCollision(obj1, obj2) { 
    var rect1 = obj1; 
    var rect2 = obj2; 
    if (rect1.x < rect2.x + rect2.width && 
     rect1.x + rect1.width > rect2.x && 
     rect1.y < rect2.y + rect2.height && 
     rect1.height + rect1.y > rect2.y) { 
     return true; 
    } 
    return false; 
} 

Ich habe versucht, verschiedene Wege zu lösen, aber ich kann es nicht herausfinden. Ich brauche eine Lösung, wenn der Spieler von allen Seiten auf den Stein schlägt, als dass er sich auf diese Weise nicht weiterbewegen kann.

Danke

Answer 1

In Ihrem keyup Event-Handler, versuchen Sie so etwas wie die folgenden, um den bestehenden Schalter:

var old_x = self.x; 
    var old_y = self.y; 
    switch (keyName) { 
     ... 
    } 
    for (var i in obstacles) { 
     if (obstacles[i] != self && objectCollision(self, obstacles[i])) { 
      self.x = old_x; 
      self.y = old_y; 
      break; 
     } 
    } 

Ich nehme an, Sie werden eine Reihe von Hindernissen haben, anstatt nur eine einzige Rock.