Question

我正在尝试使用kineticJS在HTML5画布中制作一个内存匹配游戏。但是当我点击舞台上的一张卡片时它会给我一个

Uncaught TypeError: Object #<Object> has no method 'drawScene'

我无法弄明白为什么。它发生在我将事件监听器添加到makeCards函数并创建clicker()函数之后。

<!DOCTYPE HTML>
<html>
 <head>
    <script type="text/javascript" src="../JS/jquery.js"></script>
    <style>
      body {
        background-color: #333;
      }
      #container {
        margin: 0 auto;
        width: 500px;
        height: 500px;
        border-color: red;
        border-style: solid;
        border-width: 2px;
      }
    </style>
 </head>
  <body>
    <div id="container"></div>
    <script src="../JS/kinetic.js"></script>
<script>
//$(document).ready(function() {
var stage = new Kinetic.Stage({
    container: 'container',
    width: 500,
    height: 500,
    id: 'canvas'
});

var layer = new Kinetic.Layer();
var colors = ["Red","Blue","Green","Yellow","Orange",
"Purple","HotPink","Brown","Black","Grey",
"White","Cyan","Lime"];

function shuffle(myArray,nb_picks) {
    for (i = myArray.length-1; i > 1  ; i--) {
        var r = Math.floor(Math.random()*i);
        var t = myArray[i];
        myArray[i] = myArray[r];
        myArray[r] = t;
    }
    return myArray.slice(0,nb_picks);
}

function cardColors() {
    var colorString = [];
    var shuffledColors = shuffle(colors, 13);
    for (var i=0; i <= 9; i++) {
        colorString.push( shuffledColors[i]);
    }
    var a1 = colorString;
    var oldColorString = colorString.concat(a1);
    var newColorString = shuffle(oldColorString, 20);
    return newColorString;
}

var oldColorArray = cardColors();
var colorArray = oldColorArray.slice(0);

function makeCards(color) {
    var k = 0;
    for(var i=0; i <= 400; i += 100 ) {
        for(var j=0; j <= 300; j += 100) { 
            var rect = new Kinetic.Rect({
                x: i+5,
                y: j+5,
                width: 90,
                height: 90,
                fill: color,
                id: k 
              });
            rect.on('click', clicker);
            layer.add(rect);
            stage.add(layer);
            k++;
        }
    }
}
function clicker() {
    var i = this.attrs.id;
    var newRect = this.attrs;
    newRect.fill = colorArray[i];
    layer.add(newRect);
    stage.add(layer);
}
//start gameloop
function _init() {
    makeCards('MidnightBlue');
    //layer.clear();
    //setInterval(function(){ showCards() }, 5000);
    //showCards();
    //layer.clear();

}
_init();
//});
</script>
  </body>
</html>

Answer 1

这里有几个问题：

不要多次添加图层：

var layer = new Kinetic.Layer();
stage.add(layer);

不要尝试重新添加已添加的动力学对象：
```
function clicker() {
    var i = this.attrs.id;
    this.attrs.fill = colorArray[i];
    stage.draw();
}
```
这就是错误的来源：代码只是获取属性，修改一个值，并将其添加到子项中，就像它是一个动态对象一样。但事实并非如此。

最后，在初始化所有内容后进行绘制：

function _init() {
    makeCards('MidnightBlue');
    stage.draw();
}

KineticJS Uncaught TypeError：Object＃<object>没有方法'drawScene'</object>

1 个答案: