Tutorial reversi - Riwayat revisi

Garcia1968 pada 19 April 2013 12.36

2013-04-19T12:36:14Z

← Revisi sebelumnya		Revisi per 19 April 2013 14.36
Baris 197:		Baris 197:
	</pre>		</pre>

	Now, to test if everything works fine, just call "addTokenOnBoard( 2, 2, <your_player_id> )" in your "setup" Javascript method, and reload the page. A token should appear and slide immediately to its position, like this:		Now, to test if everything works fine, just call "this.addTokenOnBoard( 2, 2, <your_player_id> )" in your "setup" Javascript method, and reload the page. A token should appear and slide immediately to its position, like this:

	[[File:reversi3.jpg]]		[[File:reversi3.jpg]]
Baris 301:		Baris 301:
	[[File:reversi6.jpg]]		[[File:reversi6.jpg]]

	And here's our "~~stats~~.inc.php", according to this diagram:		And here's our "states.inc.php", according to this diagram:

	<pre>		<pre>

Pikiou: /* Make the move appears automatically */ Typos

2012-12-06T16:33:49Z

Make the move appears automatically: Typos

← Revisi sebelumnya		Revisi per 6 Desember 2012 18.33
Baris 649:		Baris 649:
	Of course, as we don't manage notifications on client side, we need to press F5 after each move to see the changes on the board.		Of course, as we don't manage notifications on client side, we need to press F5 after each move to see the changes on the board.

	== Make the move ~~appears~~ automatically ==		== Make the move appear automatically ==

	Now, what we have to do is process the notifications sent by the server and make the move appear on the interface.		Now, what we have to do is process the notifications sent by the server and make the move appear on the interface.
Baris 677:		Baris 677:
	dojo.query( '.possibleMove' ).removeClass( 'possibleMove' );		dojo.query( '.possibleMove' ).removeClass( 'possibleMove' );

	this.~~addDiscOnBoard~~( notif.args.x, notif.args.y, notif.args.player_id );		this.addTokenOnBoard( notif.args.x, notif.args.y, notif.args.player_id );
	},		},
	</pre>		</pre>
Baris 685:		Baris 685:
	* Add a new disc on board, coming from player panel.		* Add a new disc on board, coming from player panel.

	Now, here's the method that ~~handle~~ the turnOverDiscs notification:		Now, here's the method that handles the turnOverDiscs notification:

	<pre>		<pre>
