Skip to main content
B
Bundaberg North5E42
Inspiring
December 30, 2022
Answered

changing code to get it to work from a class?

  • December 30, 2022
  • 1 reply
  • 456 views

Hey team 

JoãoCésar

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

    This topic has been closed for replies.
    Correct answer Bundaberg North5E42

    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;
}
}

    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;
}
}

    1 reply

    Vladin M. Mitov
    Vladin M. Mitov
    Inspiring
    December 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 1998Member of Flanimate Power Tools team - extensions for character animation
    B
    Bundaberg North5E42Author
    Inspiring
    December 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 🙂

    B
    Bundaberg North5E42Author
    Inspiring
    December 31, 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;
}
}
    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices