Почему на обычную переменную Анимация идет к примеру, position.x++ а на this.position.x++ нет?

Question

[Triborg-333]

Помогите пожалуйста. На обычную переменную Анимация идет.

let canvas, ctx, width, height;

let Game = function(){

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

	canvas = width = window.innerWidth;
	canvas = height = window.innerHeight;

	var gameSize = {

	}

	this.loadGame();
}

const bg = new Image();
bg.src = "img/bg.png";

Game.prototype.startGame = function(){
	this.loadGame();
}


Game.prototype.loadGame = function(){
	this.knight();
	this.update();
	this.draw();

	requestAnimationFrame(()=>{
 		this.loadGame();
	});
}


Game.prototype.knight = function(game, gameSize,position){
	this.game = game;
	this.position = {x : 150, y : 150};
	this.size = {x : 200, y : 230};
	this.current = 0;
	this.knight = [];
}

Game.prototype.update = function(){
	
}


Game.prototype.draw = function(){
	ctx.drawImage(bg, 0, 0);
	ctx.fillRect(this.position.x++, this.position.y, 150, 150)
}


window.onload = function(){
	new Game("ctx");
}

Answer 1

[RAX7]

Во первых метод knight в прототипе перекрывается свойством knight

Game.prototype.knight = function(game, gameSize,position){
  this.game = game;
  this.position = {x : 150, y : 150};
  this.size = {x : 200, y : 230};
  this.current = 0;
  this.knight = []; // <----- упс! следующий вызов this.knight() окажется неудачным.
}

Во вторых raf рекурсивно вызывает loadGame, loadGame вызывает knight, knight переписывает объект this.position, поэтому ни х, ни y не изменяются.

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

Comments

[Triborg-333]

Спасибо :) Здоровья тебе!

[RAX7]

Triborg-333, пожалуйста =)