给定特定坐标后，为什么画布图像绘制不正确

Question

我正在尝试使用香草javascript构建Snake游戏。到目前为止，我已经生成了墙边框并定义了玩家初始头像开始的坐标。但是，当我在浏览器中尝试时，发生了一个奇怪的错误，我不知道为什么。这是一个示例：

1。发生错误。球员的头是球场上的那个单点。但是由于某种原因，墙壁也被漆成红色（玩家最初的头部颜色）。

这是我的JavaScript代码：

var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');

var xAxis = 600, yAxis = 600, wallImage, playerHeadImage;  // we defined that canvas is 600 x 600 big
var playerHeadInitialXpos = Math.floor(Math.random() * 28) + 1;  // We use 28 and 1, because 29 and 0 are occupied by walls in the worldTileSet
var playerHeadInitialYpos = Math.floor(Math.random() * 28) + 1;
console.log(playerHeadInitialXpos);
console.log(playerHeadInitialYpos);
var isGameOver = false;
var arrayLength = 30;
var worldTileSet = new Array(arrayLength);
var documentBody = document.body;


function wall(xPosition, yPosition) {
  this.name = 'Wall';
  this.xPosition = xPosition;
  this.yPosition = yPosition;
  isWall : true;
  ctx.save();
  ctx.rect(this.xPosition, this.yPosition, 20, 20);  // since our keyboard is 30 * 30 squares (two dimensional array), then 600 / 30 = 20
  ctx.clip();
  ctx.drawImage(wallImage, this.xPosition, this.yPosition);
  ctx.restore();
}

function playerHead(xPosition, yPosition) {
  console.log("X body coordinate:" + xPosition + ", Y body coordinate: " + yPosition);
  this.name = 'Body';
  this.xPosition = xPosition;
  this.yPosition = yPosition;
  isPlayerBody : true;
  ctx.save();
  ctx.rect(this.xPosition, this.yPosition, 20, 20);
  ctx.clip();
  ctx.drawImage(playerHeadImage, this.xPosition, this.yPosition);
  ctx.restore();
}

function processImages() {
  wallImage = new Image();
  playerHeadImage = new Image();
  wallImage.src = 'img/wall1.jpeg';
  playerHeadImage.src = 'img/red.jpg';
}

function setUpEnvironment() {

  if (wallImage.complete) {
    setUpNorthernGameBorder();
    setUpSouthernGameBorder();
    setUpEasternGameBorder();
    setUpWesternGameBorder();
    return;
  }

  setTimeout(function () {
    setUpEnvironment()
  }, 1000);
}

function setUpPlayer() {
  if (playerHeadImage.complete) {
    alert(1);
    setPlayerHeadInitialPosition();
    return;
  }
  setTimeout(function () {
    setUpPlayer()
  }, 1000);
}

window.onload = function () {  // <-- Here code begins
  processImages();
  initializeWorldTileSet();
  setUpEnvironment();
  setUpPlayer();
};

function setUpNorthernGameBorder() {
  var xPos = 0;
  for (var tile = 0; tile < arrayLength; tile++) {
    worldTileSet[tile][0] = new wall(xPos, yAxis - 600);
    xPos += 20;
  }
}

function setUpSouthernGameBorder() {
  var xPos = 0;
  for (var tile = 0; tile < arrayLength; tile++) {
    worldTileSet[tile][29] = new wall(xPos, yAxis - 20);
    xPos += 20;
  }
}

function setUpEasternGameBorder() {
  var yPos = 0;
  for (var tile = 0; tile < arrayLength; tile++) {
    worldTileSet[29][tile] = new wall(xAxis - 20, yPos);
    yPos += 20;
  }
}

function setUpWesternGameBorder() {
  var yPos = 0;
  for (var tile = 0; tile < arrayLength; tile++) {
    worldTileSet[0][tile] = new wall(xAxis - 600, yPos);
    yPos += 20;
  }
}

function initializeWorldTileSet() {  // Here we build two dimensional array which represents our game board
  for (var i = 0; i < worldTileSet.length; i++) {
    worldTileSet[i] = new Array(arrayLength);
  }
}

function setPlayerHeadInitialPosition() {  // <-- I suspect a bug happens here, but i dont know why
  var yPos = 0;
  console.log("playerHeadInitialXpos: " + playerHeadInitialXpos + ", playerHeadInitialYpos: " + playerHeadInitialYpos);
  worldTileSet[playerHeadInitialXpos][playerHeadInitialYpos] = new playerHead(playerHeadInitialXpos * 20, playerHeadInitialYpos * 20);

  worldTileSet[29][29] = new playerHead(580, 580);
  for (var tile = 0; tile < arrayLength; tile++) {
    yPos += 20;
    console.log("Eastern wall. Coordinates: X: " + 29 + ", Y: " + tile + ". Object: " + worldTileSet[29][tile] + ". Name: " + worldTileSet[29][tile].name);
  }
}

