error create car stage canvas

Question

// Referência do palcovar stage = this;var stage = new createjs.Stage("gameCanvas");// Criando o Carro dinamicamente (instância da classe MovieClip)var car = new createjs.Shape();car.graphics.beginFill("green").drawRect(0, 0, 50, 50); // Um quadrado verde representando o carrocar.x = stage.canvas.width / 2; // Posição inicial no centrocar.y = stage.canvas.height - 1; // Posição no fundo da telastage.addChild(car); // Adiciona o carro ao palco// Atualizando o palcocreatejs.Ticker.framerate = 60;createjs.Ticker.addEventListener("tick", stage);// Movimentação do Carrovar carSpeed = 5;stage.on("stagemousedown", function(evt) {car.x += carSpeed; // Move o carro para a direita ao clicar}); /////////error Uncaught TypeError: Cannot read properties of null (reading 'width') please help me!

JoãoCésar17023019 · Accepted Answer

Hi.

One of the problems is that the local variable stage is shadowing the global variable stage (which is created in the published output) and receiving two different values in sequence.

Also there's a tick event that is not being used and it's not needed if the goal is to only move the car by click.

That being said, here is a suggestion:

var car = new createjs.Shape();

car.setBounds(0, 0, 50, 50);
car.size = car.getBounds();
car.graphics.beginFill("green").drawRect(0, 0, car.size.width, car.size.height);
car.speed = 5;
car.x = lib.properties.width / 2;
car.y = lib.properties.height - car.size.height;
stage.addChild(car);

this.stop(); // methods that change the display list may require the current timeline to be stopped

stage.on("stagemousedown", function()
{
	car.x += car.speed;
});

Note that I set bounds to the shape because CreateJS doesn't provide a way of calculating a shape's bound automatically, added a speed property to the car itself for a more objected oriented approach and left the stage's framerate to be set directly in the IDE of Animate.

I hope it helps.

Regards,
JC

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded