我正在尝试使用 kineticJS 在 HTML5 Canvas 上制作内存匹配游戏。但是当我点击舞台上的一张卡片时，它会给我一个
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>
最佳答案
这里有几个问题:
不要多次添加图层:
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(); }
关于javascript - KineticJS 未捕获类型错误 : Object #<Object> has no method 'drawScene' ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14683346/