01219245/cocos2d-js/Maze - ประวัติรุ่นแก้ไข

Jittat: /* Showing scores: callbacks */

2015-02-18T05:38:12Z

Showing scores: callbacks

Jittat: /* Eating dots */

2015-02-18T05:36:24Z

Eating dots

Jittat: /* Movement: code (respect the walls) */

2015-02-18T05:35:11Z

Movement: code (respect the walls)

Jittat: /* Movements: code (run through the walls but stay in the blocks, never stop moving) */

2015-02-18T04:59:28Z

Movements: code (run through the walls but stay in the blocks, never stop moving)

Jittat: /* Moving the pac-man (blocky movement) */

2015-02-18T04:58:08Z

Moving the pac-man (blocky movement)

Jittat: /* Maze & maze data */

2015-02-18T04:57:02Z

Maze & maze data

Jittat เมื่อ 04:56, 18 กุมภาพันธ์ 2558

2015-02-18T04:56:11Z

Jittat เมื่อ 04:55, 18 กุมภาพันธ์ 2558

2015-02-18T04:55:05Z

Jittat: /* Movements: code (run through the walls but stay in the blocks, stop) */

2015-02-18T04:54:14Z

Movements: code (run through the walls but stay in the blocks, stop)

Jittat: /* Movements: code (run through the walls but stay in the blocks, stop) */

2015-02-18T04:54:01Z

Movements: code (run through the walls but stay in the blocks, stop)

@@ แถว 562: / แถว 562: @@
 Let's create a new property for <tt>Pacman</tt>.  Add this line to <tt>Pacman.ctor</tt>:
 <syntaxhighlight lang="javascript">
          this.eatCallback = null;
