JavaScript/Canvas Приятствие

#javascript #canvas

подскажите, как сделать чтобы черный квадрат не смог проходить сквозь зеленый квадрат.



var canvas = document.getElementById("d1");
var ctx = canvas.getContext("2d");

var pressedRight = false;
var pressedLeft = false;
var pressedUp = false;
var pressedDown = false;

document.addEventListener("keydown", keyDown, false);
document.addEventListener("keyup", keyUp, false);

function keyDown(e) {
  if(e.keyCode == 37) {
    pressedRight = true;
  } else if(e.keyCode == 38) {
    pressedUp = true;
  }else if(e.keyCode == 39) {
    pressedLeft = true;
  }else if(e.keyCode == 40) {
    pressedDown = true;
  }
}

function keyUp(e) {
  if(e.keyCode == 37) {
    pressedRight = false;
  } else if(e.keyCode == 38) {
    pressedUp = false;
  }else if(e.keyCode == 39) {
    pressedLeft = false;
  }else if(e.keyCode == 40) {
    pressedDown = false;
  }
}

var player = {
  x: 10,
  y: 10,
  pW: 50,
  pH: 50,
  draw: function() {
    ctx.beginPath();
    ctx.rect(this.x, this.y, this.pW, this.pH);
    ctx.fillStyle = "black";
    ctx.fill();
    ctx.closePath();
  }
}

var block = {
  x: 200,
  y: 100,
  pW: 50,
  pH: 50,
  draw: function() {
    ctx.beginPath();
    ctx.rect(this.x, this.y, this.pW, this.pH);
    ctx.fillStyle = "green";
    ctx.fill();
    ctx.closePath();
  }
}

function draw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  player.draw();
  block.draw();
  
  if(pressedRight && 0 < player.x) {
    player.x -= 3;
  }
  if(pressedLeft && player.x < canvas.height - player.pW) {
    player.x += 3;
  }
  if(pressedUp && 0 < player.y) {
    player.y -= 3;
  }
  if(pressedDown && player.y < canvas.height - player.pH) {
    player.y += 3;
  }

}

setInterval(draw, 10);
#d1 {
  border: 1px solid black;
}




    

Ответы

Ответ 1

var canvas = document.getElementById("d1");
var ctx = canvas.getContext("2d");

var pressedRight = false;
var pressedLeft = false;
var pressedUp = false;
var pressedDown = false;

document.addEventListener("keydown", keyDown, false);
document.addEventListener("keyup", keyUp, false);

function keyDown(e) {
  if(e.keyCode == 37) {
pressedRight = true;
  } else if(e.keyCode == 38) {
pressedUp = true;
  }else if(e.keyCode == 39) {
pressedLeft = true;
  }else if(e.keyCode == 40) {
pressedDown = true;
  }
}

function keyUp(e) {
  if(e.keyCode == 37) {
pressedRight = false;
  } else if(e.keyCode == 38) {
pressedUp = false;
  }else if(e.keyCode == 39) {
pressedLeft = false;
  }else if(e.keyCode == 40) {
pressedDown = false;
  }
}

var player = {
  x: 10,
  y: 10,
  pW: 50,
  pH: 50,
  draw: function() {
ctx.beginPath();
ctx.rect(this.x, this.y, this.pW, this.pH);
ctx.fillStyle = "black";
ctx.fill();
ctx.closePath();
  }
}

var block = {
  x: 200,
  y: 100,
  pW: 50,
  pH: 50,
  draw: function() {
ctx.beginPath();
ctx.rect(this.x, this.y, this.pW, this.pH);
ctx.fillStyle = "green";
ctx.fill();
ctx.closePath();
  }
}

function draw() {
  if(pressedRight && 0 < player.x) {
player.x -= 3;
//добавлена проверка на принадлежность углов Игрока к текущему контексту, 
//которым, в данном коде, является блок. Углы выбираются в зависимости от направления
движения
if(checkCrash(player.x, player.y) || checkCrash(player.x, player.y+player.pH) ){
	gameOver();
	return;
}
  }
  if(pressedLeft && player.x < canvas.height - player.pW) {
player.x += 3;
if(checkCrash(player.x+player.pW, player.y) || checkCrash(player.x+player.pW, player.y+player.pH) ){
	gameOver();
	return;
}
  }

  if(pressedUp && 0 < player.y) {
player.y -= 3;
if(checkCrash(player.x, player.y) || checkCrash(player.x+player.pW, player.y) ){
	gameOver();
	return;
}

  }

  if(pressedDown && player.y < canvas.height - player.pH) {
player.y += 3;
if(checkCrash(player.x, player.y+player.pH) || checkCrash(player.x+player.pW, player.y+player.pH) ){
	gameOver();
	return;
}
  }
  
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  player.draw();
  block.draw();

}

var timerId = setInterval(draw, 10);

//используется нативный метод isPointInPath, который проверяет принадлежность 
// точки к текущему контексту. Текущим контекстом у Вас является блок, т.к. он отрисовывается
последним.
function checkCrash(x,y){
return ctx.isPointInPath(x,y);
}

function gameOver(){
console.log("Вы проиграли");
document.removeEventListener("keydown", keyDown, false);
document.removeEventListener("keyup", keyUp, false);
clearInterval(timerId);
}
#d1 {
  border: 1px solid black;
}