22 replies to this topic

[Patriarch K]

I have a strange problem with javascript at the moment. I'm so much used to Java so I get very frustated when it doesn't work out in the same way. I have a function Jet that is a plane which I try to move. Then I have the x += dx; in my move-function as usual.

dx is 0 at the beginning. When I change it to 1 or 2 or something it works fine and my Jet moves, but I want to start with 0 and then I want to change dx to 1 when pressing the keyboard. That is no problem at all in Java, but this I don't understand. Nothing happens...

At the top I have 

var jet1 = Jet();

 

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.getX = function()
   {
      return x;
   }
   
   Jet.prototype.getY = function()
   {
      return y;
   }
   
   Jet.prototype.update = function(){
    ctxJet.clearRect(0, 0, 800, 600);
   }

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

// And here is the keyboard which doesn't work (the keyboard input works, but not the variable change)

function checkKeyDown(e) {
    var keyID = e.keyCode || e.which;
    if (keyID === 38 ) { //up arrow     
        jet1.setDX = 1;
        jet1.dx = 1;    
    }
}

 

How am I supposed to solve this? I can't reach and change the variable.

Edited by Patriarch K, 25 February 2013 - 04:21 PM.

[ApochPiQ]

Your variables, as written, belong to the Jet() function, not to the Jet object which it constructs and returns.

[Dan Mayor]

Remove the top level function Jet().

 

function Jet()

{

  // We're inside a function now

 

  var Jet = function()

  {

  }

  

  // the var jet ONLY exists within this function

}

 

Jet now means the top level function Jet() NOT your variable, you have no access to the Jet variable.

[Patriarch K]

I tried to remove the top level but it stopped working. Maybe I have to change more things. Since I'm quite new to this it would be nice if you could give an example of how I shall fix this by using my existing code. That would be very nice!

Can it be an idea to use the "this"-word or something? I don't get that word exactly but I've seen it before. How shall i structure this code to make it work like above in the easiest way? I'm going to make a bullet "class" as well so I need to have values for every object in my bullet "class". Every bullet will have to have it's own dx value and so on so I don't think it works by making the variable global...or?

Edited by Patriarch K, 26 February 2013 - 04:34 AM.

[Mito]

declare the variables the same way you declare the Jet functions, Jet.prototype.x as an example.

 

i'm no javascript programmer, but i would use json for this:

 

var Jet = function(){
     return {
           x: 0,
           y: 0,
           dx: 0,
           dy: 0,
           draw: function(){
               this.update();
               ctxJet.drawImage(plane, x, y);
            }
            ...
     };
};
 

also, AFAIK, there's no concept of private fields on javascript, so x, y, dx and dy will be accessible directly, with no need for get's and set's, but, again, i'm not a javascript programmer, i only use it for simple web stuff.

 

 

EDIT: just noticed this line:

 

jet1.setDX = 1;

 

didn't you mean jet1.setDX(1); ? what you are doing there is trying to overwrite setDX with the value 1, i doubt that this is what you want...

Edited by Mito, 26 February 2013 - 04:49 AM.

[EmployeeNumber8]

As Mito pointed out. Your bug is here:

function checkKeyDown(e) {
    var keyID = e.keyCode || e.which;
    if (keyID === 38 ) { //up arrow     
        jet1.setDX = 1;
        jet1.dx = 1;    
    }
}

 

jet1.setDX is a function, so you have to go jet1.setDX(1);

jet1.dx is "private", so you can't access it that way.

[EmployeeNumber8]

Since you start out with...

 

var jet1 = Jet();

 

then that means in following code there is potential bug, can you spot it?

 

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

 

 

What if you create another jet with var jet2 = Jet(); 

[Patriarch K]

Yes of course, it was a fatal and clumsy mistake to write setDX = 1. Of course it is supposed to be setDX(1);

That works just fine! Thanks for seeing that.

 

I have a new question and I can maybe use this thread for that question too.

I want to make my bullet array but I don't really get it. If it was Java, then I would have done:

ArrayList<Bullet> bullets = new ArrayList<Bullet>();

And then:

for(Bullet b : bullets){

drawImage(b.getImage(), b.getX(), b.getY());

b.move();

}

And then when pressing the fire button I would have done:

bullets.add(new Bullet(x,y));

 

I don't really get how to do this in JavaScript. My bullet code looks kind of exactly like my Jet code above here in this thread. Do you have an idea of how to do this in JavaScript?

[Mito]

something like:

 

 

var bullets = new Array();

for(b in bullets){
     drawImage(b.getImage(), b.getX(), b.getY());
     b.move();
}
 

 

 

to add a bullet:

 

 

bullets[bullets.length] = new Bullet(x,y);
 

 

Some concerns:

 

1. i heard somewhere that the for.. in loop is ineficient, you might want to use a plain for,

2. AFAIK arrays in javascript are dynamic, they can hold any data type, there's no fixed length and they can hold different data types.

3. a good resource for javascript: http://w3schools.com/js/default.asp

[Patriarch K]

Thanks a lot for that information. I'm almost there, it's just something that goes wrong. When it creates the bullet then the game freezes. I'd better post my whole game code. Ignore everything except the bullet code. Can you see what's wrong? If you look at the comments I've made then you can see at the top that I somehow need that bullet variable that I've created. I don't know why. Can someone see the problem? I'm almost there so it should be something very small to fix which I can't see:

 

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();
//This bullet variable is not supposed to be there, but if I remove it then it doesn't work
var bullet = CreateBullet(200,200);
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();
        bullet.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);
   }

   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 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();
}
// 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[bullets.length] = 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

Edited by Patriarch K, 27 February 2013 - 12:33 PM.

[Mito]

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

[Patriarch K]

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.

Edited by Patriarch K, 27 February 2013 - 01:13 PM.

[Patriarch K]

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

Edited by Patriarch K, 27 February 2013 - 01:19 PM.

[Mito]

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.

[Patriarch K]

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?!

[EmployeeNumber8]

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();
}

Edited by EmployeeNumber8, 28 February 2013 - 08:10 AM.

[Patriarch K]

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?

[EmployeeNumber8]

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();

[EmployeeNumber8]

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

[Patriarch K]

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

Edited by Patriarch K, 27 February 2013 - 02:39 PM.