Pong Game - Revision history

Shane at 04:10, 20 February 2015

2015-02-20T04:10:57Z

Shane: /* Connecting to Socket.IO */ Changing to conventional notation

2013-11-20T09:48:09Z

Connecting to Socket.IO: Changing to conventional notation

Shane: Adding flow chart

2013-11-19T06:06:14Z

Adding flow chart

Shane: /* Connecting to Socket.IO */ Changing reference from Socket.IO guide to Node.JS guide

2013-11-17T22:14:33Z

Connecting to Socket.IO: Changing reference from Socket.IO guide to Node.JS guide

Shane: /* Starting a Pong Game */

2013-11-13T05:13:18Z

Starting a Pong Game

Shane: /* Methods */

2013-11-13T05:12:30Z

Methods

Shane: /* The API */

2013-11-13T05:11:46Z

The API

Shane: /* The API */ Updating the pause section

2013-11-13T05:07:12Z

The API: Updating the pause section

Shane: Moving the "how we built" section out of the setup instructions

2013-11-13T04:57:50Z

Moving the "how we built" section out of the setup instructions

Shane: Removing contols and ext js

2013-11-13T04:56:41Z

Removing contols and ext js

← Older revision		Revision as of 04:10, 20 February 2015
Line 258:		Line 258:

	[[Category:Module 7]]		[[Category:Module 7]]
		+	[[Category:Former Content]]

@@ Line 58: / Line 58: @@
 <source lang="javascript">
-io.listen(app).sockets.on("connection", function(socket){
+var io = socketio.listen(app);
 	// This closure runs when a new Socket.IO connection is established.
@@ Line 74: / Line 75: @@
 <source lang="javascript">
-io = require("socket.io")
+socketio = require("socket.io")
 </source>

@@ Line 238: / Line 238: @@
 });
 </source>
 == How We Built pong-game.js ==

@@ Line 55: / Line 55: @@
 Now that you have your static fileserver running that serves up your three files (''pong-game.js'', ''client.html'', and ''client.js''), we need to connect everything with Socket.IO.
-Follow the instructions in [[Socket.IO|the Socket.IO guide]] for installing Socket.IO.  In your ''app.js'', add the following lines:
+Set up a static fileserver by following the instructions in [[Node.JS|the Node.JS guide]].  When finished, add the following lines:
 <source lang="javascript">

@@ Line 182: / Line 182: @@
 pong.launch(initAngle, initDirection);
