用精灵动画代替Pacman游戏

Question

我对 HTML/CSS/JS 编程相当陌生，需要一些帮助。

我正在尝试对最初使用 HTML5/CSS3/JQuery 构建的 Pacman 克隆进行逆向工程。我在完成我需要完成的事情方面一直在取得进展：我添加了自定义覆盖层，更改了周围的一些图形等。我一直遇到的问题是用自定义角色替换吃豆人角色。我可以添加一个静态 PNG 文件并使用它，但我希望它是动画的。所以我学习了如何创建 spritesheet 并使用 requestAnimationFrame 为其设置动画。我将其添加到项目中，但使用 javascript 代码动态移动它时遇到问题。

这是我最初的代码，它将原始的 pacman 角色（使用画布弧线方法创建）替换为每个方向的静态 PNG 图像：

function drawPacman() { 

var ctx = getPacmanCanevasContext();
  
ctx.beginPath();

if (PACMAN_DIRECTION === 1)  {
    img = document.getElementById("pacmanright");
    ctx.drawImage(img, PACMAN_POSITION_X - (PACMAN_SIZE / 2), PACMAN_POSITION_Y - (PACMAN_SIZE / 2), PACMAN_SIZE, PACMAN_SIZE); 
} else if (PACMAN_DIRECTION === 2) { 
    img = document.getElementById("pacmandown");     
    ctx.drawImage(img, PACMAN_POSITION_X - (PACMAN_SIZE / 2), PACMAN_POSITION_Y - (PACMAN_SIZE / 2), PACMAN_SIZE, PACMAN_SIZE); 
} else if (PACMAN_DIRECTION === 3 ) {                
    img = document.getElementById("pacmanleft");
    ctx.drawImage(img, PACMAN_POSITION_X - (PACMAN_SIZE / 2), PACMAN_POSITION_Y - (PACMAN_SIZE / 2), PACMAN_SIZE, PACMAN_SIZE); 
} else {
    img = document.getElementById("pacmanup");
    ctx.drawImage(img, PACMAN_POSITION_X - (PACMAN_SIZE / 2), PACMAN_POSITION_Y - (PACMAN_SIZE / 2), PACMAN_SIZE, PACMAN_SIZE); 
}

  //ctx.arc(PACMAN_POSITION_X, PACMAN_POSITION_Y, PACMAN_SIZE, startAngle, endAngle, false);
  //ctx.lineTo(lineToX, lineToY);
  //ctx.fill();
  ctx.closePath();
}

所以我开始在画布元素内创建 spritesheet 动画。

window.onload = function() {
var canvas = document.querySelector("#myCanvas");
var context = canvas.getContext("2d");
 
var myImage = new Image();
myImage.src = "https://i.ibb.co/NrJYyQj/spritesheet2-removebg-preview.png";
myImage.addEventListener("load", loadImage, false);

var shift = 0;
var frameWidth = 133;
var frameHeight = 114;
var totalFrames = 3;
var currentFrame = 0;

function loadImage(e) {
  animate();
}

function animate() {

requestAnimationFrame(animate);

context.clearRect(0, 0, 133, 114);

context.drawImage(myImage, shift, 0, frameWidth, frameHeight, 0, 0, frameWidth, frameHeight);
 
shift += frameWidth + 1;
 
  /*
    Start at the beginning once you've reached the
    end of your sprite!
  */

  if (currentFrame == totalFrames) {
    shift = 0;
    currentFrame = 0;
  }
 
  currentFrame++;

}
}

我只知道让它出现在游戏中，但我不知道如何在JS中动态移动它，类似于上面的drawPacman函数。我做了一些尝试，但没有成功：

function positionCanvas(canvasId, x, y) {
  const direction = document.getElementById(canvasId);
  const ctx = canvas.getContext("2d")
  direction.style.position = "absolute";
  direction.style.left = x + "px";
  direction.style.top = y + "px";
}

function drawPacman() { 

var ctx = getPacmanCanevasContext();
  
  ctx.beginPath();

if (PACMAN_DIRECTION === 1)  {
    right = document.getElementById("myCanvas");
    positionCanvas(right, PACMAN_POSITION_X, PACMAN_POSITION_Y); 

它没有将画布元素放置在我想要的位置。除非我在 CSS 文件中硬编码一个位置，否则只会保持在 0,0。

我希望我的解释足够有意义。如果需要，我可以分享更多代码。

Answer 1

您的

positionCanvas()

函数需要一个 id，但您正在向它传递一个元素。因此，将您的电话更改为：

positionCanvas("myCanvas", PACMAN_POSITION_X, PACMAN_POSITION_Y);