13 Replies - 600 Views - Last Post: 16 August 2019 - 02:40 AM

#1 Codeqataru   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 8
  • Joined: 12-August 19

Javascript fruit game logic problem

Posted 13 August 2019 - 06:07 AM

I have a fruit ninja style game I have made as a part of my Javascript learning process. There are no errors in the console but my game hangs up randomly. I am certain this has something to do with the startFruits function but I can't find out exactly what it is. Here is the JS code:

$(function() {
    var playing = false;
    var score;
    var livesLeft;
    var fruits = ["https://i.ibb.co/ctYTJjV/apple.png", "https://i.ibb.co/cFVSqn9/Banana.png", "https://i.ibb.co/bNrFbcL/cherries.png", "https://i.ibb.co/Stm5xRd/grapes.png", "https://i.ibb.co/GT77Zdg/Lemon.png", "https://i.ibb.co/9mxmGJM/Orange.png", "https://i.ibb.co/NpWSHdD/Pear.png", "https://i.ibb.co/Nt5LP4G/Strawberry.png", "https://i.ibb.co/Gd5BpVP/watermelon.png"];
    var speed;
    var action;
    // click on start/reset
    //are we playing?
    //yes
    $("#startreset").click(function() {
        if (playing == true) {
            //reload page
            location.reload();
        } else {
            //game initialize
            playing = true;
            //set score to 0
            score = 0;
            $("#scoreValue").html(score);
            //show lives left
            $("#Lives").show();
            livesLeft = 3;
            addLives();
            $("#gameOver").hide();
            //change button text to reset
            $("#startreset").html("Reset Game");
            //send fruits
            startFruits();
        }
    });

    $("#fruit1").click(function() {
        score++;
        $("#scoreValue").html(score); //update score
        //document.getelementbyid("#fruitsplode").play();
        $("#fruitsplode")[0].play(); //play sound
        //stop fruit
        clearInterval(action);
        $("#fruit1").hide("explode", 500);
        //send new fruit
        setTimeout(startFruits, 500);
    });

    function addLives() {
        $("#Lives").empty();
        for (i = 0; i < livesLeft; i++) {
            $("#Lives").append('<img src="https://i.ibb.co/C52Mqk9/heartest.png" class="lifeh">');
        }
    }

    function startFruits() {
        $("#fruit1").show();
        chooseFruit(); //select from pool of fruit
        //random position
        $("#fruit1").css({
            "left": Math.round(Math.random() * 550),
            "top": -50
        });

        //create random speeds
        speed = 1 + Math.round(Math.random() * 5);
        //move fruits down every 10ms
        action = setInterval(function() {
            $("#fruit1").css("top", $("#fruit1").position().top + speed);
            //is the fruit too low to click?
            if ($("#fruit1").position().top > $("#fruitBasket").height()) {
                if (livesLeft > 1) {
                    $("#fruit1").show();
                    chooseFruit(); //select from pool of fruit
                    //random position
                    $("#fruit1").css({
                        "left": Math.round(Math.random() * 550),
                        "top": -50
                    });

                    //create random speeds
                    speed = 1 + Math.round(Math.random() * 5);
                    //reduce lives
                    livesLeft--;
                    //repopulate lives
                    addLives();
                } else {
                    //game over
                    playing = false;
                    $("#startreset").html("Start Game");
                    $("#gameOver").show();
                    $("#gameOver").html("<p>Game Over!</p><p>Your score is " + score + "</p>");
                    $("#Lives").hide();
                    stopAction();
                }
            }
        }, 10);
    }

    function chooseFruit() {
        //generate fruit
        $("#fruit1").attr("src", fruits[Math.round(Math.random() * 9)]);
    }

    //stop fruits
    function stopAction() {
        clearInterval(action);
        $("#fruit1").hide();
    }

});



Is This A Good Question/Topic? 0
  • +

Replies To: Javascript fruit game logic problem

#2 DarenR   User is offline

  • D.I.C Lover

Reputation: 634
  • View blog
  • Posts: 4,201
  • Joined: 12-January 10

