Javascript 在开源pacman中更改精灵

我试图在一个在线

HTML5

Canvas Pacman游戏中改变精灵

目前，我已尝试更改原始图像： （原件） spritesheet.png（已编辑）

但这似乎不起作用

我在代码中发现了一些东西，看起来像是在画精灵，但我不知道该怎么做

这是一个开源版本，可以找到：

---

仍然使用原始源，新图像除外。

您可以使用

上下文的剪裁形式从精灵表中剪切任何精灵。drawImage

：

context.drawImage(
    // from the spritesheet
    spritesheet,
    // go to x,y on the spritesheet and cut out a width x height sized subimage
    spriteX, spriteY, spriteWidth, spriteHeight,   
    // and draw that subimage on the canvas at canvasX, canvasY
    canvasX, canvasY, spriteWidth, spriteHeight
);

示例代码和演示：

var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
var cw=画布宽度；
var ch=画布高度；
//在精灵表上定义几个精灵的位置
var pacOpenRight={x:20，y:20，宽度：20，高度：20}；
var-ghostRed={x:40，y:80，宽：20，高：20}；
var spritesheet=新图像（）；
spritesheet.onload=开始；
spritesheet.src=”https://dl.dropboxusercontent.com/u/139992952/stackoverflow/PacmanSpritesheet.png";
函数start（）{
ctx.fillRect（0,0，cw，ch）；
drawSprite（pacOpenRight，50,50）；
drawSprite（Ghosted，70,50）；
}
函数drawSprite（spriteDef、canvasX、canvasY）{
ctx.drawImage(
//从精灵表
雪碧片，
//转到精灵表上的x，y，然后
//剪切一个宽度x高度大小的子图像
spriteDef.x，spriteDef.y，spriteDef.width，spriteDef.height，
//在画布上画x，y
画布，画布，spriteDef.宽度，spriteDef.高度
);
}

---

你说的“更改精灵”是什么意思？如果您只想从精灵表中绘制一个精灵，您可以使用的剪裁版本。我想将Pacman精灵更改为真空吸尘器，将幽灵更改为“灰尘兔子”，我不知道Pacman，但我假设真空吸尘器和灰尘兔子是精灵表上现有的精灵。使用

context.drawImage

的剪辑版本，从精灵表中绘制吸尘器精灵和灰尘兔子精灵。例如，请看前面的例子。Pacman是一个有嘴的黄色小圆圈，但我不知道如何进行更改或在何处进行更改，因为我对JavaScript不是很在行。是否有可能以现在的方式制作它？我已经发布了一个答案，告诉你如何从精灵表中剪辑单个精灵。干杯