Jump to content
  • Advertisement
Sign in to follow this  
Awoken

Advanced JavaScript.

This topic is 680 days old which is more than the 365 day threshold we allow for new replies. Please post a new topic.

If you intended to correct an error in the post then please contact us.

Recommended Posts

Hello all,

so I'm designing a browser game and I'm running into clutter problems.  mainly my index page is full of to much code.  Now I've done my best compartmentalise my code as much as possible and send off function calls to various other .js files.  However, my problem right now is that the user interacts with the game via their mouse and so I have to first capture the mouse event and then send it off to the right sub function based on what the user is trying to do.  So you can imagine what my code in the mouseEvent looks like, it's atrocious. 

 

My current method of handling user input is 

-gather user inputs

-determine which flags are set to true, various flags for various tasks

-then send off user inputs and relevant scene items to a sub function to be processed.

 

Is there a way to maybe import mouse events in the sub functions themselves? and import the scene items without the being passed by a function call?

Share this post


Link to post
Share on other sites
Advertisement

mainly my index page is full of to much code.

 

Generally speaking, your index page isn't where your code should live, in order to keep stuff clean.  Move all your javascript into .js files.  You can also use some server side code to split up your index file into smaller pieces and put them together as the page is requested.  You could make your index a .php file that includes other .php files into it.

 

Unfortunately, there's not enough context here to recommend how to do your input.  Depending on how your scene is put together, you might be able to have each game object listen for mouse input only on the element on the page that it belongs to.  For example, I've made simple games using svg shapes for rendering, which allows you to listen for mouse inputs on each svg element individually.  If you're drawing stuff via canvas, then things get more complicated, you'll need a system to detect what was clicked on and dispatch the event to them.

 

If you're using a framework of some kind to put the game together, it's worthwhile digging through the docs for that framework, since many of them handle this kind of stuff for you already.

Share this post


Link to post
Share on other sites

Yeah hey, that's kind of how I have it set up now.   I first figure out what element was picked via the mouseEvent and then fire off a sub function.

 

[ edit ]:

O.k I figured something out.  I can have the function call to a subfunction in a seperate .js file.  Then attach an event listener, then when that event is called it has access to all objects built in the main script.  Then I can remove the event listener.  This will allow me to better organise my code. 

 

[ edit ]:

k I'm looking at the import call and so I don't have to have one big master document loading all scripts at the same time, but have sub scripts importing only what they need.  Right on.

Edited by Awoken

Share this post


Link to post
Share on other sites

Well..... there ae things in DOM object of document in browser you canort escape. And thus- not even obfuscate.

 

DOM object of browser is something like a "linker" of compilation :) DOM=(run time of linker to recieve?)

 

Things you should look to:

 

-WindowRequestAnimationFrame

-AssignedEventsofDOMSubject

-DOMmemebers

 

 

...etc do your magic logic behind :)

Share this post


Link to post
Share on other sites
Instead of doing logic in your mouse event handlers, or having your mouse event handlers know where to send the events, simply set the values of the mouse click in some variable(s). During your update method, anyone who is interested in mouse data can inspect it and act accordingly:


var frameMouseStatus = { x: 0, y: 0, buttons: 0, flag = false };

canvas.onmousemove = function (event) {
    frameMouseStatus.x = event.x;
    frameMouseStatus.y = event.y;
    frameMouseStatus.flag = true;
}

canvas.onmousedown = function (event) {
    frameMouseStatus.buttons = event.buttons;
    frameMouseStatus.flag = true;
}

canvas.onmousedown = function (event) {

}

function onFrame() {
    logic();
    render();    

    // Clear the flag so that we don't reprocess it next frame if nothing happened
    frameMouseStatus.flag = false;

    canvas.requestanimationframe = onFrame;
}

Share this post


Link to post
Share on other sites
Sign in to follow this  

  • Advertisement
×

Important Information

By using GameDev.net, you agree to our community Guidelines, Terms of Use, and Privacy Policy.

GameDev.net is your game development community. Create an account for your GameDev Portfolio and participate in the largest developer community in the games industry.

Sign me up!