The content of html5game.pingpong.js file
The game engine is created using (mostly) jQuery framework.
There are several advantages of using jQuery over pure JavaScript, which are as follows:
- Using jQuery requires shorter code to select DOM nodes and modify them
- Shorter code results in more clear code for reading, it is important in game development that usually contains a lot of code
- Writing shorter code increases the development speed
- Using the jQuery library enables the code to support all major browsers without extra tweaks; jQuery wraps the pure JavaScript code and deals with cross browser capability by itself
We are going to create a traditional ping pong game. There are two paddles on the left and right side. A ball is placed in the middle of the playground. Players can control the left paddle and move it up and down by using W and S keys, and by using arrow-up and down keys for the right paddle. By pressing the Space bar the game will be paused and a message hot to resume the game is displaued.
First we declare some variables:
|
1 2 3 |
var KEY = {UP:38, DOWN:40, W:87, S:83, Space:32}; var pingpong = {scoreA:0, scoreB:0}; pingpong.pressedKeys = []; |
The KEY variable will store the ASCII code of the keys needed to move the paddles and to pause the game. The pingpong variable will store the initial values for the score board of the both players.
The Also we need an array to store the values of the pressed keys.gameTimer variable is used for the game loop and must be initialized for global use because it will be used in two different functions.
The game options panel has initial (default) values for ball speed, maximum score and paddle speed. We need to perform some checks, when the “Save” button is pressed, if the entered values are correct based on filter defined.
|
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 |
//when "Save" button is clicked perform some checks for input values $('#save').click(function() { var ballSpeed = $("#ballspeed").val(); var maxScore = $("#maxscore").val(); var paddleSpeed = $("#paddlespeed").val(); var regex = /[1-9]/; var regex1 = /\d{2}/; if (ballSpeed.match(regex)) { $("#ballspeed").attr("value", ballSpeed); } else { alert("For Ball Speed value please insert only digits, range 1-9.") } if (paddleSpeed.match(regex)) { $("#paddlespeed").attr("value", paddleSpeed); } else { alert("For Paddle Speed value please insert only digits, range 1-9.") } if (maxScore.match(regex1) && maxScore != 00) { $("#maxscore").attr("value", maxScore); } else { alert("For Max Score please insert only digits, range 00-99. The number must have a length of two digits and should be diffrent from 00.") } }); |
Basically, when clicking on “Save” button the only action performed is to check for entered values if they match the criteria. So, if values are entered and the “Save” button is NOT clicked, then no checks are performed and the entered values are passed to the game engine. Anyway, later in the game loop, a check is performed for maximum score value if is a number or not. If a non-number value is entered for the ball speed and paddle speed, then the game is unplayable (the ball and/or paddles are not moving), but with a non-number value for maximum speed practically the game will never stops (no limit for maximum score).
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
//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; } }; |
Having this, and you want to be more strictly then, you can use this check for the other two input values, ball speed and paddle speed, and set a numeric value if a non-numeric value is entered.
The game engine
First we need to initialize values for the ball: speed, position and direction on X and Y axes:
|
1 |
pingpong.ball = {speed:5, x:290, y:140, directionX:1, directionY:1}; |
This means that the ball is centered on the playground, the speed is 5 (it moves 5px on X and Y axes, on each iteration) and the moving direction is on the right and up. The speed value will be overwritten lately so, the value set now is not too important.
After this we can call the function for the game engine:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
$(function() { //mark down in array which key is pressed $(document).keydown(function(e){ pingpong.pressedKeys[e.which] = true; }); $(document).keyup(function(e){ pingpong.pressedKeys[e.which] = false; }); //attach function to click event for "Start/Resume game" button $("#start").click(function() { //Hide message container, if it is displayed if($("#gameover").css("display") == "block") { $("#gameover").hide("fast") }; if($("#pausegame").css("display") == "block") { $("#pausegame").hide("fast") }; //set timer for game engine loop and hide button to prevent future clicks $(this).everyTime(40, "start", gameLoop); $("#startbutton").hide("slow"); //Fix for IE button active state (propagate generally) $("#start").attr("disabled", "disabled"); }); }); |
First, we have to assure that after the “Start/Resume game” button is clicked ONCE, if accidentally (or not) more clicks are done, the game engine is not affected. We simply check if the button has “clicked” class, and if it does, then do nothing, or if it doesn’t, then add this class and start the game loop. We use the setInterval() function to perform the game loop at every 30 seconds. Note the gameTimer variable, initialized earlier, which will store the ID of the setInterval() function and it will be cleared lately when the maximum score value is reached.
After the button is clicked, it will be hidden and reappear lately if some conditions are met. Also, some events (keyup and keydown) are used to register behaviors to take effect when the user interacts with the browser. The gameLoop() function is called every 40 ms. On a Win XP machine using Firefox the maximum time for function execution is just under 40 ms. Calling it sooner will make the ball moving with glitches.
Another issue is the active state for the button in Internet Explorer (tested environment IE9 on Win7). After clicking it, it remains in active state which will make the window menu items and top right buttons unusable. Disabling it after first click, will fix this problem.
