CODEWITHSUNDEEP
javascriptfunctioncalltypeerror
JohnnyBoyy
JohnnyBoyy

Reputation: 1

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>

Upvotes: 0

Views: 529

Answers (1)

theleebriggs
theleebriggs

Reputation: 571

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.

Upvotes: 1

Related Questions