Обнаружение столкновения на холсте border

Question

Я делаю небольшую игру с друзьями, но я пытаюсь обнаружить столкновение при столкновении в стенах холста, и я заработал, но когда я ударился о стену, мой caracter застрял .. и я не знаю, как найти способ заставить его двигаться снова. Как вы думаете, кто-нибудь из вас, ребята, мог бы помочь мне с этим. Спасибо за помощь!

Javascript/JQuery:

function Player() { 
    this.w = 50; 
    this.h = 60; 
    this.x = (cW/2) - (this.w/2); 
    this.y = (cH/2) - (this.h/2); 
    this.name = username.value; 
    this.nw = ctx.measureText(this.name).width; // username.clientWidth + 1; 
    this.src = playerImage; 
    this.dx = 0; 
    this.dy = 0; 
    this.render = function() { 
     ctx.drawImage(this.src, this.x, this.y, this.w, this.h); 
     ctx.fillStyle = 'orange'; 
     ctx.font = '15px Arial, sans-serif'; 
     // fixa x-värdet 
     ctx.fillText(this.name, (this.x + this.w/2) - (this.nw/2), (this.y - 6)); 
    } 
} 

var player = new Player(); 

function animate() { 
    if(player.x > 0 && player.y > 0 && player.x + player.w < cW && player.y + player.h < cH) { 
     player.x += spd * player.dx; 
     player.y += spd * player.dy; 
    } 
    else { 
     // Need code here to release player from wall 
    } 

    ctx.save(); 
    ctx.clearRect(0, 0, cW, cH); 
    ctx.drawImage(bg, 0, 0); 
    player.render(); 
    ctx.rotate(-.4); 
    raining(); 
    ctx.restore(); 
} 
var animateInterval = setInterval(animate, 1000/60); 

document.addEventListener('keydown', function(e) { 
    var key_press = String.fromCharCode(e.keyCode); 

    switch(key_press) { 
     case 'W': 
      player.dy = -1; 
      break; 

     case 'A': 
      player.dx = -1; 
      break; 

     case 'S': 
      player.dy = 1; 
      break; 

     case 'D': 
      player.dx = 1; 
      break; 

     default: 
      break; 
    } 
}); 

document.addEventListener('keyup', function(e) { 
    var key_press = String.fromCharCode(e.keyCode); 

    switch(key_press) { 
     case 'W': 
      player.dy = 0; 
      break; 

     case 'A': 
      player.dx = 0; 
      break; 

     case 'S': 
      player.dy = 0; 
      break; 

     case 'D': 
      player.dx = 0; 
      break; 

     default: 
      break; 
    } 
}); 

Answer 1

Проблема у Вас есть следующий:

Предположим, что ваш персонаж движется со скоростью 10 пикселей на кадр, позиция символа в настоящее время 595px (правая сторона символа), а ширина холста равна 600.

В текущем фрейме вы проверяете, есть ли столкновение: нет никого, поэтому вы добавляете скорость в текущую позицию и получаете 605 пикселей. Теперь на следующем кадре персонаж выходит за рамки, и вы не можете больше двигаться его, потому что player.x + player.width> canvas.width

Что вы можете сделать:

1: Вы проверить столкновения и переместить символ обратно внутри видового экрана:

if (player.x + player.width > canvas.width) { 
    player.x = canvas.width - player.width; 
} 

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

Вы должны сделать эту проверку для всех сторон, но логика отличается для каждой стороны, это пример кода для столкновения с левой стеной:

if (player.x < 0) { 
    player.x = 0; 
} 

2: В вашем случае заявление следует добавить скорость в ваших расчетах и ​​не перемещать символ, если player.x + player.vx превосходит canvas.width, но я предпочитаю первый метод, так как вы действительно можете находиться сбоку от окна просмотра.

Совет с работой с холстом позиции: всегда округлите ваши позиции на уровне рендера:

this.render = function() { 
    ctx.drawImage(this.src, Math.round(this.x), Math.round(this.y), this.w, this.h); 
    ... 
}