Walkable areas in html5 canvas game - html

Question

what type of method would i use to make my character walkable on only certain areas? I don't really need the code just the most efficient way on how I should do it, thanks.

Answer 1

1: You can to crete a matrix with 0s and 1s. Your character can move in 1 and don't in 0. this is very suitable to top view games. 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) && (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,0,500,500);
}
_print = function(){
clearMap();
printMap(matrix);
printCharacter( character);
window.requestAnimationFrame(function(){
_print();
});
}
2: You can make a verification of color pixels, with data Imagem. Your character don't can move in a predefined color. (https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/getImageData)
3: You can use psychic framework like box2d. (http://box2d-js.sourceforge.net/)