KineticJS Uncaught TypeError：Object＃<Object> has no method'drawScene'

我正在嘗試在HTML5畫布上製作一個記憶匹配遊戲，其編號爲kineticJS。但是當我點擊舞臺上的卡時，它給了我一個KineticJS Uncaught TypeError：Object＃<Object> has no method'drawScene'

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>

來源

2013-02-04 user2020852

夫婦的問題在這裏：

不要添加不止一次層更多：

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

來源

2013-02-04 09:41:21

KineticJS Uncaught TypeError：Object＃<Object> has no method'drawScene'

回答

相關問題