Creating the game loop
What do we have to set for the game loop?
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 |
function gameLoop() { moveBall(); movePaddles(); //get the values of "maxscore" input element var maxScore = $("#maxscore").val(); //check the length and based of some criteria update the maxscore input value if (maxScore.length == 1) { if (isNaN(maxScore) === true) { maxScore = 5; } else { maxScore = "" + 0 + maxScore; } } else { if (isNaN(maxScore) === true) { maxScore = 5; } else { maxScore = maxScore; } }; //Pause the game (clear timer) if Space bar is pressed and display message how to resume game and "Start/Resume game" button if (pingpong.pressedKeys[KEY.Space]) { if ($.browser.mozilla) { alert("The game is paused. \n Click the OK to resume the game."); } else { $("#pausegame").show("slow"); $("#startbutton").show("fast"); $(this).stopTime("start"); }; }; //perform checks for "maxscore" value and perform actions based on returned boolean value for "Game over!" situation if ((pingpong.scoreA == maxScore && pingpong.scoreA != 0) || (pingpong.scoreB == maxScore && pingpong.scoreB != 0)) { //print message for game over, reset score and stop the game loop $("#gameover").show("slow"); pingpong.scoreA = "00"; $("#scoreA").html(pingpong.scoreA); pingpong.scoreB = "00"; $("#scoreB").html(pingpong.scoreB); //clear timer, show "Start/Resume game" button $(this).stopTime("start"); $("#startbutton").show("fast"); }; }; |
Firstly, we need to call the functions to move the ball and the right and left paddles (moveBall() and movePaddle(). Then, based on the criteria of achieving the maximum score value, wee need to stop the game loop and to re-initialize some values and make the “Start game” button clickable and to make the “Start/Resume game” button reappear. Also the code for pausing the game (somehow trivial) is added. The pause game action can be polished using the clearInterval() function to stop/resume the game.. setInterval function is not implemented in the same way for all major browser. Also, an evaluation is necessary for the alert() JavaScript function. The jQuery Timer plugin it is more desirable to use than the native setInterval() and setTimeout JavaScript functions. Briefly, when using Timers, the code execution is broken when an event is triggered. But this is not true for Mozilla Firefox (at least for this project). On the other hand, alert() function is set to break the code execution when it is called. But, what is happening if it is called in a repetitive function call? Mozilla Firefox break the code execution, the other browsers break the execution of the code but only for the current instance of the function. So, the pause game effect is called differently for Mozilla Firefox on one hand, and for the rest of the major browser, on the other hand. It is not the best approach but is reliable.
Moving the paddles
Let’s take a look first at the CSS statements for the divs which represent the paddles:
|
1 2 3 4 5 6 7 8 9 10 11 |
.paddle { background:#d5d3d3; position:absolute; left:50px; top:115px; width:15px; height:70px; border-radius:5px; border:1px solid #000000 } #paddleB {left:535px} |
Note the statement position:absolute which means that the element is positioned relative to its first positioned (not static) ancestor element. Practically, the top values for the positioned elements (paddles) will move tha paddles in the desired directions.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
//how to move the right and left paddles function movePaddles() { var paddleSpeed = parseInt($("#paddlespeed").val()); //use our custom timer to continously check if a key is pressed if (pingpong.pressedKeys[KEY.UP]) { //move the paddle B up based on "Paddle Speed" input value var top = parseInt($("#paddleB").css("top")); if (top >= -parseInt($("#paddleB").css("height"))/2) { $("#paddleB").css("top", top - paddleSpeed); } }; if (pingpong.pressedKeys[KEY.DOWN]) { //move the paddle B down based on "Paddle Speed" input value var top = parseInt($("#paddleB").css("top")); if (top <= (parseInt($("#playground").css("height")) - (parseInt($("#paddleB").css("height")))/2)) { $("#paddleB").css("top", top + paddleSpeed); } }; if (pingpong.pressedKeys[KEY.W]) { //move the paddle A up based on "Paddle Speed" input value var top = parseInt($("#paddleA").css("top")); if (top >= -parseInt($("#paddleA").css("height"))/2) { $("#paddleA").css("top", top - paddleSpeed); } }; if (pingpong.pressedKeys[KEY.S]) { //move the paddle B down based on "Paddle Speed" input value var top = parseInt($("#paddleA").css("top")); if (top <= (parseInt($("#playground").css("height")) - (parseInt($("#paddleA").css("height")))/2)) { $("#paddleA").css("top", top + paddleSpeed); } }; }; |
The paddles are moved based on the pressed key sets (W and S for the left player and Arrow UP and Arrow DOWN for the right player). Both paddles are set to stop moving on up or down direction if their half-height overflows the playground top and bottom limit. Setting this code our paddles can move.
Moving the ball
The ball is moving on X and Y axes based on its position on playground and based on paddles position. The has an absolute position, which means that is positioned relative to the first parent element that has a position other than static (playground is positioned relatively to his parent):
|
1 2 3 4 5 6 7 8 9 10 |
#ball { background:#d9ed7a; position:absolute; width:20px; height:20px; left:290px; top:140px; border-radius:10px; border:1px solid #000000 } |
First, we need to initialize some variables:
|
1 2 3 4 5 6 7 |
//reference useful variables var playgroundWidth = parseInt($("#playground").width()); var playgroundHeight = parseInt($("#playground").height()); var ballSpeed = $("#ballspeed").val(); var ball = pingpong.ball; //re-initialize ball speed value ball.speed = ballSpeed; |
Initial check is, when ball is moving up on Y axis, if ball position exceeds playground height, and then change the moving orientation on Y axis:
|
1 2 3 4 |
//check, when ball is moving up, if ball position exceeds playground height, and then change the moving orientation on Y axis if (ball.y + ball.speed*ball.directionY > (playgroundHeight - parseInt($("#ball").height()))) { ball.directionY = -1 }; |
