• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

changing code to get it to work from a class?

Participant ,
Dec 30, 2022 Dec 30, 2022

Copy link to clipboard

Copied

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

Views

187

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

Participant , Dec 30, 2022 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.ro
...

Votes

Translate

Translate
Engaged ,
Dec 30, 2022 Dec 30, 2022

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Dec 30, 2022 Dec 30, 2022

Copy link to clipboard

Copied

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 🙂

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Dec 30, 2022 Dec 30, 2022

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Dec 30, 2022 Dec 30, 2022

Copy link to clipboard

Copied

LATEST

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines