html5 画布游戏中的可步行区域

如何解决html5 画布游戏中的可步行区域

我会使用什么类型的方法让我的角色只能在某些区域行走？我真的不需要代码，只是我应该如何做的最有效方式，谢谢。

解决方法

1：你可以用 0 和 1 来构造一个矩阵。你的角色可以进入1，不能进入0。这非常适合顶视图游戏。 Codepen

window.onload = function(){
canvas =      document.getElementById("canvas");
ctx = canvas.getContext("2d");
                                                                                
matrix =     [[0,0],[1,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) && (matrix[character.y][character.x+1]==1))
character.x++;

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

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

}else if( e.key == 's'){
if( (character.y < 4) && (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,500,500);
}


_print = function(){

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

}

2：可以对彩色像素进行校验，数据Imagem。您的角色不能以预定义的颜色移动。 (https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/getImageData)

3：你可以使用像box2d这样的通灵框架。 (http://box2d-js.sourceforge.net/)