ok, let's go, i see 2 things:

first :

Bullet.prototype.draw = function(){
    bullet.update();
    for(b in bullets){
       ctxBullet.drawImage(bulletImage, jet1.getX(), jet1.getY());
       b.move(1,0);
    } 
}
 

you are referencing your bullet variable, the line:

bullet.update();

should be:

this.update();

so to use the current object. this way you can remove the bullet variable.

also, i was wrong on my other answer, the way to insert an item on a array on javascript is to call the push function, so:

bullets[bullets.length] = new CreateBullet(jet1.getX(),jet1.getY());

should instead be

bullets.push(new CreateBullet(jet1.getX(),jet1.getY())); 

sorry for that mistake

Thanks! Now I got rid of that bullet variable and changed to push. But it still freezes when the bullet is created :/

EDIT: I noticed that it's something with the bullet move function that freezes the game.

I also noticed that I forgot dx and dy as bullet variables, but it still doesn't work.

Well, I found some stupid things that I've done. Here's the present code as how it looks at the moment with not the "stupid" mistakes. It still freezes though!

var canvasJet = document.getElementById('canvasJet');
var ctxJet = canvasJet.getContext('2d');
var canvasBg = document.getElementById('canvasBg');
var ctxBg = canvasBg.getContext('2d');
var canvasBullet = document.getElementById('canvasBullet');
var ctxBullet = canvasBullet.getContext('2d');

var jet1 = Jet();
var bullets = new Array();
  

var requestAnimFrame =  window.requestAnimationFrame ||
                        window.webkitRequestAnimationFrame ||
                        window.mozRequestAnimationFrame ||
                        window.msRequestAnimationFrame ||
                        window.oRequestAnimationFrame;

var background = new Image();
background.src = 'images/background.png';
background.addEventListener('load', init, false);

var plane = new Image();
plane.src = 'images/PlaneLeft.gif';
plane.addEventListener('load', init, false);

var bulletImage = new Image();
bulletImage.src = 'images/Bullet.gif';
bulletImage.addEventListener('load', init, false);


// main functions
function init() {
     
    loop();
    document.addEventListener('keydown', checkKeyDown, false);
    document.addEventListener('keyup', checkKeyUp, false);
}

function loop() { 
       ctxBg.drawImage(background, 0, 0);
        jet1.draw();
        jet1.move();
        jet1.drawBullets();
        requestAnimFrame(loop);   
}

function clearCtxBg() {
    ctxBg.clearRect(0, 0, 800, 600);
    
}
// end of main functions

// My jet code
function Jet()
{
  var x = 200;
  var y = 300 ;
  var dx = 0;
  var dy = 0 ;

   var Jet = function()
   {
  
   }

   Jet.prototype.draw = function(){
     jet1.update();
     ctxJet.drawImage(plane, x, y); 
      
   }

   Jet.prototype.drawBullets = function(){
     for(b in bullets){
                ctxBullet.drawImage(bulletImage, jet1.getX(), jet1.getY());
                 b.move();
           } 
      
   }

 Jet.prototype.setDX = function(speed)
   {
       dx = speed;
      
   }
Jet.prototype.setDY = function(speed)
   {
       dy = speed;   
   }

   Jet.prototype.getX = function()
   {
      return x;
   }
   
   Jet.prototype.getY = function()
   {
      return y;
   }
   
   Jet.prototype.update = function(){
      ctxJet.clearRect(0, 0, 800, 600);
      ctxBullet.clearRect(0, 0, 800, 600);
   }

   Jet.prototype.move = function()
   {
      x += dx;
      y += dy;
      return this;
   }
   return new Jet();
}
// End of jet code

// My bullet code
function CreateBullet(startX, startY)
{
   var x = startX;
   var y = startY;
   var dx = 0;
   var dy = 0;

   var CreateBullet = function()
   {
   }

   CreateBullet.prototype.getX = function()
   {
      return x;
   }

   CreateBullet.prototype.getY = function()
   {
      return y;
   }
   
   CreateBullet.prototype.move = function()
   {
      x += dx;
      y += dy;
      return this;
   }
   return new CreateBullet();
}
// End of bullet code

// Keyboard code
function checkKeyDown(e) {
    var keyID = e.keyCode || e.which;
    if (keyID === 38 ) { //up arrow      
       jet1.setDY(-1); 
    }
    if (keyID === 39 ) { //right arrow  
      jet1.setDX(1);
     bullets.push(new CreateBullet(jet1.getX(),jet1.getY())); 
    }
    if (keyID === 40 ) { //down arrow   
        jet1.setDY(1);  
    }
    if (keyID === 37 ) { //left arrow 
       jet1.setDX(-1);
    }
    if (keyID === 87) { //W key
       
    }
}

