![](/img/trans.png)
[英]Google Maps JS: Uncaught TypeError: Cannot call method 'addDomListener' of undefined
[英]Uncaught TypeError: Cannot call method 'add' of undefined (Kinetic js)
我正在尝试制作一个通过使用dynamicjs制作多个圆形对象的游戏。
这是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”(循环动力学对象)推入数组“ enemyArmada”,这是通过函数“ createEnemy()”完成的。
使用setInterval每隔35毫秒调用一次“绘制”功能,在该位置更改所需的位置和速度以创建移动效果。
这是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/
您呼叫的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();
演示: 小提琴
您可能还想阅读有关吊装的信息
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.