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

188
21 июля 2018, 15:40

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

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; 
}
<canvas id="d1" width="500" height="500"></canvs>

Answer 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; 
}
<canvas id="d1" width="500" height="500"></canvs>

READ ALSO
Разные значения высоты в .outerHeight()

Разные значения высоты в .outerHeight()

Написал скрипт для постройки блоков в виде кирпичной кладкиНо когда не указываю явную высоту блока, то скрипт неверно считает высоту и соответственно...

183