Advanced JavaScript.

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.

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.

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 :)

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