-// tell the opponent about the ball's initial angle and direction.  For example:
+// tell the server about the ball's initial angle and direction.  For example:
 socket.emit("launch", {
 	angle: initAngle,

@@ Line 107: / Line 107: @@
 * '''pong.init()'''
 *: Initialize the game client.
-* '''pong.resetBall(x, y)'''
+* '''pong.resetBall([x, y])'''
-*: Arbitrarily set the position of the ball.  Defaults to the center.  Cancels all animations currently acting on the ball.
+*: Arbitrarily set the position of the ball.  Defaults to the center if no arguments are given.  Cancels all animations currently acting on the ball.
 * '''pong.launch(angle, direction)'''
 *: Launch the ball ''from its current position'' in the specified ''angle'' (-89 to +89) and direction (-1 for left or 1 for right).

@@ Line 101: / Line 101: @@
 What you need to do is to build a system that enables two players who are both viewing ''client.html'' to choose each other (e.g., from a lobby) and play a game of Pong.
-You should be wondering, "how do I interact with the Pong game?"  The public interface is as follows:
+You should be wondering, "how do I interact with the Pong game?"  The public interface is as follows.
-* '''Methods:'''
+=== Methods ===
-** '''pong.init()''' - initialize the game client.
-** '''pong.resetBall(x, y)''' - arbitrarily set the position of the ball.  Defaults to the center.  Cancels all animations currently acting on the ball.
+* '''pong.init()'''
-** '''pong.launch(angle, direction)''' - launch the ball ''from its current position'' in the specified ''angle'' (-89 to +89) and direction (-1 for left or 1 for right).
+*: Initialize the game client.
-** '''pong.updateOpponentPaddle(position)''' - set the position of the opponent paddle to ''position''.  (Hint: the ''position'' value should have been generated by the opponent's '''paddlemove''' event)
+* '''pong.resetBall(x, y)'''
-** '''pong.pauseOrResumeGame()''' - set the game in a paused state, or remove the game from a paused state.
+*: Arbitrarily set the position of the ball.  Defaults to the center.  Cancels all animations currently acting on the ball.
-** '''pong.ready()''' - returns true if the game is not in a "paused" state.
+* '''pong.launch(angle, direction)'''
-** '''pong.setScore(score)''' - display score on the game canvas.  ''score'' is an object literal containing two fields: left and right.
+*: Launch the ball ''from its current position'' in the specified ''angle'' (-89 to +89) and direction (-1 for left or 1 for right).
-* '''Events (all fired on window):'''
+* '''pong.updateOpponentPaddle(position)'''
-** '''paddlemove''' - the player's paddle has moved.
+*: Set the position of the opponent paddle to ''position''.  (Hint: the ''position'' value should have been generated by the opponent's '''paddlemove''' event)
-**: This event will fire only after the paddle has moved 15 pixels or more.
+* '''pong.pauseOrResumeGame()'''
-*** '''event.detail.position''' - the new y coordinate of the paddle.
+*: Set the game in a paused state, or remove the game from a paused state.
-** '''paddlehit-left''' - the ball has hit the left side of the screen.
+* '''pong.ready()'''
-*** '''event.detail.hit''' - true if the ball hit the player's paddle; false otherwise.
+*: Returns true if the game is not in a "paused" state.
-*** '''event.detail.angle''' - if the ball was reflected, the new angle of the ball's rightward movement.
+* '''pong.setScore(score)'''
-*** '''event.detail.position''' - the position at which the ball hit the left side
+*: Display score on the game canvas.  ''score'' is an object literal containing two fields: left and right.
 === Problems with Our Interface ===
-There are at least two major problematic issues with our interface:
+There are at least two major problematic issues with our API:
 * We are firing events on the window.  We should have taken the time to make our Pong class implement the EventTarget interface directly.

@@ Line 108: / Line 108: @@
 ** '''pong.launch(angle, direction)''' - launch the ball ''from its current position'' in the specified ''angle'' (-89 to +89) and direction (-1 for left or 1 for right).
 ** '''pong.updateOpponentPaddle(position)''' - set the position of the opponent paddle to ''position''.  (Hint: the ''position'' value should have been generated by the opponent's '''paddlemove''' event)
 ** '''pong.ready()''' - returns true if the game is not in a "paused" state.
 ** '''pong.setScore(score)''' - display score on the game canvas.  ''score'' is an object literal containing two fields: left and right.
@@ Line 130: / Line 131: @@
 === Enabling a Player to Pause ===
-''You do not need to implement the pausing part of your Pong game for the purposes of Module 7; it is here for reference.''
+''You do not need to implement pausing for the purposes of Module 7.  If you do, you can earn 5 points of creative portion.''
-Implementing a game pause is more difficult for a network game than it is for a game that runs on just one computer.  There is one situation during a Pong game when it makes sense to enable a user to pause the game, though: after a user has lost a round, but before they have fired the next ball at the opponent.  At this time, you may display the play/pause button like so:
+Implementing a game pause is more difficult for a network game than it is for a game that runs on just one computer: you need to make sure that the game is in a state such that you won't run into any race conditions, etc.
-<source lang="javascript">Ext.fly("controls").show();</source>
+One situation during a Pong game when it makes sense to enable a user to pause the game is after a user has lost a round.  Since the game at that point in time is waiting for the player to launch the next ball, we shouldn't have any race conditions.
-When your timeout for firing the new ball is executed, test whether or not the canvas is ready.  If it is, fire the ball and hide the play/pause button; otherwise, continue waiting:
+If you implement pausing, the '''pong.pauseOrResumeGame()''' and '''pong.ready()''' functions will come in handy.
 == Examples ==

@@ Line 10: / Line 10: @@
 We created the ''pong-game.js'' file for you to save you time and so that you can focus on the Node.JS and Socket.IO aspects of this module.  This file contains the core Pong engine, but it does ''not'' establish communication between users of any kind.
 === File 2: client.js ===
@@ Line 247: / Line 238: @@
 });
 </source>
 [[Category:Module 7]]

@@ Line 9: / Line 9: @@
 The first file you can save in your ''static'' directory will be ''pong-game.js'', which you can download from here: http://classes.engineering.wustl.edu/cse330/content/pong-game.js
-We created the ''pong-game.js'' file for you to save you time and so that you can focus on the Node.JS and Socket.IO aspects of this module.  This file contains the core Pong engine, but it does ''not'' establish communication between users of any kind.  Note that the file ''does'' depend on Ext JS.
+We created the ''pong-game.js'' file for you to save you time and so that you can focus on the Node.JS and Socket.IO aspects of this module.  This file contains the core Pong engine, but it does ''not'' establish communication between users of any kind.
 If you are curious, we used the [http://www.limejs.com/ LimeJS] framework as the backbone of ''pong-game.js''.  You can find the pre-compiled source code for the Pong game here:
@@ Line 22: / Line 22: @@
 === File 2: client.js ===
-You should create an additional file, ''client.js'', which you include into ''client.html'' and which contains the client-side logic for your Pong game.  It should load after ''pong-game.js''.  Start with the following code in your ''client.js'':
+You should create an additional file, ''client.js'', which you include into ''client.html'' and which contains the client-side logic for your Pong game.  It should load after ''pong-game.js''.  You will be saving all of you client-side code in this file.
 === File 3: client.html ===
@@ Line 55: / Line 48: @@
 <source lang="html4strict">
-<div id="gameContainer">
+<div id="gameContainer" style="display:none;">
 	<div id="game"></div>
 </div>
 </source>
-You also need to require the Ext JS core library, ''pong-game.js'', and ''client.js''.
+You also need to require ''pong-game.js'' and ''client.js''.
 <source lang="html4strict">
 <script src="pong-game.js"></script>
 <script src="client.js"></script>
 </source>
 === Connecting to Socket.IO ===
@@ Line 105: / Line 90: @@
 Inside of the ''io.listen'' callback function is where most of your server-side code will go.
-On the client side, you need to include the Socket.IO library (put this below Ext JS but above ''pong-game.js'' and ''client.js''):
+On the client side, you need to include the Socket.IO library (put this above ''pong-game.js'' and ''client.js''):
 <source lang="html4strict"><script src="/socket.io/socket.io.js"></script></source>
@@ Line 165: / Line 150: @@
 var launchNewBall = function(angle, direction){
 	if (pong.ready()) {
 		// Launch the ball on our local canvas
 		pong.resetBall();
@@ Line 198: / Line 180: @@
 // show the game canvas:
-Ext.fly("gameContainer").enableDisplayMode().show();
+document.getElementById("gameContainer").style.display = "block";
 // initialize the game canvas: