Javascript Breakout game. Changing ball speed at score interval

Question

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.

How are you moving the ball currently, and how are you keeping score? — Alex Young, Dec 04 '16 at 23:12
There are separate function that occurs when the page initializes for the score. That code is hypeDocument.getElementById("scoreValue2").innerHTML = window.score; The ball moves on a set angle based on where it hits each block or the paddle bar. — Zephyranthes, Dec 05 '16 at 00:12

score 0 · Accepted Answer · answered Dec 05 '16 at 00:26

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.

Javascript Breakout game. Changing ball speed at score interval

1 Answers1