changing code to get it to work from a class?

Report · Dec 30, 2022

Hey team

Kindly gave me this code for character movement

var root = this;
var player = root.player;
var keys = {};

root.main = function()
{
	root.friction = 0.95;
	root.keyForce = 50;
	player.vX = 0;
	player.vY = 0;
	player.minVX = 20;
	player.minVY = 20;
	window.addEventListener("keydown", root.keyDownHandler);
	window.addEventListener("keyup", root.keyUpHandler);
	root.on("tick", root.tickHandler);
	console.log("handled");
};

root.keyDownHandler = function(e)
{
	keys[e.key] = true;
};

root.keyUpHandler = function(e)
{
	delete keys[e.key];
};

root.tickHandler = function(e)
{
	if (keys.a || keys.ArrowLeft)
		player.vX -= root.keyForce;
	else if (keys.d || keys.ArrowRight)
		player.vX += root.keyForce;
	
	if (keys.w || keys.ArrowUp)
		player.vY -= root.keyForce;
	else if (keys.s || keys.ArrowDown)
		player.vY += root.keyForce;
	
	player.vX *= root.friction;
	player.vY *= root.friction;
	player.x += player.vX * e.delta * 0.001;
	player.y += player.vY * e.delta * 0.001;
	
	root.rotate(player);
};

root.rotate = function(target)
{
	target.rotation = Math.atan2(target.vY, target.vX) * 180 / Math.PI;
};

root.main();

So now I am trying (hard) to figure out how to alter this code (looking ulimately to alter the code in the asteroids example JS). What do I need to look for to change this code so it works from the game.js class file?

I know how to address the player (with this.root.player) but I cant seem to be able to work out where to put the variables and other functions? What search topic and I looking for to find how to do this?

Thanks guys I really appreciate your help

bundy

Report · Dec 30, 2022

Hi,

If you are a complete beginner in programming, I would recommend you to start with some tutorials about the basic concepts of programming - variables, functions, scopes, datatypes, loops and conditions. You can take a look at some of these, for example:

https://www.youtube.com/watch?v=PkZNo7MFNFg
https://www.youtube.com/watch?v=W3bkxeRmI1w
https://www.youtube.com/results?search_query=javascript+concepts+beginners+guide

In the particular piece of code you provided, the structure is the folloving:

player
keys
root
   main
   keyDownHandler
   keyUpHandler
   tickHandler
   rotate

So you can define additional variables and functions:

- at the level of player, keys and root with this syntax:

var myVariableName;
function myFunctionName(){
}

- or whithin the root object, with the same syntax as the other functions are defined:

root.myVariableName;
root.myFunctionName = function(){
};

- Vlad: UX and graphic design, Flash user since 1998
Member of Flanimate Power Tools team - extensions for character animation

Report · Dec 30, 2022

class Game
{
    constructor(root, lib)
    {
        this.root = root;
        this.stage = this.root.stage;
        this.lib = lib;
        this.init();
        this.keys ={};
        this.friction = 0.95;
	this.keyForce = 50;
	this.root.player.vX = 0;
	this.root.player.vY = 0;
	this.root.player.minVX = 20;
	this.root.player.minVY = 20;



	


	//document.addEventListener("keyup", this.keyUpHandler);  
    }
    
   init(){
		this.player = this.root.player_mc;
		
		const game = this;
		createjs.Ticker.addEventListener("tick", function(){ game.update(); });
		
        document.addEventListener("keydown", (e) => {
  
    console.log(`Key "${e.key}" pressed [event: keydown]`);
            this.keys[e.key] = true;
  
});
        document.addEventListener("keyup", (e) => {
  
    console.log(`Key "${e.key}" pressed [event: keydown]`);
            this.keys[e.key] = false;
  
});
		
	}
             


   update(){


     
        if (this.keys.a || this.keys.ArrowLeft)
		this.root.player.vX -= this.keyForce;
	else if (this.keys.d || this.keys.ArrowRight)
		this.root.player.vX += this.keyForce;
	
	if (this.keys.w || this.keys.ArrowUp)
		this.root.player.vY -= this.keyForce;
	else if (this.keys.s || this.keys.ArrowDown)
		this.root.player.vY += this.keyForce;
	
	this.root.player.vX *= this.friction;
	this.root.player.vY *= this.friction;

	this.rotate(this.root.player);
      
};

rotate(){

	this.root.player.rotation = Math.atan2(this.root.player.vY, this.root.player.vX) * 180 / Math.PI;
};


}

