Почему не рендеринг моего персонажа на холсте HTML5 - PullRequest
Новая
       14

Почему не рендеринг моего персонажа на холсте HTML5

0 голосов
/ 09 ноября 2019

Поэтому я пытаюсь «переместить» камеру на холсте HTML 5, уменьшив свойство x всех объектов, но удерживая персонажа в том же месте, пока не достигнет определенной точки (половина ширины 3-го фона). ). Когда он достигнет этого, все объекты перестанут позволять персонажу двигаться на холсте. Но вместо этого, когда он достигает этой точки, мой персонаж не рендерится (я достиг бы этого, переключая X моего персонажа между realX (добавляя или вычитая скорость X игрока к этому) и центром холста). При переключении между этими двумя свойствами, когда мой персонаж находится над этой точкой (половина третьего фонового изображения), он также устанавливает свойства других объектов (два поля и фоновые изображения) x, когда он еще не достиг этой точки I 've set.

Физика и все остальное работает отлично, единственная проблема - не рендеринг персонажа. Я пытался установить каждую необходимую переменную вручную, но она все равно не работала.

Вы можетенайдите код в repl.it , script.js - единственный функциональный файл js, save.js - это просто файл, который я использовал для сохранения кода, если что-то пошло не так.

Это проблемная часть: 

if ((player.pos.realx < (background[1].length * 800 - 800 - (player.width / 2))) && (player.pos.realx > 0)) {
    console.log("inside");
    player.pos.x = (canvas.width / 2) - (player.width / 2);
    for (let i = 0; i < background[1].length; i++) {
      ctx.drawImage(background[1][i].img, background[1][i].x -= player.velocity.x, -100, 800, 600);
    }
    for (let i = 0; i < background[0].length; i++) {
      ctx.drawImage(background[0][i].img, background[0][i].x -= player.velocity.x, -100, 800, 600);
    }
    for (let i = 0; i < objects.length; i++) {
      ctx.fillStyle = objects[i].color;
      ctx.fillRect(objects[i].x -= player.velocity.x, objects[i].y, objects[i].width, objects[i].height);
    }
  } else if ((player.pos.realx > (background[1].length * 800 - 800 - (player.width / 2)))) {
    console.log("outside");
    player.pos.x = player.pos.realx;
    for (let i = 0; i < background[1].length; i++) {
      ctx.drawImage(background[1][i].img, background[1][i].x, -100, 800, 600);
    }
    for (let i = 0; i < background[0].length; i++) {
      ctx.drawImage(background[0][i].img, background[0][i].x, -100, 800, 600);
    }
    for (let i = 0; i < objects.length; i++) {
      ctx.fillStyle = objects[i].color;
      ctx.fillRect(objects[i].x, objects[i].y, objects[i].width, objects[i].height);
    }
  }
  //not displaying... outside
  ctx.fillStyle = player.color;
  ctx.fillRect(player.pos.x, player.pos.y, player.width, player.height);

А вот некоторые дополнительные переменные и объекты: 

let objects = [new Box(250, 200, 50, 50, "blue"), new Box(750, 200, 50, 50, "green")];

let background = [[], []];
for (let i = 0; i < 3; i++) {
  background[1].push(new Background(i * 800, -100, 800, 600));
  background[1][i].img.src = "./pixelTree.png";
}
for (let i = 0; i < 3; i++) {
  background[0].push(new Background(i * (-800), -100, 800, 600));
  background[0][i].img.src = "./pixelTree.png";
}

let player = {
  width: 50,
  height: 100,
  color: "red",
  pos: {
    x: 0,
    y: 0,
    realx: 0,
  },
  dir: {
    right: false,
    left: false,
    up: false,
  },
  velocity: {
    x: 0,
    y: 0,
  },
}
player.pos.x = (canvas.width / 2) - (player.width / 2);

function Box(x, y, width, height, color) {
  this.x = x;
  this.y = y;
  this.width = width;
  this.height = height;
  this.color = color;
}
function Background(x, y, width, height) {
  this.img = new Image();
  this.x = x;
  this.y = y;
  this.width = width;
  this.height = height;
}

Спасибо за ваше время.

...