Javascript Refactoring code

Question

I have a working code that wraps all the stuff in anonymous function, to avoid pollute global namespace. But it still containing too many global variables, so, i am trying to clean it in some way. This is now:

(function() {
 ...
 var paddleHeight = 10;
 var paddleWidth = 75;
 var paddleX = (canvas.width-paddleWidth)/2;
 var rightPressed = false;
 var leftPressed = false;
 document.addEventListener("keydown", keyDownHandler, false);
 document.addEventListener("keyup", keyUpHandler, false);
 function keyDownHandler(e) {
 if(e.keyCode == 39) {
 rightPressed = true;
 }
 else if(e.keyCode == 37) {
 leftPressed = true;
 }
 }
 function keyUpHandler(e) {
 if(e.keyCode == 39) {
 rightPressed = false;
 }
 else if(e.keyCode == 37) {
 leftPressed = false;
 }
 }
 function drawPaddle() {
 ctx.beginPath(); // Draw paddle 
 ctx.rect(paddleX, canvas.height-paddleHeight, paddleWidth, paddleHeight);
 ctx.fillStyle = "#0095DD";
 ctx.fill();
 ctx.closePath(); // end draw
 }
})();

In the draw() function"Main", i have a conditional statement to check the relative movement of the paddle:

function draw() {
 ...
 // here i'm clearing canvas after each frame draw
 //here are calls to other functions.
if(rightPressed && paddleX < canvas.width-paddleWidth) {
 paddleX += 7;
 }
 else if(leftPressed && paddleX > 0) {
 paddleX -= 7;
 }
}

I had try to move all the stuff on a class(this will be a edit to add MyclassPaddle). Related functions are:

keyDownHandler();
KeyUpHandler();
drawPaddle();
// the if statement to check movement of paddle.

The problem now is when i try no move the if to an isolated function the 'global' variables isn't updated, so the paddle can't move. I want to move all related variables but i'm not finding the right way.

• Craicerjack: Instead of having an anonymous function you could put all your code into a namepsace, an object that wraps all the above code. Then you will be able to access the variables using namespace.variable

Answer 1

You could try making a single object on the window to solve this problem.

window.myThing = (function() {
 return {
 paddleHeight: 200,
 paddleWidth: 100,
 leftPressed: false,
 rightPressed: false,
 paddleX: 0,
 paddleY: 0,
 canvas: null,
 // etc
 init: function(options) {
 // pass in { canvasElement: '.my-canvas-class' }
 this.canvas = document.querySelector(options.canvasElement);
 this.bindEvents(); // can use `this`
 },
 keyDownHandler: function(event) {
 if (event.keyCode === 39) {
 // can't use `this` but can access directly
 window.myThing.rightPressed = true;
 } else if(event.keyCode === 37) {
 window.myThing.leftPressed = true;
 }
 },
 keyUpHandler: function(event) {
 if (event.keyCode === 39) { // notice the `===` instead of `==`
 window.myThing.rightPressed = false;
 } else if(event.keyCode === 37) {
 window.myThing.leftPressed = false;
 }
 },
 // etc
 bindEvents: function() {
 document.addEventListener("keydown", this.keyDownHandler, false);
 document.addEventListener("keyup", this.keyUpHandler, false);
 },
 draw: function() {
 // can use `this`
 if (this.rightPressed && this.paddleX < this.canvas.width - this.paddleWidth) {
 this.paddleX += 7;
 } else if(this.leftPressed && this.paddleX) { // don't need `> 0`
 this.paddleX -= 7;
 }
 }
 }
})();

You can then access everything through the new window.myThing object and you should be good to go.

Code is untested, just wrote it blindly so it's probably wrong in some ways, it's meant to just be an example, not something you can copy-paste.

• Alnitak: Alnitak's 5th law of JS - "No object should ever refer to itself by the name of any variables to which it is bound"
• darryn.ten: 100%, the context inside the event handlers is a little tricky. Fat arrows make this a non-issue but in this instance... What do you suggest?
• Hell0: Thank you for your quick response. i'm testing and making it to work with other stuff. I must read it in detail, thanks again...
• Hell0: @darryn.ten i tryed your sugestion but i can't make it to run. Here is a kopy.io link kopy.io/jznY1