Javascript函数在第一次调用时起作用，但在第二次或之后的任何其他时间都不会起作用
[英]Javascript function works the first time it is called but never the second time or any other time after that
问题描述
The code below is the code that I am working with where I'm trying to create a collision system that I plan to use in multiple projects. 
下面的代码是我正在尝试创建一个打算在多个项目中使用的碰撞系统的地方的代码。 But every time I try too create a second entity to test if the collision system works, it simply returns the following error. 但是每次我也尝试创建第二个实体来测试碰撞系统是否工作时，它只会返回以下错误。
ncaught TypeError: entity is not a function
at enemy (game.html:103)
at updated (game.html:110)
Code Segment 代码段
<DOCTYPE html>
<html>
<canvas id="can" width="600" height="600" style="border:2px solid #000000"></canvas>
<script language "JavaScript">
var can = document.getElementById("can").getContext("2d");
can.font = '20px Arial';
var HEIGHT = 610;
var WIDTH = 610;
var startTime = Date.now();
var frames = 0;
var score = 0;
var entitylist = [];
var entity = function(id,type,x,y,xspd,yspd,width,height,color) {
var self = {
id:id,
type:type,
x:x,
y:y,
xspd:xspd,
yspd:yspd,
width:width,
height:height,
color:color
};
self.draw = function() {
can.save();
can.fillStyle = self.color;
can.fillRect(self.x - self.width / 2,self.y - self.height / 2,self.width,self.height);
can.restore();
}
self.position = function() {
self.x = self.x + self.xspd;
self.y = self.y + self.yspd
if(self.x <= self.width-10) {
self.x = self.width;
self.xspd = -self.xspd;
self.x = self.x + self.xspd;
}
if(self.x >= WIDTH - self.width) {
self.x = WIDTH - self.width;
self.xspd = -self.xspd;
self.x = self.x + self.xspd;
}
if(self.y <= self.height-10) {
self.y = self.height;
self.yspd = -self.yspd;
self.y = self.y + self.yspd;
}
if(self.y >= HEIGHT - self.height) {
self.y = HEIGHT - self.height;
self.yspd = -self.yspd;
self.y = self.y + self.yspd;
}
}
squareCollison = function(sqr1,sqr) {
return sqr1.x <= sqr.x + sqr.width
&&sqr.x <= sqr1.x + sqr1.width
&&sqr1.y <= sqr.y + sqr.height
&&sqr.y <= sqr1.y + sqr1.height;
}
collisonTest = function(sqr1,sqr) {
var rect1 = {
x:sqr1.x - sqr1.width / 2,
y:sqr1.y - sqr1.height / 2,
width:sqr1.width,
height:sqr1.height
}
var rect2 = {
x:sqr.x - sqr.width / 2,
y:sqr.y - sqr.height / 2,
width:sqr.width,
height:sqr.height
}
return squareCollison(rect1,rect2);
}
self.update = function() {
self.position();
self.draw();
console.log('entity update')
}
entity = self;
entitylist[id] = self;
return self;
}
enemy = function() {
var id = Math.random();
var type = 'enemy';
var x = Math.random() * WIDTH;
var y = Math.random() * HEIGHT;
var xspd = 5 + Math.random() * 5;
var yspd = 5 + Math.random() * 5;
var width = 12 + Math.random()*10;
var height = 10 + Math.random()*10;
var color = 'red'
entity(id,type,x,y,xspd,yspd,width,height,color);
}
updated = function() {
can.clearRect(0,0,WIDTH,HEIGHT)
frames++;
if(frames % 50 === 0)
enemy();
for(E in entitylist){
entitylist[E].update(entity);
var collid = collisonTest(E,entitylist[E]);
if(collid){
console.log('colliding')
}
}
}
setInterval (updated,100);
</script>
</html>
1 个解决方案
解决方案1
1 2018-03-13 01:48:03
Towards the end of your entity function you reassign it to be the self object, this means that after the first time you call entity(...) it will no longer be a function, and will instead be the first self object that was created. 在entity函数的末尾，您将其重新分配为self对象，这意味着在您第一次调用entity(...) ，它将不再是函数，而将是创建的第一个self对象。 So I think just removing entity = self; 所以我认为只是去除entity = self; would fix that immediate problem. 可以解决当前的问题。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.