gameQuery error : Cannot read property 'children' of undefined

Question

I am new to JQuery and gameQuery so I have probably got lots of things wrong, please bear with me.

I was just following the tutorial to try to learn how to make web games but since the tutorial was slightly outdated, I needed to change some things. The problem is that I can't get my "game" to work. Here is my code:

var PLAYGROUND_HEIGHT = 250;
var PLAYGROUND_WIDTH = 700;
var FPS = 30;
var bg1speed = 0.5
var bg2speed = 2
var bg3speed = 8


$("#playground").playground({height: PLAYGROUND_HEIGHT, width: PLAYGROUND_WIDTH});

$("#playground").addGroup("background", {width: PLAYGROUND_WIDTH, height: PLAYGROUND_HEIGHT});
$("#playground").addGroup("actors", {width: PLAYGROUND_WIDTH, height: PLAYGROUND_HEIGHT});
$("#playground").addGroup("playerMissileLayer",{width: PLAYGROUND_WIDTH, height: PLAYGROUND_HEIGHT});
$("#playground").addGroup("enemiesMissileLayer",{width: PLAYGROUND_WIDTH, height: PLAYGROUND_HEIGHT});

var background2 = new $.gQ.Animation({imageURL: "data/background2.png"});
var background3 = new $.gQ.Animation({imageURL: "data/background3.png"});
var background4 = new $.gQ.Animation({imageURL: "data/background4.png"});
var background5 = new $.gQ.Animation({imageURL: "data/background5.png"});
var background1 = new $.gQ.Animation({imageURL: "data/background1.png"});
var background6 = new $.gQ.Animation({imageURL: "data/background6.png"});

$("#background").addSprite("background1", {animation: background1, width: PLAYGROUND_WIDTH, height: PLAYGROUND_HEIGHT});
$("#background").addSprite("background2", {animation: background2, width: PLAYGROUND_WIDTH, height: PLAYGROUND_HEIGHT, posx: PLAYGROUND_WIDTH});
$("#background").addSprite("background3", {animation: background3, width: PLAYGROUND_WIDTH, height: PLAYGROUND_HEIGHT});
$("#background").addSprite("background4", {animation: background4, width: PLAYGROUND_WIDTH, height: PLAYGROUND_HEIGHT, posx: PLAYGROUND_WIDTH});
$("#background").addSprite("background5", {animation: background5, width: PLAYGROUND_WIDTH, height: PLAYGROUND_HEIGHT});
$("#background").addSprite("background6", {animation: background6, width: PLAYGROUND_WIDTH, height: PLAYGROUND_HEIGHT, posx: PLAYGROUND_WIDTH});

$("#playground").registerCallback(function(){
 if($("#background1").x() <= -PLAYGROUND_WIDTH){
  $("#background1").x(PLAYGROUND_WIDTH, False);
 };
 if($("#background2").x() <= -PLAYGROUND_WIDTH){
  $("#background2").x(PLAYGROUND_WIDTH, False);
 };
 if($("#background3").x() <= -PLAYGROUND_WIDTH){
  $("#background3").x(PLAYGROUND_WIDTH, False);
 };
 if($("#background4").x() <= -PLAYGROUND_WIDTH){
  $("#background4").x(PLAYGROUND_WIDTH, False);
 };
 if($("#background5").x() <= -PLAYGROUND_WIDTH){
  $("#background5").x(PLAYGROUND_WIDTH, False);
 };
 if($("#background6").x() <= -PLAYGROUND_WIDTH){
  $("#background6").x(PLAYGROUND_WIDTH, False);
 };
 
 $("#background1").x(-bg1speed, true);
 $("#background2").x(-bg1speed, true);
 $("#background3").x(-bg2speed, true);
 $("#background4").x(-bg2speed, true);
 $("#background5").x(-bg3speed, true);
 $("#background6").x(-bg3speed, true);
}, FPS);

$("#playground").startGame()

<html>

    <head>
        <title>Test</title>
       <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
       <script src="http://gamequeryjs.com/jquery.gamequery.js"></script>
       <script src = "data/Test.js"></script>
    </head>

</html>

Actually, this snippet is showing a different error message to my error. That's strange.

Anyway, the error I am getting is this:

Uncaught TypeError: Cannot read property 'children' of undefined
at Object.waitForResources (jquery.gamequery.js:313)
at jquery.gamequery.js:306

Does anyone have any idea why this is happening?

Side note: I think gameQuery should throw many more custom exceptions, it would make it a lot easier for people like me to work out what we are doing wrong.

looks like jquery.gamequery.js isn't allowing me to include it on codepen for some reason, so I copied and pasted that code in this pen. I think you're getting the "children of undefined" error because this wants to build stuff on `#playground` and you don't have any html on the page. If you add `

` to the page, looks like it sorta works, though nothing actually shows up on the screen. If you inspect the page, it's doing a bunch of stuff, but nothing's displaying. https://codepen.io/anon/pen/rmXvrP — Michael Coker, May 31 '17 at 18:24
looks like it creates some animated background effects or something? anyways, hope that helps. — Michael Coker, May 31 '17 at 18:25

gameQuery error : Cannot read property 'children' of undefined

0 Answers0