Udoskonalenie kolizji

Question

Witam.

Napisałem sobie kolizje w grze typu topdown (grę widzimy z góry) w canvasie i jak najbardziej działają, ale ściany wydają się lepkie (jeśli tak to można ująć).

Mianowicie, gdy wciskamy klawisze góra i prawo, a po prawej jest ściana, to nie ruszamy się ani w prawo ani w górę.

tu wstawię kod:

	  for(x=0; x<12; x++){
		for(y=0; y<15; y++){
			if(mapTiles[x][y]==0){
				
				var rect1 = {x: this.x+this.xVel-(this.sideLenght/2), y: this.y+this.yVel-(this.sideLenght/2), width: this.sideLenght, height: this.sideLenght}
				var rect2 = {x: y*60, y: x*60, width: 60, height: 60}

				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) {
					           
					this.yVel = 0;
					this.xVel = 0;
					
				}
				
			}
		}
	  }

Kod w skrócie, jeśli jest kolizja to się nie ruszaj ani w górę ani w prawo, ani w dół, ani w lewo.

Jak zrobić to tak, aby w sytuacji opisanej w 3 linijce poruszać się w górę?

Comments

Nie bardzo rozumiem kod ale z fragmentu "Kod w skrocie" Wynika ze jezeli bedzie kolizja to nie mozesz sie ruszyc. Stad zgadywalbym efekt lepkiej sciany

---

var mapTiles = [[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,],         //1 = trawa, 0 = ściana
				[1, 1, 1, 1, 1, 1, 0, 1, 0, 1, 1, 1, 1, 1, 1,],
				[1, 1, 1, 1, 1, 1, 0, 1, 0, 1, 1, 1, 1, 1, 1,],
				[1, 1, 1, 1, 1, 1, 0, 1, 0, 1, 1, 1, 1, 1, 1,],
				[1, 1, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 1, 1,],
				[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,],
				[1, 1, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 1, 1,],
				[1, 1, 1, 1, 1, 1, 0, 1, 0, 1, 1, 1, 1, 1, 1,],
				[1, 1, 1, 1, 1, 1, 0, 1, 0, 1, 1, 1, 1, 1, 1,],
				[1, 1, 1, 1, 1, 1, 0, 1, 0, 1, 1, 1, 1, 1, 1,],
				[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,],
				[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,],
				];
.
.
.
.
.

class Player {
  constructor(x, y) {
    this.x = x;
    this.y = y;
	this.speed = 1;
	this.xVel = 0;
	this.yVel = 0;
	this.rotate = 0;
	this.radius = 20;
	this.sideLenght = 50;
	
	this.img = document.getElementById("player");
  }
.
.
.
update() {
for(x=0; x<12; x++){
		for(y=0; y<15; y++){
			if(mapTiles[x][y]==0){
				
				var rect1 = {x: this.x+this.xVel-(this.sideLenght/2), y: this.y+this.yVel-(this.sideLenght/2), width: this.sideLenght, height: this.sideLenght}
				var rect2 = {x: y*60, y: x*60, width: 60, height: 60}

				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) {
					
					this.yVel = 0;
					this.xVel = 0;
					
				}
				
			}
		}
	  }
}
}

---

Wybacz ale nic mi to nie mowi

Answer 1

Dobrze, znalazłem już odpowiedź, może to nikomu nic nie powie ale zgodnie z regulaminem:

3. Najlepsze​​odpowiedzi,​​głosowanie,​​zgłoszenia,​​ukrywanie

[...]

3.1.1. W razie znalezienia odpowiedzi w sposób inny niż poprzez pytanie zadane na forum, Pasjonat ma obowiązek podania źródła, z którego uzyskał odpowiedź lub wytłumaczenie, jak do niej doszedł.

 Muszę podać rozwiązanie.

Więc zamiast kodu:

for(x=0; x<12; x++){
  for(y=0; y<15; y++){
      if(mapTiles[x][y]==0){
           
          var rect1 = {x: this.x+this.xVel-(this.sideLenght/2), y: this.y+this.yVel-(this.sideLenght/2), width: this.sideLenght, height: this.sideLenght}
          var rect2 = {x: y*60, y: x*60, width: 60, height: 60}
 
          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) {
                          
              this.yVel = 0;
              this.xVel = 0;
               
          }
           
      }
  }
}

Napisałem:

	  for(x=0; x<mapSizeY; x++){
		for(y=0; y<mapSizeX; y++){
			if(mapTiles[x][y]==0){
				
				var rect1 = {x: this.x+this.xVel-(this.sideLenght/2), y: this.y-(this.sideLenght/2), width: this.sideLenght, height: this.sideLenght}
				var rect2 = {x: y*60, y: x*60, width: 60, height: 60}

				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) {
					
					this.xVel = 0;
					
				}
				var rect1 = {x: this.x-(this.sideLenght/2), y: this.y+this.yVel-(this.sideLenght/2), width: this.sideLenght, height: this.sideLenght}
				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) {
					
					this.yVel = 0;
					
				}
				
			}
		}
	  }

Zamiast sprawdzać kolizji ogólnie sprawdziłem ją w osi x i y oddzielnie.

Wątek zamykam.