Search code examples
javascriptjqueryhtml5-canvaskineticjs

Uncaught TypeError: Cannot call method 'add' of undefined (Kinetic js)

I am trying to make a game where multiple circle objects are made by use of kineticjs.

Here's the html:

<!DOCTYPE html>
<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">
        <link rel="stylesheet" href="../css/style.css"/>
    </head>
    <body>
        <!--<canvas id="canvasRegn" width="600" height="450" style="margin:100px;"></canvas>-->
        <div id="container" style="width: auto; height: auto; background:#000; margin:auto; float:left;"></div>
        <script src="../js/jquery.min.js"></script>
        <script src="../js/kinetic-v5.0.0.min.js"></script>
        <script type="text/javascript" src="../js/rain2.js"></script>
    </body>
</html>

My logic in js is-> I push "enemy" (circular kineticjs objects) into the array "enemyArmada" which is done in the function "createEnemy()".

The the "draw" function is called every 35ms using a setInterval,where the required position and speed are altered to create the moving effect.

Here's the js code:

  var x = 0;
var y = 0;
var noOfEnemies = 2;
var enemyArmada = new Array();

createEnemy();

var stage = new Kinetic.Stage({
    container: 'container',
    width: window.innerWidth,
    height: window.innerHeight,
    listening: true
});
var layer = new Kinetic.Layer({
    listening: true
});

function createEnemy() {
    for (var i = 0; i < noOfEnemies; i++) {
        var enemy = new Kinetic.Circle({
            x: Math.random() * 1200,
            y: Math.random() * 5,
            radius: 6,
            fill: 'red',
            stroke: 'black',
            speed: 3 + Math.random() * 5
        });
        enemyArmada.push(enemy);
    }
//    setInterval(draw, 35);
    draw();
}


function draw() {
    for (var i = 0; i < noOfEnemies; i++)
    {
        console.log(enemyArmada[i].getPosition().x);
        enemyArmada[i].setPosition({x:enemyArmada[i].getPosition().x + 10, y:enemyArmada[i].getPosition().y + 10});
            console.log(enemyArmada[i].getPosition().x + "  " + enemyArmada[i].getPosition().y + "" + enemyArmada[i].speed);
       }
     layer.add(enemyArmada);
    layer.draw();
    stage.add(layer);
}

Here's the css:

html {
    color:#000;
    background:#222222;
}
a {
    cursor:pointer;
    list-style: none;
}
html, body {
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
    overflow: hidden;
}
html, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td {
    margin:0;
    padding:0;
}
#container {
    background:#000;
    margin:auto;
    cursor:none;
    float:left;
    width:auto;
    height: auto;
}

My ultimate aim is to create enemies like in this game: http://www.sinuousgame.com/

Here's the fiddle: http://jsfiddle.net/R3p5s/3/

Solution

  • You are calling the createEnemy before the layer object is created, so the variable layer value is undefined when createEnemy is called..

    var stage = new Kinetic.Stage({
    container: 'container',
    width: window.innerWidth,
    height: window.innerHeight,
    listening: true
});
var layer = new Kinetic.Layer({
    listening: true
});

//need to call it after the layer is created
createEnemy();

    Demo: Fiddle

    You also may want to read about hoisting