Javascript 瓦基游戏的色彩系统

我已经开始了一个项目来自学瓦基游戏引擎背后的机制。到目前为止，我有一个相当好的小演示工作，但我不知道如何实现每个瓷砖的颜色。我希望任何瓷砖都是任何颜色，但这对我来说很复杂

整个游戏对屏幕上的每个对象/组件使用2d数组。有一个中央2d阵列，用于存储所有墙和地砖以及任何不是单独移动对象的对象。 我的想法是拥有一个存储颜色值的并行数组。然后迭代并相应地更改每个瓷砖的颜色

在我的代码中，我绘制实际图形的基本部分位于一个名为font的类中

类字体{
构造函数（src、tilesizeX、tilesizeY）{
this.fontImage=新图像（）；
this.imageBuffer=新图像（）；
//this.fontImage.setAttribute（'crossOrigin'，''）
this.fontImage.src=src；
this.colors=[“00F”、“09f”、“fff”、“999”]
//this.fontImage.onload=this.drawChar（）；
}
drawChar（字符编码、posX、posY、颜色）{
var charmap=[
[''，'a'，'b'，'c'，'d'，'e'，'f'，'g'，'h'，'i'，'j'，'k'，'l'，'m'，'n'，'o'，'p'，'q'，'r'，'s'，'t'，'u'，'v'，'w'，'x'，'y'，'z'，'☺', '☻','♡','♦','♣','♤', '•', '◘', '○', '◙','♂','♀','♪','♫','☼','►','◄','↕','‼','¶','§','▬','↨','↑','↓','→','←','∟','↔','▲','▼',
'░','▒','▓','│','┤','╡','╢','╖','╕','╣','║','╗','╝','╜','╛','┐',
'└','┴','┬','├','─','┼','╞','╟','╚','╔','╩','╦','╠','═','╬','╧',
'╨','╤','╥','╙','╘','╒','╓','╫','╪','┘','┌','█','▄','▌','▐','▀',
“空格”、“！”、“”、“#”、“$”、“%”、“&”、“”、“（”、“）、“*”、“+”、“、”、“-”、“/”，
'0','1','2','3','4','5','6','7','8','9',':',';','','?',
“@”，“A”，“B”，“C”，“D”，“E”，“F”，“G”，“H”，“I”，“J”，“K”，“L”，“M”，“N”，“O”，
‘P’、‘Q’、‘R’、‘S’、‘T’、‘U’、‘V’、‘W’、‘X’、‘Y’、‘Z’、‘[’、‘R’、‘S’、‘T’、‘U’、‘V’、‘W’、‘X’、‘Y’、‘Z’、‘S’、‘S’、‘S’、‘T’、‘U’、‘V’、‘W’、‘W’、‘，
],
[
[0,0],[6, 1], [6, 2], [6, 3], [6, 4], [6, 5], [6, 6], [6, 7], [6, 8], [6, 9], [6, 10], [6, 11], [6, 12],[6, 13],[6, 14], [6, 15],[7,0],
[7, 1],[7, 2], [7, 3], [7, 4], [7, 5], [7, 6], [7, 7], [7, 8],[7, 9],[7, 10],
[0, 1], [0, 2],[0,3], [0,4],[0,5],[0,6],[0,7],[0,8],[0,9],[0,10],[0,11],[0,12],[0,13],[0,14],[0,15],
[1,0],[1,1], [1, 2], [1, 3], [1, 4], [1, 5], [1, 6], [1, 7], [1, 8], [1, 9], [1, 10], [1, 11], [1, 12], [1, 13], [1, 14], [1, 15],
[11,0],[11,1],[11,2],[11,3],[11,4], [11, 5], [11, 6], [11, 7], [11, 8], [11, 9], [11, 10], [11, 11], [11, 12], [11, 13], [11, 14], [11, 15],
[12,0],[12,1],[12,2],[12,3],[12,4], [12, 5], [12, 6], [12, 7], [12, 8], [12, 9], [12, 10], [12, 11], [12, 12], [12, 13], [12, 14], [12, 15],
[13,0],[13,1],[13,2],[13,3],[13,4], [13, 5], [13, 6], [13, 7], [13, 8], [13, 9], [13, 10], [13, 11], [13, 12], [13, 13], [13, 14], [13, 15],
[2,0],[2,1], [2, 2], [2, 3], [2, 4], [2, 5], [2, 6], [2, 7], [2, 8], [2, 9], [2, 10], [2, 11], [2, 12], [2, 13], [2, 14], [2, 15],
[3,0],[3,1], [3, 2], [3, 3], [3, 4], [3, 5], [3, 6], [3, 7], [3, 8], [3, 9], [3, 10], [3, 11], [3, 12], [3, 13], [3, 14], [3, 15],
[4,0],[4,1], [4, 2], [4, 3], [4, 4], [4, 5], [4, 6], [4, 7], [4, 8], [4, 9], [4, 10], [4, 11], [4, 12], [4, 13], [4, 14], [4, 15],
[5,0],[5,1], [5, 2], [5, 3], [5, 4], [5, 5], [5, 6], [5, 7], [5, 8], [5, 9], [5, 10], [5, 11], [5, 12], [5, 13], [5, 14], [5, 15],
]
]
var scopeX=charmap[1][charmap[0].indexOf（charCode）][1]*8；
var scopeY=charmap[1][charmap[0].indexOf（charCode）][0]*16
game.ctx.drawImage（this.fontImage，scopeX，scopeY，7,15，posX，posY，16,32）；
}
}

如果我在

drawChar（）函数的末尾使用此代码

game.ctx.drawImage（this.fontImage，scopeX，scopeY，7,15，posX，posY，16,32）；
game.ctx.globalCompositeOperation=“源代码输出”
game.ctx.fillStyle=this.colors[getRandomInt（0,3）]；
game.ctx.fillRect（0,0,16,32）；
game.ctx.globalCompositeOperation=“来源结束”

第一个磁贴按需要上色，但没有其他磁贴显示。我对所有复杂的游戏开发还不熟悉，不知道如何添加颜色。我使用2d阵列，如下所示：

 var map = [
  [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],
  [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],
  [1,0,0,2,0,0,0,3,0,0,0,0,0,4,0,0,0,2,0,1],
  [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],
  [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],
  [1,0,0,3,0,0,0,4,0,0,0,0,0,0,0,0,0,0,0,1],
  [1,0,0,0,0,0,0,0,0,0,0,0,0,3,0,0,0,0,0,1],
  [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,2,0,1],
  [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],
  [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],

]

然后我循环遍历贴图中的所有值，并根据值设置填充样式

for (y = 0; y < map.length; y++) {
        for (x = 0; x < map[y].length; x++) {

            ctx.fillStyle = ["green", "red", "yellow", "blue"][map[y][x]];
            ctx.fillRect(x * tilesize, y * tilesize, tilesize, tilesize);

        }
    }

有关这些参数的详细信息，请查阅ctx.fillImage（）

那么最后的程序会是这样的



const canvas=document.getElementById（'c'）；
const ctx=canvas.getContext（'2d'）；
变量tilesize=10
变量映射=[
[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],
[1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],
[1,0,0,2,0,0,0,3,0,0,0,0,0,4,0,0,0,2,0,1],
[1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],
[1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],
[1,0,0,3,0,0,0,4,0,0,0,0,0,0,0,0,0,0,0,1],
[1,0,0,0,0,0,0,0,0,0,0,0,0,3,0,0,0,0,0,1],
[1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,2,0,1],
[1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],
[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],
]
函数drawmap（）{
对于（y=0；y
您没有对这里的ImageData执行任何操作，那么您只需删除该代码如何？好吧，我是从一个图像中渲染的，每次渲染一个平铺时，我只是从中央精灵表中提取一块。精灵表只是一个旧的IBM字体，因为我正在制作一个ASCII游戏。我想给每个图像上色。使用
switch(map[x][y]){
case 1:
img = stone;
break;
case 2:
img = grass;
break;
 } 
ctx.fillImage(img,0,0,300,300,x*tilesize,y*tilesize,tilesize,tilesize);