Проблемы с холстом HTML и объектно-ориентированным персонажем JavaScript для игры HTML

Question

Проблема в том, что холст HTML не выводит символьный объект внутри холста.Холст определяется как gameArea, а персонаж - как персонаж.Оба написаны на JavaScript, и персонаж превращается в объект.

Это для 2D-платформерной игры, поэтому я пытался изменить форму объекта персонажа на переменную, чтобы увидеть, вызывает ли инкапсуляция объекта проблемы, но это не сработало.Я также попытался добавить новую функцию в символьном объекте под названием update, чтобы убедиться, что символ (прямоугольник) заполняется при перемещении.

Вот мой код:

Первыйsection объявляет символьную переменную, а также имеет функцию , которая сначала запускается в HTML с использованием onload:

var Character;

function startGame(){
    gameArea.start();
    Character = new character(40, 80, "#4286f4", 30, 500, true, 0, 0);
}

Параметры для символьного объекта: width,height, colour, x, y, состояние прыжка, speedX и speedY (также показано далее в коде).

Во втором разделе показана переменная gameArea (canvas) , я также назвал свои EventListeners Keydown и Keyup здесь:

var gameArea = {
    canvas: document.getElementById("canvas"), //Defining the canvas' 
    //dimensions
    start: function() {
        this.canvas.width = 700;
        this.canvas.height = 500;
        this.context = this.canvas.getContext("2d");
        document.body.insertBefore(this.canvas,document.body.childNodes[0]);
        this.interval = setInterval(updateGameArea, 20);
        window.addEventListener('keydown', function (e) {//EventListener 
    functions
            gameArea.keys = (gameArea.keys || []);
            gameArea.keys[e.keyCode] = (e.type == "keydown");
        })
        window.addEventListener('keyup', function (e) {
            gameArea.keys[e.keyCode] = (e.type == "keydown");
        })
    },
    clear : function(){
        this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
    }
}

Следующий раздел - это символьный объект :

function character(width, height, color, x, y, jumping, speedX, speedY) 
{//Character object, blue rectangle
    this.jumping=jumping;
    this.width = width;
    this.height = height;
    this.x = x;
    this.y = y;
    this.speedX = speedX;
    this.speedY= speedY;
    ctx = gameArea.context;
    ctx.fillStyle = color;
    ctx.fillRect(this.width, this.height, this.x, this.y);
    this.update = function() {//Updating the gameArea function
        ctx = gameArea.context;
        ctx.fillStyle = color;
        ctx.fillRect(this.x, this.y, this.width, this.height);
    }
 }

Насколько мне известно, приведенный выше код является единственным релевантным кодом для решения проблемы. Если необходимо, остальной код (логика контроллера и механика движения) можно найти ниже:

   function updateGameArea() {
    gameArea.clear();
    character.speedX = 0;
    character.speedY = 0;
    character.update();
    var controller = {

        up: false,
        down: false,
        left: false,
        right: false,
        keyListener: function (event) {
            var keyPosition = (event.type == "keydown") ? true : false;
            switch (event.keyCode) {
                case 87:
                    controller.up = keyPosition;
                    break;

                case 83:
                    controller.down = keyPosition;
                    break;

                case 65:
                    controller.left = keyPosition;
                    break;

                case 68:
                    controller.right = keyPosition;
                    break;

            }
        }
    };

        if (controller.up && character.jumping == false) {
            character.speedY -= 2.5
            character.jumping = true;
        }
        if (controller.down) {
            character.speedY += 2.5;
        }
        if (controller.left) {
            character.speedX -= 2.5;
        }
        if (controller.right) {
            character.speedX += 2.5;
        }

        character.speedY += 1.5;
        character.x = character.speedX;
        character.y = character.speedY;
        character.speedX *= 0.9;
        character.speedY *= 0.9

        var ground = gameArea.canvas.height - this.height;
        if (this.y > ground) {
            character.jumping = false;
            character.y = ground;
            character.speedY = 0;
        }

    }

Ожидаемые результаты: персонаж отображается внутри холста и имеетправильное движение

Фактические результаты: символ не отображается.

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

Спасибо большое!

Answer 1

Вы устанавливаете позицию персонажа на 500, чтобы он рисовался вне видимой области (холст всего 500 в высоту).x = 0, y = 0 в правом верхнем углу холста.

Изменить Character = new character(40, 80, "#4286f4", 30, 500, true, 0, 0);

На Character = new character(40, 80, "#4286f4", 30, 400, true, 0, 0);

РЕДАКТИРОВАТЬ: Переписал все это.

var character, ctx;

function startGame() {

  gameArea.start();
  character = new Character(40, 80, "#4286f4", 30, 400, true, 0, 0);
  gameArea.clear();
  updateGameArea();
}

let gameArea = {
  start() {
    this.canvas = document.getElementById("canvas"); //Defining the canvas' 
    this.canvas.width = 700;
    this.canvas.height = 500;
    this.context = this.canvas.getContext("2d");
    
  },
  clear() {
    this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
  },
}

function Character(width, height, color, x, y, jumping, speedX, speedY) { //Character object, blue rectangle
  this.jumping = jumping;
  this.width = width;
  this.height = height;
  this.position = {
    x,
    y
  };
  this.velocity = {
    x: speedX,
    y: speedY
  };
  ctx = gameArea.context;
  ctx.fillStyle = color;
  ctx.fillRect(this.width, this.height, this.x, this.y);
  this.color = color;
 return this;
}
Character.prototype = {
  update() { //Updating the gameArea function
   
    character.position.x += character.velocity.x;
    character.position.y += character.velocity.y;
    
    let ground = gameArea.canvas.height - this.height;
    if (this.position.y > ground) {
      character.jumping = false;
      character.position.y = ground;
      character.velocity.y = 0;
    }
    
    ctx = gameArea.context;
    ctx.fillStyle = this.color;
    ctx.fillRect(this.position.x, this.position.y, this.width, this.height);
  }
}
var controller = {
  x: 0,
  y: 0
};
document.addEventListener('keydown', e => {
  switch (e.keyCode) {
    case 87:
      controller.y = -1;
      break;

    case 83:
      controller.y = 1;
      break;

    case 65:
      controller.x = -1;
      break;

    case 68:
      controller.x = 1;
      break;
  }

});
document.addEventListener('keyup', e => {
  switch (e.keyCode) {
    case 87:
      controller.y = 0;
      break;

    case 83:
      controller.y = 0;
      break;

    case 65:
      controller.x = 0;
      break;

    case 68:
      controller.x = 0;
      break;
  }

});

function updateGameArea() {
  
  gameArea.clear();
  character.velocity.x = controller.x;
  character.velocity.y = controller.y;
  character.update();
  requestAnimationFrame(updateGameArea);
}

window.onload = startGame;

canvas {
  width:100%;
}

<canvas id="canvas"></canvas>