Javascript function works the first time it is called but never the second time or any other time after that
Question
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 answers
solution1
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. So I think just removing entity = self; would fix that immediate problem.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.