@@ แถว 568: / แถว 569: @@
 To change this property, we add function <tt>setEatCallback</tt> to <tt>Pacman</tt>:
 <syntaxhighlight lang="javascript">
      setEatCallback: function( callback ) {
@@ แถว 578: / แถว 580: @@
 We can update method <tt>checkDot</tt> as follows:
 <syntaxhighlight lang="javascript">
      checkDot: function() {
@@ แถว 595: / แถว 598: @@
 Let's create property <tt>score</tt> in <tt>GameLayer</tt>.  Place this code in method <tt>GameLayer.init</tt>.
 <syntaxhighlight lang="javascript">
          this.score = 0;
@@ แถว 601: / แถว 605: @@
 Also, create a label <tt>scoreLabel</tt>:
 <syntaxhighlight lang="javascript">
          this.scoreLabel = cc.LabelTTF.create( '0', 'Arial', 32 );
@@ แถว 609: / แถว 614: @@
 Add method <tt>updateScoreLabel</tt> to <tt>GameLayer</tt>:
 <syntaxhighlight lang="javascript">
      updateScoreLabel: function() {
@@ แถว 617: / แถว 623: @@
 Let's create method <tt>registerEatCallback</tt> in class <tt>GameLayer</tt> to register a call back to the <tt>Pacman</tt>.  Note that this callback refer to game layer using a variable <tt>gameLayer</tt>, not by <tt>this</tt> which would refer to <tt>Pacman</tt> when the function is called.
 <syntaxhighlight lang="javascript">
      registerEatCallback: function() {
@@ แถว 629: / แถว 636: @@
 Finally, we call <tt>registerEatCallback</tt> in <tt>GameLayer.init</tt>:
 <syntaxhighlight lang="javascript">
          this.registerEatCallback();

@@ แถว 462: / แถว 462: @@
 A dot is simply a sprite:
 <syntaxhighlight lang="javascript">
 var Dot = cc.Sprite.extend({
@@ แถว 473: / แถว 474: @@
 We can let <tt>Maze</tt> handles the dot creation while creating the walls.
 <syntaxhighlight lang="javascript">
          for ( var r = 0; r < this.HEIGHT; r++ ) {
@@ แถว 508: / แถว 510: @@
 Within this frame, we need to add the following method to <tt>Maze</tt>:
 <syntaxhighlight lang="javascript">
      getDot: function( blockX, blockY ) {
@@ แถว 523: / แถว 526: @@
 With these two method, we can implement method <tt>checkDot</tt>:
 <syntaxhighlight lang="javascript">
      checkDot: function() {
@@ แถว 537: / แถว 541: @@
 You can call this in <tt>Pacman.update</tt>:
 <syntaxhighlight lang="javascript">
          if ( this.isAtCenter() ) {

@@ แถว 391: / แถว 391: @@
 We then add the <tt>maze</tt> property to <tt>Pacman</tt>.  Add this method to class <tt>Pacman</tt>:
 <syntaxhighlight lang="javascript">
      setMaze: function( maze ) {
@@ แถว 399: / แถว 400: @@
 And assign the maze property in <tt>GameLayer.init</tt>:
 <syntaxhighlight lang="javascript">
          this.pacman.setMaze( this.maze );
@@ แถว 405: / แถว 407: @@
 We should provide a method in class <tt>Maze</tt> so that <tt>Pacman</tt> can ask if the next block is a wall.  Add this method to class <tt>Maze</tt>:
 <syntaxhighlight lang="javascript">
      isWall: function( blockX, blockY ) {
@@ แถว 417: / แถว 420: @@
 Let's now work on the Pacman.  The <tt>update</tt> method is changed so that method <tt>isPossibleToMove</tt> is called to check for walls:
 <syntaxhighlight lang="javascript">
      update: function( dt ) {
@@ แถว 433: / แถว 437: @@
 Finally, let's implement <tt>isPossibleToMove</tt>.  Oh, it's ''your'' job.
 <syntaxhighlight lang="javascript">
      isPossibleToMove: function( dir ) {

@@ แถว 286: / แถว 286: @@
 We initialize an additional state: <tt>nextDirection</tt>:
 <syntaxhighlight lang="javascript">
          this.nextDirection = Pacman.DIR.STILL;
@@ แถว 295: / แถว 296: @@
 In fact, the keyboard event should only change the <tt>nextDirection</tt> state.  Let's change the method <tt>Pacman.setDirection</tt> to <tt>Pacman.setNextDirection</tt>:
 <syntaxhighlight lang="javascript">
      setNextDirection: function( dir ) {
@@ แถว 303: / แถว 305: @@
 and change <tt>GameLayer.onKeyDown</tt> accordingly (note that we essentially change from <tt>setDirection</tt> to <tt>setNextDirection</tt>):
 <syntaxhighlight lang="javascript">
      onKeyDown: function( keyCode, event ) {
@@ แถว 326: / แถว 329: @@
 Our plan for the new <tt>Pacman.update</tt> method will be:
 <syntaxhighlight lang="javascript">
      update: function( dt ) {
@@ แถว 342: / แถว 346: @@
 '''EXERCISE:''' add the condition for testing if the Pacman is at the center of the block.  '''Hint:''' you can use <tt>this.x</tt> and <tt>this.y</tt>.  See the co-ordinate system figure above.
 <syntaxhighlight lang="javascript">
      isAtCenter: function() {
@@ แถว 350: / แถว 355: @@
 Using this method the <tt>if</tt> statement above becomes:
 <syntaxhighlight lang="javascript">
          if ( this.isAtCenter() ) {

@@ แถว 110: / แถว 110: @@
 It is easy to show the PacMan.  This is the code for <tt>Pacman</tt> class in <tt>Pacman.js</tt>.  Note that we keeps the current position of the Pacman in the object as well.  This initial position is passed to the constructor <tt>ctor</tt> when the object is created.
 <syntaxhighlight lang="javascript">
 var Pacman = cc.Sprite.extend({
@@ แถว 129: / แถว 130: @@
 Then, you can create it in <tt>GameLayer.init</tt>:
 <syntaxhighlight lang="javascript">
          this.pacman = new Pacman( 10*40 + 20, 6*40 + 20 );
@@ แถว 152: / แถว 154: @@
 Let's start by adding a few constants that we will use.  Place this code after the <tt>cc.Sprite.extend({})</tt> block.
 <syntaxhighlight lang="javascript">
 Pacman.MOVE_STEP = 5;
@@ แถว 173: / แถว 176: @@
 Now, add <tt>update</tt> method to <tt>Pacman</tt> class:
 <syntaxhighlight lang="javascript">
      update: function( dt ) {
@@ แถว 253: / แถว 257: @@
 We then watch for the <tt>onKeyDown</tt> event and set the Pacman direction accordingly.
 <syntaxhighlight lang="javascript">
      onKeyDown: function( keyCode, event ) {

@@ แถว 25: / แถว 25: @@
 The code below shows <tt>Maze</tt> class in <tt>src/Maze.js</tt>.  Note that since our screen is of size 800 x 600 and our wall image is of size 40 x 40, we can have 20 x 15 units.  In our case, we leave the top row and the bottom row out, so the height of the maze is only 13 units.
 <syntaxhighlight lang="javascript">
 var Maze = cc.Node.extend({
@@ แถว 61: / แถว 62: @@
 To draw the maze, we create appropriate sprites on the screen.
 <syntaxhighlight lang="javascript">
 	for ( var r = 0; r < this.HEIGHT; r++ ) {
@@ แถว 80: / แถว 82: @@
 We also put the anchor point for the maze at its lower-left corner as well.  (Put this code also in method <tt>Maze.ctor</tt>.)
 <syntaxhighlight lang="javascript">
 	this.setAnchorPoint( cc.p( 0, 0 ) );
@@ แถว 86: / แถว 89: @@
 To use this <tt>Maze</tt> in <tt>GameLayer</tt> we simply create it in <tt>GameLayer.init</tt>:
 <syntaxhighlight lang="javascript">
 	this.maze = new Maze();

←รุ่นแก้ไขก่อนหน้า		รุ่นแก้ไขเมื่อ 04:56, 18 กุมภาพันธ์ 2558
แถว 526:		แถว 526:

	{{gitcomment\|After you make the Pacman eats the dots, don't forget to commit your work.}}		{{gitcomment\|After you make the Pacman eats the dots, don't forget to commit your work.}}
		+
		+	== Showing scores: callbacks ==
		+	We want to update the score. Note that when the Pacman eats a dot, the Pacman itself knows about it. To update the score, we can just let the Pacman does it as well. However, to do so, we must let the Pacman knows about the score label object on the screen so that it can update the score. This creates strong dependency between the Pacman implementation and how the game computes and shows its score.
		+
		+	In this section, we shall use a nice technique to remove this tight dependency.
		+
		+	=== A callback ===
		+	Recall that functions in JavaScript are first-class objects. We will provide a way for the <tt>Pacman</tt> to signal the <tt>GameLayer</tt> when it eats a dot.
		+
		+	Let's create a new property for <tt>Pacman</tt>. Add this line to <tt>Pacman.ctor</tt>:
		+
		+	<syntaxhighlight lang="javascript">
		+	this.eatCallback = null;
		+	</syntaxhighlight>
		+
		+	To change this property, we add function <tt>setEatCallback</tt> to <tt>Pacman</tt>:
		+
		+	<syntaxhighlight lang="javascript">
		+	setEatCallback: function( callback ) {
		+	this.eatCallback = callback;
		+	},
		+	</syntaxhighlight>
		+
		+	This property keeps a function that <tt>Pacman</tt> should call. We not only call the function but also pass the dot object to the function as well, so that the function can, for example, calculate the score based on the type of dot that the <tt>Pacman</tt> eats.
		+
		+	We can update method <tt>checkDot</tt> as follows:
		+
		+	<syntaxhighlight lang="javascript">
		+	checkDot: function() {
		+	// ... from this.x and this.y do something to get blockX and blockY
		+
		+	var dot = this.maze.getDot( blockX, blockY );
		+	if ( dot ) {
		+	if ( this.eatCallback ) {
		+	this.eatCallback( dot );
		+	}
		+	this.maze.removeDot( blockX, blockY, dot );
		+	}
		+	},
		+	</syntaxhighlight>
		+
		+	=== The score label and score update ===
		+	Let's create property <tt>score</tt> in <tt>GameLayer</tt>. Place this code in method <tt>GameLayer.init</tt>.
		+
		+	<syntaxhighlight lang="javascript">
		+	this.score = 0;
		+	</syntaxhighlight>
		+
		+	Also, create a label <tt>scoreLabel</tt>:
		+
		+	<syntaxhighlight lang="javascript">
		+	this.scoreLabel = cc.LabelTTF.create( '0', 'Arial', 32 );
		+	this.scoreLabel.setPosition( cc.p( 15 * 40, 14 * 40 + 15 ) );
		+	this.addChild( this.scoreLabel );
		+	</syntaxhighlight>
		+
		+	Add method <tt>updateScoreLabel</tt> to <tt>GameLayer</tt>:
		+
		+	<syntaxhighlight lang="javascript">
		+	updateScoreLabel: function() {
		+	this.scoreLabel.setString( this.score );
		+	}
		+	</syntaxhighlight>
		+
		+	Let's create method <tt>registerEatCallback</tt> in class <tt>GameLayer</tt> to register a call back to the <tt>Pacman</tt>. Note that this callback refer to game layer using a variable <tt>gameLayer</tt>, not by <tt>this</tt> which would refer to <tt>Pacman</tt> when the function is called.
		+
		+	<syntaxhighlight lang="javascript">
		+	registerEatCallback: function() {
		+	var gameLayer = this;
		+	this.pacman.setEatCallback(function( dot ) {
		+	gameLayer.score++;
		+	gameLayer.updateScoreLabel();
		+	});
		+	}
		+	</syntaxhighlight>
		+
		+	Finally, we call <tt>registerEatCallback</tt> in <tt>GameLayer.init</tt>:
		+
		+	<syntaxhighlight lang="javascript">
		+	this.registerEatCallback();
		+	</syntaxhighlight>
		+
		+	== Adding challenges and other game improvements ==
		+	The current game that we have is not quite a game, as it lacks a crucial component of games, i.e., challenges. A typical next step would be to add ghosts to the game, however there are many easier options that you can do to add challenges to the game. Here we list a few:
		+
		+	* Add timing constraints:
		+	** Your dots may disappear as the time passes. This forces the player to try to get dots as quickly as possible.
		+	** You may add special dots with higher points. This dots may move very quickly (faster than the player's speed) so the player has to plan the move.
		+	** You may add special dots with random positions that disappear.
		+	* Add distance constraints:
		+	** The player may have limited movement distance. (Think of a car with gas.)
		+	** You may add special dots that add the movements to the player.
		+
		+	After the challenges, there are many things you can add to the game to make it more engaging. You may add sound effects. You may animate the Pacman. This is mainly discussed in [[01219245/cocos2d/Actions\|Tutorial 102]].
		+
		+	=== Better movements ===
		+	: ''to be added later''

←รุ่นแก้ไขก่อนหน้า		รุ่นแก้ไขเมื่อ 04:55, 18 กุมภาพันธ์ 2558
แถว 433:		แถว 433:

	{{gitcomment\|Now our Pacman can run in the maze!! Don't forget to commit your work.}}		{{gitcomment\|Now our Pacman can run in the maze!! Don't forget to commit your work.}}
		+
		+	== Eating dots ==
		+	It's time to make our Pacman not to feel hungry any more.
		+
		+	=== Showing the dots ===
		+	Create a 40 x 40 image for the dot and save it in <tt>res/images/dot.png</tt>. Add this to the resource list to preload the image.
		+
		+	A dot is simply a sprite:
		+
		+	<syntaxhighlight lang="javascript">
		+	var Dot = cc.Sprite.extend({
		+	ctor: function() {
		+	this._super();
		+	this.initWithFile( 'res/images/dot.png' );
		+	}
		+	});
		+	</syntaxhighlight>
		+
		+	We can let <tt>Maze</tt> handles the dot creation while creating the walls.
		+
		+	<syntaxhighlight lang="javascript">
		+	for ( var r = 0; r < this.HEIGHT; r++ ) {
		+	for ( var c = 0; c < this.WIDTH; c++ ) {
		+	if ( this.MAP[ r ][ c ] == '#' ) {
		+	// ... old code
		+	} else if ( this.MAP[ r ][ c ] == '.' ) {
		+	var d = new Dot();
		+	d.setPosition( cc.p( c * 40 + 20, (this.HEIGHT -r - 1) * 40 + 20 ) );
		+	this.addChild( d );
		+	}
		+	}
		+	}
		+	</syntaxhighlight>
		+
		+	Try to reload to see the dots.
		+
		+	{{gitcomment\|Add the dot image file, and commit.}}
		+
		+	=== Exercise: Eating the dots ===
		+	We need a way to check, when we are at the center of a block, if that block contains a ''good'' dot. (A good dot is the one which is not eaten.) If that's the case, we should remove that dot from the screen.
		+
		+	Again, there are many options for do this. We can have the <tt>GameLayer</tt> responsible for that or let the <tt>Pacman</tt> talks with the <tt>Maze</tt> to get the work donw. The decision so far is to push the work to the <tt>Pacman</tt> and the <tt>Maze</tt>, so let's stick with that for now.
		+
		+	Let's imagine how the scenario should be.
		+
		+	* When the <tt>Pacman</tt> reaches the center of the block,
		+	** it asks the <tt>Maze</tt> for a good dot at that location.
		+	** If there is a good dot,
		+	*** the <tt>Pacman</tt> eats it, and
		+	*** tell the <tt>Maze</tt> to remove that good dot from the maze.
		+
		+	Currently, when the Pacman eats the dots, it might do nothing. But later on, it should update the player's score.
		+
		+	Within this frame, we need to add the following method to <tt>Maze</tt>:
		+
		+	<syntaxhighlight lang="javascript">
		+	getDot: function( blockX, blockY ) {
		+	// ... return the dot or null if there is no good dot at that location
		+	},
		+	removeDot: function( blockX, blockY, dot ) {
		+	// ... remove the dot from that location.
		+	},
		+	</syntaxhighlight>
		+
		+	'''Notes:''' You don't have to use the exact same method described above. Think of these as hints.
		+
		+	To retrieve a good dot at a particular position, you can use various JavaScript data structures to do so. To remove the dot, you can use method <tt>removeChild</tt>.
		+
		+	With these two method, we can implement method <tt>checkDot</tt>:
		+
		+	<syntaxhighlight lang="javascript">
		+	checkDot: function() {
		+	// ... from this.x and this.y do something to get blockX and blockY
		+
		+	var dot = this.maze.getDot( blockX, blockY );
		+	if ( dot ) {
		+	// ... do something.. currently we might do nothing, but our scoring code would appear here.
		+	this.maze.removeDot( blockX, blockY, dot );
		+	}
		+	},
		+	</syntaxhighlight>
		+
		+	You can call this in <tt>Pacman.update</tt>:
		+
		+	<syntaxhighlight lang="javascript">
		+	if ( this.isAtCenter() ) {
		+	this.checkDot();
		+
		+	// ... old codes ...
		+	}
		+	</syntaxhighlight>
		+
		+	{{gitcomment\|After you make the Pacman eats the dots, don't forget to commit your work.}}

@@ แถว 355: / แถว 355: @@
 <syntaxhighlight lang="javascript">
-     onKeyUp: function( keyCode ) {
+     onKeyUp: function( keyCode, event ) {
          this.pacman.setNextDirection( Pacman.DIR.STILL );
      },