Re: Javascript fruit game logic problem

Posted 13 August 2019 - 06:22 AM

it will be almost impossible to tell what is wrong with this because as you say - it is random and you dont tell us where it hangs up.. is it always in the same spot of the game?
Was This Post Helpful? 0
  • +
  • -

#3 Codeqataru   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 8
  • Joined: 12-August 19

Re: Javascript fruit game logic problem

Posted 13 August 2019 - 06:25 AM

View PostDarenR, on 13 August 2019 - 06:22 AM, said:

it will be almost impossible to tell what is wrong with this because as you say - it is random and you dont tell us where it hangs up.. is it always in the same spot of the game?


It's at random spots while gaming. I will give you the link to the game so you can see. Sometimes it's after 3 fruits, sometimes 10.

https://codepen.io/C...taru/pen/YMWyOm
Was This Post Helpful? 0
  • +
  • -

#4 Codeqataru   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 8
  • Joined: 12-August 19

Re: Javascript fruit game logic problem

Posted 15 August 2019 - 06:27 AM

If there is any other information I can give please let me know. I spent a couple of hours yesterday looking over the code and I still can't see where I am wrong. I had an error with some other content because I had a library pointing to the wrong area but this one is still doing my head in.
Was This Post Helpful? 0
  • +
  • -

#5 modi123_1   User is online

  • Suitor #2
  • member icon



Reputation: 15219
  • View blog
  • Posts: 60,921
  • Joined: 12-June 08

Re: Javascript fruit game logic problem

Posted 15 August 2019 - 07:50 AM

It's hard to guess without narrowing things down or giving more information on how to make the error happen. I let it run for 200 lives and nothing.

Perhaps put console write lines in your function to see what the last thing was to trigger before it hangs.
Was This Post Helpful? 0
  • +
  • -

#6 Codeqataru   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 8
  • Joined: 12-August 19

Re: Javascript fruit game logic problem

Posted 15 August 2019 - 07:58 AM

View Postmodi123_1, on 15 August 2019 - 07:50 AM, said:

It's hard to guess without narrowing things down or giving more information on how to make the error happen. I let it run for 200 lives and nothing.

Perhaps put console write lines in your function to see what the last thing was to trigger before it hangs.


Running is not the issue. It happens when you are actually playing the game and clicking the fruits. If you want to downvote me for not mentioning that I don't blame you. I thought people would actually play it rather than let it run. I suppose I could check if it is happening organically by giving myself 25 lives and checking that.

View Postmodi123_1, on 15 August 2019 - 07:50 AM, said:

It's hard to guess without narrowing things down or giving more information on how to make the error happen. I let it run for 200 lives and nothing.

Perhaps put console write lines in your function to see what the last thing was to trigger before it hangs.

Console write lines are something I will have to look at how to do.

View Postmodi123_1, on 15 August 2019 - 07:50 AM, said:

It's hard to guess without narrowing things down or giving more information on how to make the error happen. I let it run for 200 lives and nothing.

Perhaps put console write lines in your function to see what the last thing was to trigger before it hangs.


Did the 25 lives thing it is definitely an on click issue.
Was This Post Helpful? 0
  • +
  • -

#7 modi123_1   User is online

  • Suitor #2
  • member icon



Reputation: 15219
  • View blog
  • Posts: 60,921
  • Joined: 12-June 08

Re: Javascript fruit game logic problem

Posted 15 August 2019 - 07:59 AM

Why do you think you would get a downvote?

I mean sure.. I scrubbed out the web calls and used local images.. clicked on a few for half a minute or so and didn't see an issue.
Was This Post Helpful? 0
  • +
  • -

#8 Codeqataru   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 8
  • Joined: 12-August 19

Re: Javascript fruit game logic problem

Posted 15 August 2019 - 08:05 AM

View Postmodi123_1, on 15 August 2019 - 07:59 AM, said:

Why do you think you would get a downvote?

I mean sure.. I scrubbed out the web calls and used local images.. clicked on a few for half a minute or so and didn't see an issue.