function checkKeyUp(e) {
    var keyID = e.keyCode || e.which;
    if (keyID === 38 ) { //up arrow 
    jet1.setDY(0);
    }
    if (keyID === 39 ) { //right arrow 
    jet1.setDX(0);
    }
    if (keyID === 40 ) { //down arrow 
   jet1.setDY(0);
    }
    if (keyID === 37 ) { //left arrow 
 jet1.setDX(0);
    }
    if (keyID === 87) { //W key
       
    }
}

// end of keyboard code

try changing your function CreateBullet(startX, startY) to this:

function drawBullets(jet, bullets) {
    for (b in bullets) {
        b.update();
        ctxBullet.drawImage(bulletImage, jet.getX(), jet.getY());
        b.move(1, 0);
    }
}

function CreateBullet(startX, startY) {
    return {
        x: startX,
        y: startY,
        getX: function () {
            return this.x;
        },
        getY: function () {
            return this.y;
        },
        update: function () {
            ctxBullet.clearRect(0, 0, 800, 600);
        },
        move: function (dx, dy) {
            this.x += dx;
            this.y += dy;
        }

    }
}

i just noticed that you are drawing all the bullets on the draw method, not sure if this is causing the freezing, but it's better to just move it out before it causes a infinite loop...

what i did to your CreateBullet function was change it to make use of javascript object notation. this is really intrusive on your code, but i can explain better what was happening...

each time that you use a line like this:

Bullet.prototype.something = ...

you are adding the function/variable to the Bullet function prototype.

what does that mean? well, in javascript, even functions are objects. in this line:

var Bullet = function(){}

you're saying that Bullet is a function with no body. when you use

return new Bullet();

you are calling the function Bullet, that does nothing and returns undefined.

now, with the JSON notation i provided above, you are returning an object that has all the things defined between the { and }, even the variables.

this approach is more simillar to java, so you should get it better...

again, i'm no professional javascript programmer, i only use it on web projects, so i may be missing something.

Thanks for following the thread and helping me out! I would like to keep my current design as much as possible though (because I feel very comfortable with the code as it is by now and similar stuff) and when I feel that it's really impossible to solve it with my solution then I will of course try something else. I feel that it's just a small thing that need to be changed. Don't you think so?

I found out that EVERYTIME I try to reach a bullet method, then the game freezes. There is a problem with reaching the bullet methods in general. Will that help something?!

I thought this code would be an infinite loop, but oddly enough it works.

Even though it works, you should name the prototype differently. It should be a Bullet prototype.

// My bullet code
function CreateBullet(startX, startY)
{
   var x = startX;
   var y = startY;
   var dx = 0;
   var dy = 0;

   var CreateBullet = function()
   {
   }

   CreateBullet.prototype.getX = function()
   {
      return x;
   }

   CreateBullet.prototype.getY = function()
   {
      return y;
   }
   
   CreateBullet.prototype.move = function()
   {
      x += dx;
      y += dy;
      return this;
   }
   return new CreateBullet();
}

You mean when I had the draw-function in the bullet class? But then I found it hard to "run" the draw-function in the loop-function. Or what would you suggest?

I see that you had this at first:

// My bullet code
function CreateBullet(startX, startY)
{
   var x = startX;
   var y = startY;

   var Bullet = function()
   {
   }

   Bullet.prototype.draw = function(){
     bullet.update();
          for(b in bullets){
                ctxBullet.drawImage(bulletImage, jet1.getX(), jet1.getY());
                 b.move(1,0);
           } 
   }

   Bullet.prototype.getX = function()
   {
      return x;
   }

   Bullet.prototype.update = function(){
      ctxBullet.clearRect(0, 0, 800, 600);
   }
   
   Bullet.prototype.getY = function()
   {
      return y;
   }
   
   Bullet.prototype.move = function(dx,dy)
   {
      x += dx;
      y += dy;
   }
   return new Bullet();
}

Which is fine, but I see a bug in the draw function. I'm sure you can spot it too. You are using bullet.update() but it should be this.update();

bullets.push(new CreateBullet(jet1.getX(),jet1.getY()));

Based on the CreateBullet function, that code will result in a bug. It should be:

bullets.push(CreateBullet(jet1.getX(),jet1.getY()));

Just have to drop the new

Didn't really work.

