Javascript 在html画布中渲染实体对象？

我正在制作一个html5画布游戏，我需要渲染一些实体对象。这是一种沙盒游戏，所以我打算这样做：

找出玩家正在触摸的方块

检查周围的正方形是否为实心

如果是这样，不要让球员通过那一点

当gameloop函数不起作用时重复此操作

如果你不明白我的意思，我很抱歉，但是地面是由正方形组成的，这些正方形与玩家的击盒大小相同（这意味着击盒不能进入实心物体内部）。希望这能帮助您理解。
以下是我需要的：
我不知道如何检测玩家所在方格周围的所有方格。到目前为止，我的功能如下：

function rendersolid() {
  var x = player.x;
  var y = player.y;

  var pass = {
  top: true;
  left: true;
  bottom: true;
  right: true;
};
  if (map[x][y] == !undefined) {
  console.log(map[x][y]);
  }
  //check surrounding blocks (and if they're #)
  //change 'pass' variables to false if you CAN'T pass, else true

  //do not let the player pass that point
  //FYI, Math.floor(y - 1) is one square above the player, as the same with x is one left of the player
  if (pass.top == false && player.y < Math.floor(y - 1)) {
  player.y = Math.floor(y);
} else if (pass.left == false && player.x > Math.floor(x + 1)) {
  player.x = Math.floor(x);
} else if (pass.bottom == false && player.y > Math.floor(y + 1)) {
  player.y = Math.floor(y);
} else if (pass.right == false && player.x < Math.floor(x - 1)) {
  player.x = Math.floor(x);
}
}

这是彩色地图：

var colorMap = {
'.': "#47CB00", //For grass
'#': "#000000", //Black, solid
'+': "#878787", //Grey
'\'': "#349500", //Darker green, for grass texture (ignore the '\')
'0': "#FFFFFF"  //white
};

看一看（跑步/玩耍）并提出问题。注意：我添加了一面墙只是为了测试

var映射=
`##................................................
##........'........................'..............
..'.''.#..'.....'..........'.''....'.....'........
....'..#'....................'...'................
..'..'.#...................'..'...................
...''.......................''....................
..'....'...'.....'.........'....'...'.....'.......
.......'...........'............'...........'.....
.......'......'.................'......'..........
....'........................'....................
...'..'...'.................'..'...'..............
.......'......'....'............'......'....'.....
............'....'...'...............'....'...'...
...'....'..'...'............'....'..'...'.........
...'.....'......'...........'.....'......'........
..............'.'.....'................'.'.....'..
......'.....'...'..............'.....'...'........
.......'.......'.......'........'.......'.......'.
....'......'.......'......'..'....................
..........'.'''''.'''..............'.'...'..'.....
...'.....'....'...'.........'...'......'..........
.....'....'...'...'''.........'....'.........'....
.....'.....'..'.....'.........'.....'........'....
...'......'...'...'''.......'......'...'...'......
........'...............'......'....'.............
.......'.....''...........'.......'.........'.....
..........'.......'................'..............
..'.''....'.....'..........'.''....'.....'........
....'...'.......'...''.......'...'................
..'..'....'.......'....'...'..'...................
...''.......................''....................
..'....'...'.....'.........'....'...'.....'.......
.......'...........'............'...........'.....
.......'......'.................'......'..........
....'........................'....................
..........'.'...'.'................'.'.'...'.'....
...'.....'....'.............'.....'...'....'......
.....'....'.........'.........'....'........'.....
.....'.....'..'.....'.........'.....'.............
...'......'...'...'.........'......'...'...'.'....
...'..'...'.................'..'...'..............
.......'......'....'............'......'....'.....
............'....'...'...............'....'...'...
...'....'..'...'............'....'..'...'.........
...'.....'......'...........'.....'......'........
..............'.'.....'................'.'.....'..
......'.....'...'..............'.....'...'........
.......'.......'.......'........'.......'.......'.
....'......'.......'.........'......'.......'.....
拆分（“\n”）；
var colorMap={
“.”：“#47CB00”//表示草
“#”：“#000000”//黑色，实心
“+”：“#878787”//灰色
“\”：“\”349500“，//深绿色，表示草纹理（忽略“\”）
“0”：“FFFFFF”，//白色，
“@”：“红色”//播放器
};
设mapWidth=map[0]。长度；
设mapHeight=map.length；
常数=12；
const c=document.getElementById（“画布”）；
const ctx=c.getContext（“2d”）；
康斯特玩家={
x:0,，
y:0
};
常数鼠标={
x:0,，
y:0
};
const initCanvas=（）=>{
c、 宽度=贴图宽度*平铺；
c、 高度=贴图高度*平铺；
}
常量drawTile=（x，y，type）=>{
ctx.beginPath（）；
ctx.rect（x*瓷砖，y*瓷砖，瓷砖，瓷砖）；
ctx.fillStyle=colorMap[type]；
ctx.fill（）；
}
常量drawMapTile=（x，y）=>{
drawTile（x，y，map[y][x]）；
}
const drawMap=（）=>{
对于（设y=0；y{
player.x=4；
player.y=4；
}
常量drawPlayer=（）=>{
drawTile（player.x，player.y，“@”）
}
常量拖动鼠标=（）=>{
ctx.beginPath（）；
ctx.lineWidth=1；
ctx.moveTo（mouse.x*TILE+1，mouse.y*TILE+1）；
ctx.lineTo（mouse.x*TILE+1，mouse.y*TILE+TILE-1）；
ctx.lineTo（mouse.x*TILE+TILE-1，mouse.y*TILE+TILE-1）；
ctx.lineTo（mouse.x*TILE+TILE-1，mouse.y*TILE+1）；
ctx.lineTo（mouse.x*TILE+1，mouse.y*TILE+1）；
ctx.stroke（）；
}
常量showMouseCursor=（newX，newY）=>{
drawMapTile（mouse.x，mouse.y）；
if（mouse.x==player.x&&mouse.y==player.y）drawPlayer（）；
mouse.x=newX；
mouse.y=newY；
拖拉鼠标（）；
}
常量getMousePos=（e）=>{
var rect=e.target.getBoundingClientRect（）；
var x=e.clientX-rect.left；
var y=e.clientY-rect.top；
设mouseX=x/瓦| 0；
设mouseY=y/TILE | 0；
返回{
x:鼠标，
y:老鼠
};
}
常量传送机播放程序=（x，y）=>{
如果（映射[y][x]！='#'&&x>=0&&y>=0&&x{
const mouse=getMousePos（e）；
showMouseCursor（mouse.x，mouse.y）；
e、 预防默认值（）；
}
c、 onclick=（e）=>{
const mouse=getMousePos（e）；
constdx=Math.abs（mouse.x-player.x）；
constdy=Math.abs（mouse.y-player.y）；
如果（dx+dy==1）{
传送播放器（mouse.x，mouse.y）；
}
}
initCanvas（）；
drawMap（）；
initPlayer（）；
drawPlayer（）
我只能给你一张ASCII地图的投票票=）什么
var colorMap = {
'.': "#47CB00", //For grass
'#': "#000000", //Black, solid
'+': "#878787", //Grey
'\'': "#349500", //Darker green, for grass texture (ignore the '\')
'0': "#FFFFFF"  //white
};