未捕获的TypeError：无法调用undefined的方法'添加'（动态JS）答案

【问题标题】：Uncaught TypeError: Cannot call method 'add' of undefined (Kinetic js)未捕获的TypeError：无法调用undefined的方法'添加'（动态JS）
【发布时间】：2014-02-23 22:05:15
【问题描述】：

我正在尝试制作一个使用 kineticjs 制作多个圆形对象的游戏。

这是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 中的逻辑是-> 我将“enemy”（圆形 kineticjs 对象）推入数组“enemyArmada”，这是在函数“createEnemy()”中完成的。

使用 setInterval 每 35 毫秒调用一次“draw”函数，在此更改所需的位置和速度以创建移动效果。

这是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/

【问题讨论】：

标签： javascript jquery html5-canvas kineticjs

【解决方案1】：

您在创建图层对象之前调用了createEnemy，因此在调用createEnemy 时变量layer 的值未定义..

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

【讨论】：

错误似乎已被删除，thnx。但是红色的敌方物体并没有移动……知道为什么吗？编辑：没关系...我明白了:)谢谢:)
@NevinMadhukarK setInterval() 被评论了？ - jsfiddle.net/arunpjohny/jfGL6/2
是的，我刚刚做到了.. thnx :)