Malman35
Posts: 425
Joined: Sun Nov 30, 2014 4:51 am

Java script Game not working (sorta)

Sun Aug 09, 2015 12:09 pm

I just started learning javascript about a month ago and have self taught myself everything I know (online courses etc) so please be easy on me. I am a newbie to javascript. now to the point.

I found a tutorial on how to make a flappy bird clone and I followed it but it was not a beginner tutorial so I understand some of it and quite a bit of it I don't know why I really need it.
here is the link to the tutorial: http://blog.lessmilk.com/how-to-make-fl ... n-html5-1/

I understood enough to know how to change the difficulty and make 4 games
http://www.mem3500films.minksfamily.com/games.html

here is the html.

Code: Select all

<!DOCTYPE html>
<html>
<head>
    
  <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
  <title>MEM 3500 Films:Flappy LEGO</title>
  <meta charset="utf-8">



</head>
 <body style="background:url('lego.jpeg') #ffd700; font-size:25px">



<br><h1>Flappy LEGO: Easy</h1>
<br>

<div id="gameDiv"> </div>
<br><p> Press the spacebar to jump or click the JUMP button </p> 
 <br><button onclick="jump();" style="padding:60px;font-size:55px;color:#000000">JUMP</button>  
 <br>
  <br><a style="text-decoration:none; font-size:25px; color:#000000;" href="http://www.mem3500films.minksfamily.com/"><img src=home.png width="150" height="50" alt="Home" style="border:3px solid"></a>&nbsp; 
 <script type="text/javascript" src="phaser.min.js"></script>
    <script type="text/javascript" src="main.js"></script>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
</body>
</html>
and the javascript

Code: Select all

// Initialize Phaser, and create a 400x490px game
var game = new Phaser.Game(400, 490, Phaser.AUTO, 'gameDiv');

// Create our 'main' state that will contain the game
var mainState = {

    preload: function() { 
        // Change the background color of the game
        game.stage.backgroundColor = '#71c5cf';
  
        // Load the bird sprite
        game.load.audio('jump', 'assets/jump.wav'); 
        game.load.audio('hurt', 'assets/hurt.wav');   
        game.load.image('bird', 'assets/bird.png'); 
        game.load.image('pipe', 'assets/pipe.png'); 
    },

    create: function() { 
        this.hurtSound = game.add.audio('hurt'); 
        this.jumpSound = game.add.audio('jump');  
        this.score = 0;  
        this.labelScore = game.add.text(20, 20, "0", { font: "30px Arial", fill: "#ffffff" });  
        this.timer = game.time.events.loop(2000, this.addRowOfPipes, this);  
        this.pipes = game.add.group(); // Create a group  
        this.pipes.enableBody = true;  // Add physics to the group  
        this.pipes.createMultiple(20, 'pipe'); // Create 20 pipes 
        // Set the physics system
        game.physics.startSystem(Phaser.Physics.ARCADE);

        // Display the bird on the screen
        this.bird = this.game.add.sprite(100, 245, 'bird');

        // Add gravity to the bird to make it fall
        game.physics.arcade.enable(this.bird);
        this.bird.body.gravity.y = 1000;  

        // Call the 'jump' function when the spacekey is hit
        var spaceKey = this.game.input.keyboard.addKey(Phaser.Keyboard.SPACEBAR);
        spaceKey.onDown.add(this.jump, this);
     
    },

    update: function() {
        // If the bird is out of the world (too high or too low), call the 'restartGame' function
        if (this.bird.inWorld == false)
        this.restartGame();
        game.physics.arcade.overlap(this.bird, this.pipes, this.restartGame, null, this);  
    },

    addOnePipe: function(x, y) {  
        // Get the first dead pipe of our group
        var pipe = this.pipes.getFirstDead();

        // Set the new position of the pipe
        pipe.reset(x, y);
 
        // Add velocity to the pipe to make it move left
        pipe.body.velocity.x = -200; 

        // Kill the pipe when it's no longer visible 
        pipe.checkWorldBounds = true;
        pipe.outOfBoundsKill = true;
    },

    // Make the bird jump 
    jump: function() {  
        // Add a vertical velocity to the bird
        this.jumpSound.play();  
        this.bird.body.velocity.y = -300  ;
    },

    // Restart the game
    restartGame: function() {
        this.hurtSound.play();    
        // Start the 'main' state, which restarts the game
        game.state.start('main');
    },

    addRowOfPipes: function() {  
        // Pick where the hole will be
        var hole = Math.floor(Math.random() * 5) + 1;

        // Add the 6 pipes 
        for (var i = 0; i < 8; i++)
            if (i != hole && i != hole + 1) 
                this.addOnePipe(400, i * 60 + 10);  
        this.score += 1;  
        this.labelScore.text = this.score;   
    },


};

