When setInterval
calls moveBullet
, the this
value will not be the bullet, it will be window
. Try binding the function to the bullet using the following:
setInterval(bullets[bullets.length - 1].moveBullet.bind(bullets[bullets.length - 1]), 25);
see This link for more info.
Edit: updating with more fixes:
You should show the console in you browser (F12 in most browsers). This will list some errors you are having.
- drawBullet uses
x
andy
that aren't defined. UsespaceShip.x
andspaceShip.y
instead. - newBullet uses
angle
, which isn't defined anywhere - newBullet tried to use the
movebullet
function. It should bemoveBullet
- drawImage needs an image, canvas, or video element - it doesn't take a URL.
Edit(2): More fixes There are still several problems to fix.
- One is that you still haven't changed the call to ctx.drawImage to pass an image element rather than a URL.
- Another is your move function is multiplying the x and y values by the speed. That means that as soon as the bullet moves, it is off the screen.
- A third problem is that the
render
function updates the entire background, which means that the bullet, even if it was drawn would immediately get overwritten. You should move the actual bullet drawing to the render function.
I have updated your original JSFiddle with some of these fixes, enough to get it drawing (without erasing). You can find it here. I also changed it to just have 1 bullet per space press (to help with debugging).
At the moment, I just made it stop drawing the background, so that you can see the bullet, but you should look at moving the bullet drawing (not moving) to the render function.