Question

So far in this game, I’ve made it possible to check wall and paddle collisions, and then respond by running an animation to redirect the ball. However, I keep falling down when it comes to checking a lack of collisions. Neither else nor else if statements work, and secondary if statements fail to work as well – either within the main function or as a separate event. I’ve covered pretty much every possibility here, but I’m hoping one of you guys (mega-dependable as you are) can help solve this.

Example of collision code (separate functions):

var BallStop7 = function(){
    setTimeout(BallStop8, 850);
    setTimeout(Check1, 1000);
    //setTimeout(Check1, 1000);    
    if(document.getElementById('Paddle2').style.top=="251px");
    {
        document.getElementById('BallRebound6').id='BallRebound7';
        document.getElementById('BallRebound7').style.webkitAnimationPlayState="running";
    };  

};

var BallStop8 = function(){
    /**/ 
    document.getElementById('BallRebound7').style.webkitAnimationPlayState="paused";
    if(document.getElementById('Paddle1').style.top=="251px"){
        if(confirm("Draw. Would you like to try again?")){
            window.location="pingpongwars.tumblr.com";
        };
        document.getElementById('BallRebound7').style.webkitAnimationPlayState="paused";    
    };
};


var Check1 = function(){
    if(document.getElementById('BallRebound7').style.left=="13.739665985107422px");{    
        alert("Player Two Wins");
        document.getElementById('BallRebound7').style.visibility="hidden";
    };
};

Main function

var BallStop4 = function(){
    //setTimeout(BallStop5, 370);
    if(document.getElementById('Paddle1Return').style.top=="9px");
    {
        document.getElementById('BallRebound3').id='BallRebound4';
        document.getElementById('BallRebound4').style.webkitAnimationPlayState="running";
    };

    if(document.getElementById('BallRebound3').style.left=="30px"){
        alert("Player Two Wins");
        document.getElementById('BallRebound3').style.visibility="hidden";
    }
    BallStop5();
};

Jsfiddle: http://jsfiddle.net/zbMCC/

Answer 1

You have extra semicolons in your code:

if(document.getElementById('Paddle2').style.top=="251px");
                                                         ^ = empty statement
{ /* A block of code */ }

In example above, if truthy, it executes an empty statement, and the codeblock will be executed anyway, despite of the result of the comaprison. Just remove all semicolons after ifs.

if at MDN

Also code blocks should not end with semicolon, unless they are a part of declaration or definition.