ok so I have made these changes so far and I can get player to rotate - (I am not sure if my coding is correct but it works)

Now the problem is I cannot work out how to get these lines to work

this.root.player.x += this.root.player.vX * e.delta * 0.001;
this.root.player.y += this.root.player.vY * e.delta * 0.001;

These two lines are throwing back an error that e is not known - I am trying to figure it out.. I see the [e.key] e is solved with the e=> in the document listener (by the way why won't the window listener work here?)

but I cant work out this last bit!! (trust me I am trying 🙂

Report · Dec 30, 2022

ok so this works but its obviously bodgy!

class Game
{
    constructor(root, lib)
    {
        this.root = root;
        this.stage = this.root.stage;
        this.lib = lib;
        this.init();
        this.keys ={};
        this.friction = 0.95;
	this.keyForce = 50;
	this.root.player.vX = 0;
	this.root.player.vY = 0;
	this.root.player.minVX = 20;
	this.root.player.minVY = 20;



	


	//document.addEventListener("keyup", this.keyUpHandler);  
    }
    
   init(){
		this.player = this.root.player_mc;
		
		const game = this;
		createjs.Ticker.addEventListener("tick", function(){ game.update(); });
		
        document.addEventListener("keydown", (e) => {
  
    console.log(`Key "${e.key}" pressed [event: keydown]`);
            this.keys[e.key] = true;
  
});
        document.addEventListener("keyup", (e) => {
  
    console.log(`Key "${e.key}" pressed [event: keydown]`);
            this.keys[e.key] = false;
  
});
		
	}
             


   update(){


     
        if (this.keys.a || this.keys.ArrowLeft)
		this.root.player.vX -= this.keyForce;
	else if (this.keys.d || this.keys.ArrowRight)
		this.root.player.vX += this.keyForce;
	
	if (this.keys.w || this.keys.ArrowUp)
		this.root.player.vY -= this.keyForce;
	else if (this.keys.s || this.keys.ArrowDown)
		this.root.player.vY += this.keyForce;
	
	this.root.player.vX *= this.friction;
	this.root.player.vY *= this.friction;

	this.rotate(this.root.player);
       this.move(this.root.player);
      
};

rotate(){

	this.root.player.rotation = Math.atan2(this.root.player.vY, this.root.player.vX) * 180 / Math.PI;
};

move(){
this.root.player.x += this.root.player.vX  * 0.01;
this.root.player.y += this.root.player.vY * 0.01;
}
}

Report · Dec 30, 2022

ok so I had help but here is the working code!

class Game
{
    constructor(root, lib)
    {
        this.root = root;
        this.stage = this.root.stage;
        this.lib = lib;
        this.init();
        this.keys ={};
        this.friction = 0.95;
	this.keyForce = 50;
	this.root.player.vX = 0;
	this.root.player.vY = 0;
	this.root.player.minVX = 20;
	this.root.player.minVY = 20;



	


	//document.addEventListener("keyup", this.keyUpHandler);  
    }
    
   init(e){
		this.player = this.root.player_mc;
		
		const game = this;
		createjs.Ticker.addEventListener("tick", function(e){ game.update(e); });
		
        document.addEventListener("keydown", (e) => {
  
    console.log(`Key "${e.key}" pressed [event: keydown]`);
            this.keys[e.key] = true;
  
});
        document.addEventListener("keyup", (e) => {
  
    console.log(`Key "${e.key}" pressed [event: keydown]`);
            this.keys[e.key] = false;
  
});
		
	}
    // this one is theone it is looking at
             


   update(e){


     
        if (this.keys.a || this.keys.ArrowLeft)
		this.root.player.vX -= this.keyForce;
	else if (this.keys.d || this.keys.ArrowRight)
		this.root.player.vX += this.keyForce;
	
	if (this.keys.w || this.keys.ArrowUp)
		this.root.player.vY -= this.keyForce;
	else if (this.keys.s || this.keys.ArrowDown)
		this.root.player.vY += this.keyForce;
	
	this.root.player.vX *= this.friction;
	this.root.player.vY *= this.friction;

	this.rotate(this.root.player);
       this.move(e, this.root.player);
      
};

rotate(){

	this.root.player.rotation = Math.atan2(this.root.player.vY, this.root.player.vX) * 180 / Math.PI;
};

move(e, player ){
this.root.player.x += this.root.player.vX * e.delta * 0.001;
this.root.player.y += this.root.player.vY * e.delta * 0.001;
}
}

changing code to get it to work from a class?

1 Correct answer