javascriptif-statementintervalsbreakout

Javascript Breakout game. Changing ball speed at score interval


I am looking for a little help on adding on to some code for a Breakout game using Javascript within Tumult Hype. I am looking to make it so that once you hit a certain score the ball speed will increase.

Here is the code so far without the speed booster.

var input1 = event.which || event.keyCode;

if ((input1 == "37") && (window.setLoopLeft == false)) { // LEFT ARROW PRESSED
    window.setLoopLeft = true;
    window.intervalLeft = setInterval(moveLeft, 5);
} else if ((input1 == "39") && (window.setLoopRight == false)) { // RIGHT ARROW PRESSED
    window.setLoopRight = true;
    window.intervalRight = setInterval(moveRight, 5);
} else if ((input1 == "32") && (window.ballLaunched == false)) { // SPACE BAR PRESSED
    window.ballLaunched = true;
    // RUN THE MOVEBALL FUNCTION EVERY 10 MILLISECONDS
    window.intervalMoveBall = setInterval(moveBall, window.ballSpeed);
}

function moveBall() {
    var ballLeft = parseInt(hypeDocument.getElementById("ball").style.left);
    var ballTop = parseInt(hypeDocument.getElementById("ball").style.top);

This is the code I am adding onto. Now what I was planning was to do what create a global variable to apply to the window.intervalMoveBall. I would then write a new function that would detect the score value at 1000 points and double the balls speed making it move every 5 miliseconds instead of 10.

Now what I am not sure how to do is actually write the if statement so that it detects the score value. I was wondering if anybody might be able to show me how to right that or even be able to tell me if using a global and a new function with an if statement will even work for this or not.


Solution

  • You are currently using setInterval, so to change the time interval you would have to clear the original interval, and start a new one with the new time interval. A simpler approach is to make the moveBall function responsible for calling itself with a setTimeout (and the same for the moveLeft and moveRight), like this...

    var input1 = event.which || event.keyCode;
    
    if ((input1 == "37") && (window.setLoopLeft == false)) { // LEFT ARROW PRESSED
        window.setLoopLeft = true;
        window.intervalLeft = setInterval(moveLeft, 5);
    } else if ((input1 == "39") && (window.setLoopRight == false)) { // RIGHT ARROW PRESSED
        window.setLoopRight = true;
        window.intervalRight = setInterval(moveRight, 5);
    } else if ((input1 == "32") && (window.ballLaunched == false)) { // SPACE BAR PRESSED
        window.ballLaunched = true;
        moveBall();
    }
    
    function moveBall() {
        setTimeout(moveBall, window.ballSpeed);
        // the rest of your moveBall function
    }
    

    This means that we can set a different timespan every time moveBall runs, with some conditional logic, for example,

    function moveBall() {
        setTimeout(moveBall, window.score > 1000 : 5 ? 10);
        // the rest of your moveBall function
    }
    

    Obviously this is an infinite loop, so you would also want to add some way of stopping this, such as a check that the game hasn't finished, for example,

    function moveBall() {
        if (window.gameFinished) {
            return;
        }
    
        setTimeout(moveBall, window.score > 1000 : 5 ? 10);
        // the rest of your moveBall function
    }
    

    Just as an aside, it can get quite unmaintainable to use lots of global variables stored on the window object, so it might be worth looking into JavaScript namespacing.