Блог

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

1: Вы можете создать матрицу с 0 и 1. Ваш персонаж может перемещаться за 1, а не за 0. это очень подходит для игр с видом сверху. Codepen

 window.onload = function(){
canvas =      document.getElementById("canvas");
ctx = canvas.getContext("2d");
                                                                                
matrix =     [[0, 0, 0, 0, 0] , [1, 0, 0, 1, 1] ,  [1, 1, 1, 1, 1] ,  [1, 0, 1, 1, 1] ,  [1, 0, 1, 1, 1] ];
character = {x: 0, y : 1}
window.requestAnimationFrame(function(){_print()});

window.addEventListener('keypress', function(e){
console.log(e.key, character)
if( e.key == 'd'){
if((character.x < 4) amp;amp; (matrix[character.y][character.x 1]==1))
character.x  ;

}else if(e.key == 'w'){
if((character.y>0) amp;amp; (matrix[character.y-1][character.x]==1))
character.y--;

}else if(e.key == 'a'){
if( (character.x > 0) amp;amp; (matrix[character.y][character.x-1]==1))
character.x--;

}else if( e.key == 's'){
if( (character.y < 4) amp;amp; (matrix[character.y 1][character.x]==1))
character.y  ;
}
});


};

printMap = function(matrix){
for(let i =0; i < matrix.length; i  ){
for(let j =0; j < matrix[i].length; j  ){

if(matrix[i][j]===0){
ctx.fillStyle = "#F00";
}else{
ctx.fillStyle = "#FF0";
}
ctx.beginPath();  
ctx.rect( j * 100, i * 100, 100, 100);
ctx.fill();
}
}

}

printCharacter = function(character){

ctx.fillStyle = "#000";
ctx.beginPath();  
ctx.rect( character.x * 100   10, character.y * 100   10, 80, 80);
ctx.fill();
}

clearMap = function(){
ctx.clearRect(0,0,500,500);
}


_print = function(){

clearMap();
printMap(matrix);
printCharacter( character);  
window.requestAnimationFrame(function(){
_print();
});

}
 

2. Вы можете выполнить проверку цветных пикселей с помощью data Imagem. Ваш персонаж не может перемещаться в предопределенном цвете. (https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/getImageData )

3. Вы можете использовать psychio framework, такой как box2d. (http://box2d-js.sourceforge.net /)