// Add and start the 'main' state to start the game
game.state.add('main', mainState);  
game.state.start('main');  
The game work fine when you use the space bar to jump but the button doesn't work. Could someone show me how to get it to work or if that is not possible, how to make the "bird" jump when you click the game screen area. Thanks in advance.

Malman35
Posts: 425
Joined: Sun Nov 30, 2014 4:51 am

Re: Java script Game not working (sorta)

Tue Aug 11, 2015 1:49 pm

Could someone please help me?

User avatar
xranby
Posts: 540
Joined: Sat Mar 03, 2012 10:02 pm
Contact: Website

Re: Java script Game not working (sorta)

Tue Aug 11, 2015 4:54 pm

Since you use the java script Phaser framework you probably want to use one of its input classes. Try find a Phaser tutorial on how to use the input classes.

http://phaser.io/docs#input

http://phaser.io/examples/v2/input/mouse-buttons
Xerxes Rånby @xranby I once had two, then I gave one away. Now both are in use every day!
twitter.com/xranby

Malman35
Posts: 425
Joined: Sun Nov 30, 2014 4:51 am

Re: Java script Game not working (sorta)

Wed Aug 12, 2015 6:36 am

xranby wrote:Since you use the java script Phaser framework you probably want to use one of its input classes. Try find a Phaser tutorial on how to use the input classes.

http://phaser.io/docs#input

http://phaser.io/examples/v2/input/mouse-buttons
Like I said I am a newbie soo.....
I checked it out but I am not sure how to add it into my code. :roll: could you please give me an example please.

Malman35
Posts: 425
Joined: Sun Nov 30, 2014 4:51 am

Re: Java script Game not working (sorta)

Thu Aug 13, 2015 9:43 am

Malman35 wrote: could you please give me an example please.
Pleassseeee!!!! :|

User avatar
xranby
Posts: 540
Joined: Sat Mar 03, 2012 10:02 pm
Contact: Website

Re: Java script Game not working (sorta)

Thu Aug 13, 2015 10:29 am

There are many excellent examples at
http://phaser.io/examples/v2/category/input
use them!

you need to change your application from registering an event like you have done with the key to actually poll the mouse in the render loop because you can not connect an event to the mouse button.

I will help you find examples, but you have to write the code yourself.
Xerxes Rånby @xranby I once had two, then I gave one away. Now both are in use every day!
twitter.com/xranby

User avatar
mahjongg
Forum Moderator
Forum Moderator
Posts: 13107
Joined: Sun Mar 11, 2012 12:19 am
Location: South Holland, The Netherlands

Re: Java script Game not working (sorta)

Thu Aug 13, 2015 10:31 am

Moved from java to other programming languages, as java script isn't java at all.

Heater
Posts: 15974
Joined: Tue Jul 17, 2012 3:02 pm

Re: Java script Game not working (sorta)

Thu Aug 13, 2015 11:26 am

Of course you can connect an event to a mouse button.

@Malman35

You have the following in your HTML:

<button onclick="jump();"......

The problem is you have no such jump() function.

Well, you do but it's buts it's not global it's inside the mainState object.

Change your HTML button to the following:

<button onclick="mainState.jump();"......

You may not know that there are a lot of very helpful JavaScript debugging tools inside the Chrome and Firefox browsers: On Chrome just right click on the web page and select "Inspect Element" Then select the "console" tab.

If you now reload and start using the page you will see any errors logged there in red. Like that missing jump function for example.

It is very helpful to develop Javascript in an editor with JS syntax highlighting and a linter. My current favourite is the Atom editor and it's jslint plugin. Very easy to install and works well.
Memory in C++ is a leaky abstraction .

Malman35
Posts: 425
Joined: Sun Nov 30, 2014 4:51 am

Re: Java script Game not working (sorta)

Fri Aug 14, 2015 12:24 am

Heater wrote:Of course you can connect an event to a mouse button.

@Malman35

You have the following in your HTML:

<button onclick="jump();"......

The problem is you have no such jump() function.

Well, you do but it's buts it's not global it's inside the mainState object.

Change your HTML button to the following:

<button onclick="mainState.jump();"......

You may not know that there are a lot of very helpful JavaScript debugging tools inside the Chrome and Firefox browsers: On Chrome just right click on the web page and select "Inspect Element" Then select the "console" tab.

If you now reload and start using the page you will see any errors logged there in red. Like that missing jump function for example.

It is very helpful to develop Javascript in an editor with JS syntax highlighting and a linter. My current favourite is the Atom editor and it's jslint plugin. Very easy to install and works well.
Ahh so that's why! It makes sense now! Thanks! Now I know how to work with it. Btw I have chromium on my pi so I can use the console thingy. Thanks again!

Return to “Other programming languages”