I come from stack overflow and they love downvoting noobs on the basis of inexperience alone. It may have to do with the web calls then because on the codepen site a few of my friends have gotten the game frozen. I need to see how to avoid that and have it function. Seems like it should be possible. I wanted to add bombs and stuff and possibly levels of difficulty but that would probably be better hosted myself than linking externally and having these issues.
Was This Post Helpful? 0
  • +
  • -

#9 modi123_1   User is online

  • Suitor #2
  • member icon



Reputation: 15219
  • View blog
  • Posts: 60,921
  • Joined: 12-June 08

Re: Javascript fruit game logic problem

Posted 15 August 2019 - 08:08 AM

If you are not getting the freezing, or what ever, locally but only on codepen then yeah, that seems to be a good indicator something off is happening there.

Slap it on your own hosting to clear up codepen issues.
Was This Post Helpful? 1
  • +
  • -

#10 ArtificialSoldier   User is offline

  • D.I.C Lover
  • member icon

Reputation: 2365
  • View blog
  • Posts: 7,219
  • Joined: 15-January 14

Re: Javascript fruit game logic problem

Posted 15 August 2019 - 09:30 AM

If you can't see the problem then you can't really fix it. If you're running it in some other environment, like Codepen, then like modi says you should eliminate that as a potential source of problems. Run it in the environment that you're designing it for.
Was This Post Helpful? 1
  • +
  • -

#11 Codeqataru   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 8
  • Joined: 12-August 19

Re: Javascript fruit game logic problem

Posted 15 August 2019 - 11:44 AM

View PostArtificialSoldier, on 15 August 2019 - 09:30 AM, said:

If you can't see the problem then you can't really fix it. If you're running it in some other environment, like Codepen, then like modi says you should eliminate that as a potential source of problems. Run it in the environment that you're designing it for.

I have uploaded everything to my website and I am still having the freezing problem while playing the game and gaining points. I am going to try logging things like modi said and pin down what my last action is before the error.

http://cuencdev.me/g...fruit_game.html
Was This Post Helpful? 0
  • +
  • -

#12 modi123_1   User is online

  • Suitor #2
  • member icon



Reputation: 15219
  • View blog
  • Posts: 60,921
  • Joined: 12-June 08

Re: Javascript fruit game logic problem

Posted 15 August 2019 - 11:46 AM

and the steps! Actively look at what you are doing, what teh state of the game is, and be able to repeat it.
Was This Post Helpful? 1
  • +
  • -

#13 Codeqataru   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 8
  • Joined: 12-August 19

Re: Javascript fruit game logic problem

Posted 15 August 2019 - 06:14 PM

View Postmodi123_1, on 15 August 2019 - 11:46 AM, said:

and the steps! Actively look at what you are doing, what teh state of the game is, and be able to repeat it.


Made some progress with the debugger. I know now that on click randomly when the fruit generates it does not show but does have its random position. It also does not start the moving down process. I do not understand why the hell it is only on click because they use the same functions to generate when they move down naturally and there is no problem. Tinkering.
Was This Post Helpful? 0
  • +
  • -

#14 Codeqataru   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 8
  • Joined: 12-August 19

Re: Javascript fruit game logic problem

Posted 16 August 2019 - 02:40 AM

View PostCodeqataru, on 15 August 2019 - 06:14 PM, said:

View Postmodi123_1, on 15 August 2019 - 11:46 AM, said:

and the steps! Actively look at what you are doing, what teh state of the game is, and be able to repeat it.


Made some progress with the debugger. I know now that on click randomly when the fruit generates it does not show but does have its random position. It also does not start the moving down process. I do not understand why the hell it is only on click because they use the same functions to generate when they move down naturally and there is no problem. Tinkering.



Apparently, my brain works better when I first get up in the morning. I resolved it. The problem was I was sending out the fruits in the same amount of milliseconds that it took for the explode animation to play and that was causing a hiccup. Everything is smooth now. Thanks to you guys for telling me to use the debug tools(watching an hour-long video on how to use them effectively now.).
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1