But how shall I draw them in that case? The jet is easy because then I created a variable named jet1 and used jet1.draw() and put it in the loop-function. But I don't get how to do with an array. If i do a for-loop and loop through the bullets then it freezes. This is how it looks now and it still doesn't work:

var canvasJet = document.getElementById('canvasJet');
var ctxJet = canvasJet.getContext('2d');
var canvasBg = document.getElementById('canvasBg');
var ctxBg = canvasBg.getContext('2d');
var canvasBullet = document.getElementById('canvasBullet');
var ctxBullet = canvasBullet.getContext('2d');

var jet1 = Jet();
var bullets = new Array();
  

var requestAnimFrame =  window.requestAnimationFrame ||
                        window.webkitRequestAnimationFrame ||
                        window.mozRequestAnimationFrame ||
                        window.msRequestAnimationFrame ||
                        window.oRequestAnimationFrame;

var background = new Image();
background.src = 'images/background.png';
background.addEventListener('load', init, false);

var plane = new Image();
plane.src = 'images/PlaneLeft.gif';
plane.addEventListener('load', init, false);

var bulletImage = new Image();
bulletImage.src = 'images/Bullet.gif';
bulletImage.addEventListener('load', init, false);


// main functions
function init() {
     
    loop();
    document.addEventListener('keydown', checkKeyDown, false);
    document.addEventListener('keyup', checkKeyUp, false);
}

function loop() { 
       ctxBg.drawImage(background, 0, 0);
        jet1.draw();
        jet1.move();
        for(k in bullets){
          k.draw();
        }
        requestAnimFrame(loop);   
}

function clearCtxBg() {
    ctxBg.clearRect(0, 0, 800, 600);
    
}
// end of main functions

// My jet code
function Jet()
{
  var x = 200;
  var y = 300 ;
  var dx = 0;
  var dy = 0 ;

   var Jet = function()
   {
  
   }

   Jet.prototype.draw = function(){
     jet1.update();
     ctxJet.drawImage(plane, x, y); 
      
   }

   

 Jet.prototype.setDX = function(speed)
   {
       dx = speed;
      
   }
Jet.prototype.setDY = function(speed)
   {
       dy = speed;   
   }

   Jet.prototype.getX = function()
   {
      return x;
   }
   
   Jet.prototype.getY = function()
   {
      return y;
   }
   
   Jet.prototype.update = function(){
      ctxJet.clearRect(0, 0, 800, 600);
     // ctxBullet.clearRect(0, 0, 800, 600);
   }

   Jet.prototype.move = function()
   {
      x += dx;
      y += dy;
      return this;
   }
   return new Jet();
}
// End of jet code

// My bullet code
// My bullet code
function Bullet(startX, startY)
{
   var x = startX;
   var y = startY;

   var Bullet = function()
   {
   }

   Bullet.prototype.draw = function(){
     this.update();
          for(b in bullets){
                ctxBullet.drawImage(bulletImage, jet1.getX(), jet1.getY());
                 b.move(1,0);
           } 
   }

   Bullet.prototype.getX = function()
   {
      return x;
   }

   Bullet.prototype.update = function(){
      ctxBullet.clearRect(0, 0, 800, 600);
   }
   
   Bullet.prototype.getY = function()
   {
      return y;
   }
   
   Bullet.prototype.move = function(dx,dy)
   {
      x += dx;
      y += dy;
   }
   return new Bullet();
}
// End of bullet code

// Keyboard code
function checkKeyDown(e) {
    var keyID = e.keyCode || e.which;
    if (keyID === 38 ) { //up arrow      
       jet1.setDY(-1); 
    }
    if (keyID === 39 ) { //right arrow  
      jet1.setDX(1);
     bullets.push(Bullet(jet1.getX(),jet1.getY())); 
    }
    if (keyID === 40 ) { //down arrow   
        jet1.setDY(1);  
    }
    if (keyID === 37 ) { //left arrow 
       jet1.setDX(-1);
    }
    if (keyID === 87) { //W key
       
    }
}

function checkKeyUp(e) {
    var keyID = e.keyCode || e.which;
    if (keyID === 38 ) { //up arrow 
    jet1.setDY(0);
    }
    if (keyID === 39 ) { //right arrow 
    jet1.setDX(0);
    }
    if (keyID === 40 ) { //down arrow 
   jet1.setDY(0);
    }
    if (keyID === 37 ) { //left arrow 
 jet1.setDX(0);
    }
    if (keyID === 87) { //W key
       
    }
}

// end of keyboard code