Simple Game Programming In JavaScript [con't]
It's a Score!
You probably noticed in the direction functions goLeft() and goRight() that when the ball hits the edge of the court we call the function score() instead of changing directions like we did in the previous animation. For this article, the score() function will be pretty simple. It will display a dialog box that says who scored and gives directions on how to serve the ball again, and then it will reset the game so that the last person to score will be able to serve the ball for the next round.
We're going to need to add the message box into the HTML file, now. Inside the court div, beneath all of the other elements, add the messageBox div:
You'll notice that it's empty and hidden. We'll fix that in the JavaScript. The idea is that this dialog box doesn't really exist until it's needed.
Do you see that msgBox.innerHTML line? That's one of those important tricks for AJAX applications, but it's useful for other things, too, like our little dialog box. It allows you to take HTML from somewhere else, say a script, or input coming from a request you just made in the background and fill some field with it. In this case we're just going to take the HTML that we've put into the variable scorePop and pop it into the messageBox dialog that we are justed popped up with the line msgBox.style.visibility = "visible".
You'll notice also that we just cleared the interval for t. That means that the ball will stop moving as soon as this function is called. But the game isn't ready to be continued yet. First the players have to close this message box, so we put the function for the next step into the href that they click to close the box.
The function prepNewGame() closes the message box, sets t to 0 so that the ball can be served again and moves the ball into place for the winning side to serve it.
Start the Game
Now we can put in a way to start the game so that we can see how our game works!
Add this to the JavaScript:
And add this to the HTML:
The serveBall() function starts the motion of the ball. It checks to see if t is equal to 0 first, though. Once t is set with the setInterval() function, it will no longer be equal to 0 and so, the interval won't be set a second time. Back in the prepNewGame() function we set t back to 0. The reason for this is that if you don't have some way to tell if the setInterval() function has already been called, then every time you press the button you will start a new, overlapping interval which will make the ball speed faster and faster across the screen. The high speed isn't the only thing, though, because if you call t=setInterval() twice and then try to clear t with t=clearInterval(), you won't stop the animation.
What's Wrong With This Game?
There is one big problem here. It is easy for a player to cheat. All they have to do is press another key when their opponent is trying to move their paddle and the opponent can't do anything at all. This is because this script can only pay attention to one key event at a time. It is completely blind to multiple keys getting pressed together. We'll fix that in another article when we learn how to create networked games with AJAX.
Click to the next page to play the game (but don't tell your friends how to cheat!).
Find a programming school near you