Baris 693:		Baris 693:
	var targetColor = this.gamedatas.players[ notif.args.player_id ].color;		var targetColor = this.gamedatas.players[ notif.args.player_id ].color;

	// ~~Made~~ these discs ~~blinking~~ and set them to the specified color		// Make these discs blink and set them to the specified color
	for( var i in notif.args.turnedOver )		for( var i in notif.args.turnedOver )
	{		{
	var ~~disc~~ = notif.args.turnedOver[ i ];		var token = notif.args.turnedOver[ i ];

	// Make the ~~disc~~ blink 2 times		// Make the token blink 2 times
	var anim = dojo.fx.chain( [		var anim = dojo.fx.chain( [
	dojo.fadeOut( { node: '~~disc_~~'+~~disc~~.x+''+~~disc~~.y } ),		dojo.fadeOut( { node: 'token_'+token.x+'_'+token.y } ),
	dojo.fadeIn( { node: '~~disc_~~'+~~disc~~.x+''+~~disc~~.y } ),		dojo.fadeIn( { node: 'token_'+token.x+'_'+token.y } ),
	dojo.fadeOut( {		dojo.fadeOut( {
	node: '~~disc_~~'+~~disc~~.x+''+~~disc~~.y,		node: 'token_'+token.x+'_'+token.y,
	onEnd: function( node ) {		onEnd: function( node ) {

	// Remove any color class		// Remove any color class
	dojo.removeClass( node, [ '~~disccolor_000000~~', '~~disccolor_ffffff~~' ] );		dojo.removeClass( node, [ 'tokencolor_000000', 'tokencolor_ffffff' ] );
	// ... and add the good one		// ... and add the good one
	dojo.addClass( node, '~~disccolor_~~'+targetColor );		dojo.addClass( node, 'tokencolor_'+targetColor );

	}		}
	} ),		} ),
	dojo.fadeIn( { node: '~~disc_~~'+~~disc~~.x+''+~~disc~~.y } )		dojo.fadeIn( { node: 'token_'+token.x+'_'+token.y } )

	] ); // end of dojo.fx.chain		] ); // end of dojo.fx.chain
Baris 723:		Baris 723:
	</pre>		</pre>

	The list of the discs be turned over has been made available by our server side code in "notif.args.turnedOver" (see previous paragraph). We loop through all these discs, and create a complex animation using dojo.Animation for each of it. The complete documentation on dojo animations [http://dojotoolkit.org/documentation/tutorials/1.6/animation/ can be found here].		The list of the discs to be turned over has been made available by our server side code in "notif.args.turnedOver" (see previous paragraph). We loop through all these discs, and create a complex animation using dojo.Animation for each of them. The complete documentation on dojo animations [http://dojotoolkit.org/documentation/tutorials/1.6/animation/ can be found here].

	In few words: we create a chain of 4 animations to make the disc fade out, fade in, fade out again, and fade in again. At the end of the second fade out, we change the color of the disc. Finally, we launch the animation with "play()".		In few words: we create a chain of 4 animations to make the disc fade out, fade in, fade out again, and fade in again. At the end of the second fade out, we change the color of the disc. Finally, we launch the animation with "play()".

Pikiou: /* Let's play */ Need to initialize statistics

2012-12-06T15:32:18Z

Let's play: Need to initialize statistics

← Revisi sebelumnya		Revisi per 6 Desember 2012 17.32
Baris 605:		Baris 605:

	... finally, we jump to the next game state if everything goes fine ('playDisc' is also the name of a transition in the 'playerTurn' game state description above).		... finally, we jump to the next game state if everything goes fine ('playDisc' is also the name of a transition in the 'playerTurn' game state description above).
			To make the statistics work, we have to initialize them in state.inc.php:

			<pre>
			// Statistics existing for each player
			"player" => array(

			"discPlayedOnCorner" => array( "id"=> 10,
			"name" => totranslate("Discs played on a corner"),
			"type" => "int" ),

			"discPlayedOnBorder" => array( "id"=> 11,
			"name" => totranslate("Discs played on a border"),
			"type" => "int" ),

			"discPlayedOnCenter" => array( "id"=> 12,
			"name" => totranslate("Discs played on board center part"),
			"type" => "int" ),

			"turnedOver" => array( "id"=> 13,
			"name" => totranslate("Number of discs turned over"),
			"type" => "int" )
			)
			</pre>

	A last thing to do on the server side is to activate the next player when we enter the "nextPlayer" game state:		A last thing to do on the server side is to activate the next player when we enter the "nextPlayer" game state:

Pikiou: /* Let's play */ Typos

2012-12-06T15:30:58Z

Let's play: Typos

← Revisi sebelumnya		Revisi per 6 Desember 2012 17.30
Baris 446:		Baris 446:
	From now, it's better to restart a game with 2 players, because we are going to implement a complete Reversi turn. The summary of what we are going to do is:		From now, it's better to restart a game with 2 players, because we are going to implement a complete Reversi turn. The summary of what we are going to do is:
	* When we click on a "possibleMove" square, send the move to the server.		* When we click on a "possibleMove" square, send the move to the server.
	* ~~On server~~ side, check the move is correct, apply Reversi rules and jump to next player.		* Server side, check the move is correct, apply Reversi rules and jump to next player.
	* ~~On client~~ side, change the disc position to reflect the move.		* Client side, change the disc position to reflect the move.

	Thus, what we do first is associate each click on a square to one of our method. We are doing this in our Javascript "setup" method:		Thus, what we do first is associate each click on a square to one of our method. We are doing this in our Javascript "setup" method:

	<pre>		<pre>
	dojo.query( '.square' ).connect( 'onclick', this, 'onPlayDisc' );		dojo.query( '.square' ).connect( 'onclick', this, 'onPlayDisc' );
	</pre>		</pre>

	Note the use of the "dojo.query" method to get all HTML elements with "square" class in just one function call. Now, our "onPlayDisc" method is called each time someone ~~click~~ on a square.		Note the use of the "dojo.query" method to get all HTML elements with "square" class in just one function call. Now, our "onPlayDisc" method is called each time someone clicks on a square.

	Here's our "onPlayDisc" method below:		Here's our "onPlayDisc" method below:
Baris 488:		Baris 488:

	What we do here is:		What we do here is:
	* We stop the propagation of the Javascript "onclick" event. Otherwise, it can lead to random behavior so it always a good idea.		* We stop the propagation of the Javascript "onclick" event. Otherwise, it can lead to random behavior so it's always a good idea.
	* We get the x/y coordinates of the square by using "evt.currentTarget.id".		* We get the x/y coordinates of the square by using "evt.currentTarget.id".
	* We check that clicked square has the "possibleMove" class, otherwise we know for sure that we can't play there.		* We check that clicked square has the "possibleMove" class, otherwise we know for sure that we can't play there.
Baris 523:		Baris 523:
	// Now, check if this is a possible move		// Now, check if this is a possible move
	$board = self::getBoard();		$board = self::getBoard();
			$player_id = self::getActivePlayerId();
	$turnedOverDiscs = self::getTurnedOverDiscs( $x, $y, $player_id, $board );		$turnedOverDiscs = self::getTurnedOverDiscs( $x, $y, $player_id, $board );

Baris 604:		Baris 605:

	... finally, we jump to the next game state if everything goes fine ('playDisc' is also the name of a transition in the 'playerTurn' game state description above).		... finally, we jump to the next game state if everything goes fine ('playDisc' is also the name of a transition in the 'playerTurn' game state description above).
			A last thing to do on the server side is to activate the next player when we enter the "nextPlayer" game state:
	A last thing to do on the server side is to ~~active~~ the next player when we enter in the "nextPlayer" game state:

	<pre>		<pre>
	function stNextPlayer()		function stNextPlayer()
	{		{
	// ~~Active~~ next player		// Activate next player
	$player_id = self::activeNextPlayer();		$player_id = self::activeNextPlayer();

Pikiou: /* Make the squares appears */ Squares didn't fill their space

2012-12-06T12:28:33Z

Make the squares appears: Squares didn't fill their space

← Revisi sebelumnya		Revisi per 6 Desember 2012 14.28
Baris 99:		Baris 99:

	.square {		.square {
	width: ~~56px~~;		width: 62px;
	height: ~~56px~~;		height: 62px;
	position: absolute;		position: absolute;
	background-color: red;		background-color: red;

Pikiou: /* Display allowed moves */ Typos

2012-12-06T12:11:08Z

Display allowed moves: Typos

← Revisi sebelumnya		Revisi per 6 Desember 2012 14.11
Baris 434:		Baris 434:
	At first, we remove all "possibleMove" classes currently applied with the very useful combination of "dojo.query" and "removeClass" method.		At first, we remove all "possibleMove" classes currently applied with the very useful combination of "dojo.query" and "removeClass" method.

	Then we loop through all possible moves ~~that~~ our PHP "updatePossibleMoves" ~~create~~ for us, and add the "possibleMove" class to corresponding square.		Then we loop through all possible moves our PHP "updatePossibleMoves" function created for us, and add the "possibleMove" class to each corresponding square.

	Finally, we use BGA framework "addTooltipToClass" method to associate a tooltip to all ~~these~~ highlighted squares ~~in order~~ players can understand ~~the~~ meaning ~~of this~~.		Finally, we use the BGA framework "addTooltipToClass" method to associate a tooltip to all those highlighted squares so that players can understand their meaning.

	And here we are:		And here we are:

Pikiou: /* Display allowed moves */ Missing the possibleMove class CSS declaration

2012-12-06T12:08:18Z

Display allowed moves: Missing the possibleMove class CSS declaration

← Revisi sebelumnya		Revisi per 6 Desember 2012 14.08
Baris 422:		Baris 422:
	</pre>		</pre>

	The idea here is that we've created a CSS class ("possibleMove") that can be applied to a "square" element to highlight it.		The idea here is that we've created a CSS class ("possibleMove") that can be applied to a "square" element to highlight it:
			<pre>
			.possibleMove {
			background-color: white;
			opacity: 0.2;
			filter:alpha(opacity=20); /* For IE8 and earlier */
			cursor: pointer;
			}
			</pre>

	At first, we remove all "possibleMove" classes currently applied with the very useful combination of "dojo.query" and "removeClass" method.		At first, we remove all "possibleMove" classes currently applied with the very useful combination of "dojo.query" and "removeClass" method.

Pikiou: /* The game state machine */ Typos

2012-12-06T02:07:54Z

The game state machine: Typos

← Revisi sebelumnya		Revisi per 6 Desember 2012 04.07
Baris 297:		Baris 297:
	Now, let's stop our game again, because we are going to start the core game logic.		Now, let's stop our game again, because we are going to start the core game logic.

	You already read the "Focus on BGA game state machine", so you know that this is the heart of your game logic. For reversi ~~game~~, it's very simple although. Here's a diagram of our game state machine ~~for Reversi~~:		You already read the "Focus on BGA game state machine", so you know that this is the heart of your game logic. For reversi, it's very simple although. Here's a diagram of our game state machine:

	[[File:reversi6.jpg]]		[[File:reversi6.jpg]]
Baris 343:		Baris 343:
	</pre>		</pre>

	Now, let's create in ~~our~~ reversi.game.php ~~file~~ the methods that are declared in this game states description file:		Now, let's create in reversi.game.php the methods that are declared in this game states description file:
	* argPlayerTurn		* argPlayerTurn
	* stNextPlayer		* stNextPlayer

Pikiou: /* The discs */ Set player colors to white and black

2012-12-06T01:20:35Z

The discs: Set player colors to white and black

← Revisi sebelumnya		Revisi per 6 Desember 2012 03.20
Baris 191:		Baris 191:

	Note: note that during all the process, the parent of the new disc HTML element will remain "tokens". placeOnObject and slideToObject methods are only moving the position of elements on screen, and they are not modifying the HTML tree.		Note: note that during all the process, the parent of the new disc HTML element will remain "tokens". placeOnObject and slideToObject methods are only moving the position of elements on screen, and they are not modifying the HTML tree.

			Before we can show a token, we need to set the player colors in the setupNewGame function in reversi.game.php:
			<pre>
			$default_colors = array( "ffffff", "000000" );
			</pre>

	Now, to test if everything works fine, just call "addTokenOnBoard( 2, 2, <your_player_id> )" in your "setup" Javascript method, and reload the page. A token should appear and slide immediately to its position, like this:		Now, to test if everything works fine, just call "addTokenOnBoard( 2, 2, <your_player_id> )" in your "setup" Javascript method, and reload the page. A token should appear and slide immediately to its position, like this:

Pikiou: /* Setup the initial game position */ $blackplayer_id and $whiteplayer_id weren't defined

2012-12-06T01:12:25Z

Setup the initial game position: $blackplayer_id and $whiteplayer_id weren't defined

← Revisi sebelumnya		Revisi per 6 Desember 2012 03.12
Baris 229:		Baris 229:
	$sql = "INSERT INTO board (board_x,board_y,board_player) VALUES ";		$sql = "INSERT INTO board (board_x,board_y,board_player) VALUES ";
	$sql_values = array();		$sql_values = array();
			list( $blackplayer_id, $whiteplayer_id ) = array_keys( $players );
	for( $x=1; $x<=8; $x++ )		for( $x=1; $x<=8; $x++ )
	{		{