Global variable in "window.VAR_NAME" construct returns error

programming web dev
1

Hello, I am working on a porting of my Python implementation of Pong to Javascript. I need to work with global variables - which I know are kind of a pain in JS. I decided to use the window.VAR_NAME construct. But this:

var window.canvasTag = document.getElementsByTagName('canvas')[0];

for some reason returns:

SyntaxError: Unexpected token '.'. Expected ';' after var declaration.

What am I missing?

Thank you

2

Remove the var text and just use window.canvasTag = … :slight_smile:

That should do the trick. All you are doing is adding a new property to the existing window object.

3

I dedided to use another function to enclose global variables. I am now trying to draw the paddle as a line but it does not work and when I try to access the paddle1 variable I am returned undefined. This is my code so far - thank you for your enlghtening solutions:

//global variables
function globals() {
    window.CANVASTAG = document.getElementsByTagName('canvas')[0];
    window.CANVAS = CANVASTAG.getContext('2d');
    window.HEIGHT = window.innerWidth;
};

//prototype objects
function Paddle([start_x, start_y], [end_x, end_y]) {
    this._paddle_line_start = [start_x, start_y],
    this._paddle_line_end = [end_x, end_y]
};

//prototype objects methods
Paddle.prototype.draw = function() {
    CANVAS.beginPath();
    CANVAS.lineWidth="2";
    CANVAS.strokeStyle="white";
    CANVAS.moveTo(this._paddle_line_start[0],this._paddle_line_start[1]);
    CANVAS.lineTo(this._paddle_line_end[0],this._paddle_line_end[1]);
    CANVAS.stroke();
};

//draw scene
function drawScene() {
    CANVASTAG.style.backgroundColor = 'blue';
    CANVASTAG.style.display = 'block';
    function resizeCanvas() {
        CANVASTAG.style.width = window.innerWidth + "px";
        setTimeout(function() {
            CANVASTAG.style.height = window.innerHeight + "px";
        }, 0);
    };
    window.onresize = resizeCanvas;
    resizeCanvas();

    //prototype objects instances
    var paddle1 = new Paddle([30, HEIGHT / 2 - 15], [30, HEIGHT / 2 + 15])
    paddle1.draw();
};

//call function scene on page load
window.onload = function() {
    globals();
    drawScene();
};
4

Did you set a breakpoint and step through the code to see where the flaw is happening? If you haven’t, that is a great way to figure out what may be wrong with your code. I use Chrome as my primary browser, and I recorded a video to explain how to set breakpoints and inspect your code using it: https://www.youtube.com/watch?v=k_G2kHiqU60

For more cases, the Chrome documentation is great: https://developer.chrome.com/devtools/docs/javascript-debugging

Let me know if that leads you in the right direction. If it doesn’t, reply back as well, and I can take a closer look :slight_smile:

Cheers,
Kirupa

5

Thank you Kirupa, that was really helpful to tackle a couple of mistakes in the code, but the white line I am trying to draw doesn’t show up. I believe there is just something in the way Javascript draws objects on the canvas that I am missing. Can you please have a look? Thank you very much for your contribute to my learning!

6

Did you fix this part?:

function Paddle([start_x, start_y], [end_x, end_y])

It should read something more like:

function Paddle(start, end)

7

Thank you krilnon, I posted the code above and that part is still function Paddle([start_x, start_y], [end_x, end_y]). Why is this incorrect?

Thank you!

8

JavaScript doesn’t implement parameter expansion in the way that Python does (it looks like what’s where you’re getting your inspiration). The way you invoke a function in JavaScript only ever translates into one set of arguments:

function f() { console.log(arguments); }
f([1, 2, 3], 1);
// {0: [1, 2, 3], 1: 1}

And JavaScript allows you to define named arguments of the function to take the values of arguments[0], arguments[1], etc. The arguments are never expanded out depending on the argument type and the signature of the function. function f([a, b, c], d) is simply not a supported syntax. You should see a SyntaxError: Unexpected token [ in the browser console. You’ve got a few options:

function Paddle(start, end) {
    this._paddle_line_start = start;
    this._paddle_line_end = end;
}
new Paddle([x1, y1], [x2, y2]);

function Paddle(start, end) {
    this._paddle_lne_start = [start.x, start.y];
    this._padde_line_end = [end.x, end.y];
}
new Paddle({x: x1, y: y1}, {x: x2, y: y2});

function Paddle(x1, y1, x2, y2) {
    this._paddle_line_start = [x1, y1];
    this._paddle_line_start = [x2, y2];
}
new Paddle(x1, y1, x2, y2);

Note that in the MDN documentation of Function the [ and ] in the constructor definition denote optional arg1 through argN, not literal brackets.

1 Like
9

Dear Icio, thank you so much for stopping by and trying to help out.

I understand what you mean. I refactored the code a bit and also changed the lines the way you suggested (3rd suggestion, exactly). The code now looks like the following - no luck in getting it to work, though:

 //initialize canvas and set globals
function initialize() {
    window.CANVASTAG = document.getElementsByTagName('canvas')[0];
    window.CANVAS = CANVASTAG.getContext('2d');
    window.HEIGHT = window.innerHeight;

    CANVASTAG.style.backgroundColor = 'blue';
    CANVASTAG.style.display = 'block';

    function resizeCanvas() {
        CANVASTAG.style.width = window.innerWidth + "px";
        setTimeout(function() {
            CANVASTAG.style.height = window.innerHeight + "px";
        }, 0);
    };
    window.onresize = resizeCanvas;
    resizeCanvas();
};

//prototype objects
function Paddle(start_x, start_y, end_x, end_y) {
    this._paddle_line_start = [start_x, start_y];
    this._paddle_line_end = [end_x, end_y];
};

//prototype objects methods
Paddle.prototype.draw = function() {
    CANVAS.beginPath();
    CANVAS.lineWidth="2";
    CANVAS.strokeStyle="white";
    CANVAS.moveTo(this._paddle_line_start[0],this._paddle_line_start[1]);
    CANVAS.lineTo(this._paddle_line_end[0],this._paddle_line_end[1]);
    CANVAS.stroke();
};

//draw scene
function drawScene() {
    //prototype objects instances
    var paddle1 = new Paddle(30, HEIGHT / 2 - 15, 30, HEIGHT / 2 + 15);
    paddle1.draw();
};

//call function scene on page load
window.onload = function() {
    initialize();
    drawScene();
};
10

I discovered that the post above actually works. The problem was that the canvasResize function, by doing a raw resize of the canvas, was in fact messing up the sizes and positions of my objects. I have temporarily given the canvas a fixed size and will attempt later at working on a solution to having the game full-size.

Thank you everybody for your help.

1 Like