如您所见，我已经定义了两个对象，并且所有内容（草除外）都是一个javascript对象（墙壁，头部）。所以我调试了一下，看看墙上的那些红色是否是玩家的头部对象，并且得到了以下结果：

Eastern wall. Coordinates: X: 29, Y: 0. Object: [object Object]. Name: Wall
game.js:167 Eastern wall. Coordinates: X: 29, Y: 1. Object: [object Object]. Name: Wall
game.js:167 Eastern wall. Coordinates: X: 29, Y: 2. Object: [object Object]. Name: Wall
game.js:167 Eastern wall. Coordinates: X: 29, Y: 3. Object: [object Object]. Name: Wall
game.js:167 Eastern wall. Coordinates: X: 29, Y: 4. Object: [object Object]. Name: Wall
game.js:167 Eastern wall. Coordinates: X: 29, Y: 5. Object: [object Object]. Name: Wall
game.js:167 Eastern wall. Coordinates: X: 29, Y: 6. Object: [object Object]. Name: Wall
game.js:167 Eastern wall. Coordinates: X: 29, Y: 7. Object: [object Object]. Name: Wall
game.js:167 Eastern wall. Coordinates: X: 29, Y: 8. Object: [object Object]. Name: Wall
game.js:167 Eastern wall. Coordinates: X: 29, Y: 9. Object: [object Object]. Name: Wall
game.js:167 Eastern wall. Coordinates: X: 29, Y: 10. Object: [object Object]. Name: Wall
game.js:167 Eastern wall. Coordinates: X: 29, Y: 11. Object: [object Object]. Name: Wall
game.js:167 Eastern wall. Coordinates: X: 29, Y: 12. Object: [object Object]. Name: Wall
game.js:167 Eastern wall. Coordinates: X: 29, Y: 13. Object: [object Object]. Name: Wall
game.js:167 Eastern wall. Coordinates: X: 29, Y: 14. Object: [object Object]. Name: Wall
game.js:167 Eastern wall. Coordinates: X: 29, Y: 15. Object: [object Object]. Name: Wall
game.js:167 Eastern wall. Coordinates: X: 29, Y: 16. Object: [object Object]. Name: Wall
game.js:167 Eastern wall. Coordinates: X: 29, Y: 17. Object: [object Object]. Name: Wall
game.js:167 Eastern wall. Coordinates: X: 29, Y: 18. Object: [object Object]. Name: Wall
game.js:167 Eastern wall. Coordinates: X: 29, Y: 19. Object: [object Object]. Name: Wall
game.js:167 Eastern wall. Coordinates: X: 29, Y: 20. Object: [object Object]. Name: Wall
game.js:167 Eastern wall. Coordinates: X: 29, Y: 21. Object: [object Object]. Name: Wall
game.js:167 Eastern wall. Coordinates: X: 29, Y: 22. Object: [object Object]. Name: Wall
game.js:167 Eastern wall. Coordinates: X: 29, Y: 23. Object: [object Object]. Name: Wall
game.js:167 Eastern wall. Coordinates: X: 29, Y: 24. Object: [object Object]. Name: Wall
game.js:167 Eastern wall. Coordinates: X: 29, Y: 25. Object: [object Object]. Name: Wall
game.js:167 Eastern wall. Coordinates: X: 29, Y: 26. Object: [object Object]. Name: Wall
game.js:167 Eastern wall. Coordinates: X: 29, Y: 27. Object: [object Object]. Name: Wall
game.js:167 Eastern wall. Coordinates: X: 29, Y: 28. Object: [object Object]. Name: Wall
game.js:167 Eastern wall. Coordinates: X: 29, Y: 29. Object: [object Object]. Name: Body

2。我的调试显示，即使某些墙壁涂成红色，它们仍然是墙壁对象。注意：出于调试目的，我故意将最后一个红点（头部对象）放在东部边界上。

在这里，我不知道为什么会这样。我注意到，当初始玩家的头朝西时，这不会发生。仅当玩家的头部离东墙足够近时才会发生。这样的行为可能是什么原因？

附件（图像资源）：

Answer 1

问题是您要绘制整个红色正方形，而不是仅从其中提取20x20的一部分，所以您将需要替换：

ctx.drawImage(playerHeadImage, this.xPosition, this.yPosition);

与：

ctx.drawImage(playerHeadImage, this.xPosition, this.yPosition, 20, 20);

仅从红色正方形图像中提取20x20。我个人建议，因为您只想绘制一个红色正方形以使用fillrect而不是像这样绘制图像：

ctx.save();
ctx.fillStyle = "red";
ctx.fillRect(this.xPosition, this.yPosition, 20, 20);
ctx.clip();
ctx.restore();

而不是：

ctx.save();
ctx.clip();
ctx.drawImage(playerHeadImage, this.xPosition, this.yPosition, 20, 20);
ctx.restore();