Uncaught TypeError: Невозможно вызвать метод 'add' of undefined (Kinetic js)

Я пытаюсь создать игру, в которой объекты с несколькими кругами создаются с помощью kineticjs.Uncaught TypeError: Невозможно вызвать метод 'add' of undefined (Kinetic js)

Вот 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>

Моя логика в JS IS-> я нажимаю "вражеские" (круговые kineticjs объекты) в массив "enemyArmada", который делается в функции "createEnemy()" ,

Функция «нарисовать» вызывается каждые 35 мс с помощью setInterval, где требуемое положение и скорость изменяются для создания движущегося эффекта.

Вот код JS:

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

Вот 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; 
}

Моя конечная цель состоит в том, чтобы создать врагов, как в этой игре: http://www.sinuousgame.com/

Вот скрипка: http://jsfiddle.net/R3p5s/3/

источник

2014-01-31 Nevin Madhukar K

Вы вызываете createEnemy перед созданием объекта слоя, так что переменная layer значение не определено, когда createEnemy называется ..

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();

Демо: Fiddle

Вы также можете прочитать о hoisting

источник

2014-01-31 09:20:20

Ошибка, кажется, была удалена, thnx. Но красные предметы противника не движутся ... любая идея почему? Редактировать: Nevermind ... я получил его :) Thanx :) –

@NevinMadhukarK 'setInterval()' был прокомментирован? - http://jsfiddle.net/arunpjohny/jfGL6/2/ –

Yeh, я просто сделал это .. thnx :) –

Uncaught TypeError: Невозможно вызвать метод 'add' of undefined (Kinetic js)

ответ

Смежные вопросы