Объединение двух объектов на холсте с помощью JavaScript - PullRequest
Новая
       65

Объединение двух объектов на холсте с помощью JavaScript

0 голосов
/ 29 сентября 2018

Хорошо, поэтому я делаю игру Pac-Man для двух игроков для своего класса JavaScript, и у меня возникают проблемы с столкновением Pac-Man со стенами.Четыре стены, которые выстилают внешнюю сторону холста, отлично работают, поэтому он остается в нем, но он проходит сквозь все настенные предметы внутри холста, из которых состоит лабиринт. 

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var width = canvas.width;
var height = canvas.height;
var blockSize = 12;
var widthInBlocks = width / blockSize;
var heightInBlocks = height / blockSize;
var score = 0;
var drawBorder = function () {
  ctx.fillStyle = "Blue";
  ctx.fillRect(0, 0, width, blockSize);
  ctx.fillRect(0, height - blockSize, width, blockSize);
  ctx.fillRect(0, 0, blockSize, height);
  ctx.fillRect(width - blockSize, 0, blockSize, height);
  drawWalls();
};
var Wall = function(x, y, width, height)
{
    ctx.fillRect(x, y, width, height);
}
var drawWalls = function()
{
  ctx.fillStyle = "Blue";
  //scoreboards
  var wall1 = new Wall(0, 60, 650, 12);
  var wall2 = new Wall(220, 0, 12, 60);
  var wall3 = new Wall(430, 0, 12, 60);
  //verticle walls
  var wall = new Wall(36, 96, 12, 216);
  var wall4 = new Wall(36, 372, 12, 240);
  var wall5 = new Wall(600, 372, 12, 240);
  var wall6 = new Wall(600, 96, 12, 216);
  var wall7 = new Wall(300, 132, 12, 180);
  var wall8 = new Wall(336, 132, 12, 180);
  var wall9 = new Wall(300, 372, 12, 204);
  var wall10 = new Wall(336, 372, 12, 204);
  var wall11 = new Wall(168, 372, 12, 204);
  var wall12 = new Wall(468, 372, 12, 204);
  var wall13 = new Wall(468, 132, 12, 180);
  var wall14 = new Wall(168, 132, 12, 180);
  //horizontal walls
  var wall15 = new Wall(72, 96, 240, 12);
  var wall16 = new Wall(72, 336, 240, 12);
  var wall17 = new Wall(336, 96, 240, 12);
  var wall18 = new Wall(336, 336, 240, 12);
  var wall19 = new Wall(72, 600, 240, 12);
  var wall20 = new Wall(336, 600, 240, 12);
  var wall21 = new Wall(72, 216, 204, 12);
  var wall22 = new Wall(72, 468, 204, 12);
  var wall23 = new Wall(372, 216, 204, 12);
  var wall24 = new Wall(372, 468, 204, 12);
  //square walls 1
  var wall25 = new Wall(72, 132, 84, 72);
  var wall26 = new Wall(192, 132, 84, 72);
  var wall27 = new Wall(72, 240, 84, 72);
  var wall28 = new Wall(192, 240, 84, 72);
  //square walls 2
  var wall29 = new Wall(372, 132, 84, 72);
  var wall30 = new Wall(492, 132, 84, 72);
  var wall31 = new Wall(372, 240, 84, 72);
  var wall32 = new Wall(492, 240, 84, 72);
  //square walls 3
  var wall33 = new Wall(72, 372, 84, 84);
  var wall34 = new Wall(192, 372, 84, 84);
  var wall35 = new Wall(72, 492, 84, 84);
  var wall36 = new Wall(192, 492, 84, 84);
  //square walls 4
  var wall37 = new Wall(372, 372, 84, 84);
  var wall38 = new Wall(492, 372, 84, 84);
  var wall39 = new Wall(372, 492, 84, 84);
  var wall40 = new Wall(492, 492, 84, 84);
};
Pac.prototype.checkCollision = function (head) {
  var leftCollision = (head.col === 0);
  var topCollision = (head.row === 0);
  var rightCollision = (head.col === widthInBlocks - 1);
  var bottomCollision = (head.row === heightInBlocks - 1);
  var wallCollision = leftCollision || topCollision || rightCollision || bottomCollision;

  return wallCollision;
};

Извините, если я не сделалне сделать правильный формат.Я новичок здесь, и это мой первый пост.

1 Ответ

0 голосов
/ 30 сентября 2018

Так же, как общие рекомендации, с любым типом системы столкновений вы никогда не захотите связывать свой физический код с вашим чертежным кодом.Таким образом, вы не должны измерять / делить на количество пикселей на блок.Вы должны определить количество блоков как целое число и сравнить целое или дробное положение человека в блоках с этим.Одна не столь очевидная причина этого заключается в том, что Javascript не всегда идеально выполняет вычисления с плавающей запятой.Это может быть проблемой, с которой вы сталкиваетесь.В любом случае, если ваша ширина в блоках не является целым числом или заголовок не позиционируется как целое число, этот код не будет работать.Вы действительно хотите проверить, находится ли голова в блоке, и если это так, вернуть ее в прежнее положение.Не только, если он находится точно на краю блока.

Лучший способ написать этот код - определить стены в их позиции блока, определить pacman в его позиции блока, а затем во время вызова отрисовкиВы бы умножили их на любое количество пикселей, которое вы хотите отобразить.Затем проверьте, находится ли какая-либо из границ pacman в пределах любого из блоков стены.Типичный способ структурировать каждый кадр - сначала взять пользовательский ввод, проверить физику, как если бы вы продолжили движение, затем переместить физику и нарисовать сцену.

...