подскажите, как сделать чтобы черный квадрат не смог проходить сквозь зеленый квадрат.
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>