Prg2/arcade4 flappy dot - ประวัติรุ่นแก้ไข

Jittat เมื่อ 06:06, 14 กุมภาพันธ์ 2562

2019-02-14T06:06:03Z

Jittat: /* Combining with the game mechanics */

2019-02-13T21:42:24Z

Combining with the game mechanics

Jittat: /* Combining with the game mechanics */

2019-02-13T21:39:03Z

Combining with the game mechanics

Jittat: /* Unit testing */

2019-02-13T21:34:22Z

Unit testing

Jittat: /* Unit testing */

2019-02-13T21:32:13Z

Unit testing

Jittat: /* Unit testing */

2019-02-13T21:29:14Z

Unit testing

Jittat: /* Unit testing */

2019-02-13T21:22:55Z

Unit testing

Jittat: /* Exercise: Collision detection */

2019-02-13T21:12:05Z

Exercise: Collision detection

Jittat: /* Exercise: Collision detection */

2019-02-13T21:03:29Z

Exercise: Collision detection

แสดงการเปลี่ยนแปลง

Jittat: /* Additional Exercises */

2019-02-13T21:01:09Z

Additional Exercises

@@ แถว 255: / แถว 255: @@
 {{gitcomment|After a few trials to make sure your code works, please commit.}}
 == Game states ==
@@ แถว 335: / แถว 339: @@
 {{gitcomment|Try to see if the game works as expected.  Commit your work after you are done.}}
 == The pillar pair ==
@@ แถว 477: / แถว 485: @@
 {{gitcomment|Don't forget to commit.}}
 === Exercise: Reusing the pillars ===
@@ แถว 484: / แถว 496: @@
 {{gitcomment|Test and commit the changes.}}
 == Exercise: Collision detection ==
@@ แถว 703: / แถว 719: @@
 {{gitcomment|The game should be somewhat playable.  Don't forget to commit your work.}}
 == Exercise: Random the pillar heights ==
@@ แถว 734: / แถว 754: @@
 {{gitcomment|For each of these step, don't forget to commit when you get a unit of work done.}}
 == Additional Exercises ==

@@ แถว 660: / แถว 660: @@
          if self.pillar_pair.hit(self.player):
              # ... do something here
 </syntaxhighlight>

@@ แถว 648: / แถว 648: @@
 === Combining with the game mechanics ===
-With method <tt>PillarPair.hit</tt>, we can regularly checks if the player hits the pillars.  We create method <tt>update</tt> in <tt>GameLayer</tt> to do this.
+With method <tt>PillarPair.hit</tt>, we can regularly checks if the player hits the pillars inside our world's code.
-{{synfile|src/GameLayer.js}}
+{{synfile|models.py}}
-<syntaxhighlight lang="javascript">
+<syntaxhighlight lang="python">
-    update: function( dt ) {
+class World:
-        if ( this.state == GameLayer.STATES.STARTED ) {
+    # ...
-Note that we only check collision when the game is started.  To get this method <tt>update</tt> running, don't forget to call
+    def update(self, delta):
- this.scheduleUpdate();
+         if self.pillar_pair.hit(self.player):
+             # ... do something here
 </syntaxhighlight>

@@ แถว 518: / แถว 518: @@
 </syntaxhighlight>
-We will write function <tt>check_player_pillar_collision</tt> in a separated file, so that we can test it more independently.
+We will write function <tt>check_player_pillar_collision</tt> in a separated module called <tt>coldetect</tt>, so that we can test it more independently.  Before we forget, let's add a code to import this function at the beginning of <tt>models.py</tt>.
 Since this part is quite a detour, I'll give more detailed instructions.

@@ แถว 588: / แถว 588: @@
 </pre>
-It says that our function is broken in the second test case.  You can start fixing the function in <tt>coldetect.py</tt> to make sure that you get both test passed.
+It says that our function is broken in the second test case.  You can start fixing the function in <tt>coldetect.py</tt> to make sure that you get both test passed.  That would look like the following.
 <pre>
@@ แถว 610: / แถว 610: @@
 </pre>
-'''NOTES:''' You '''don't''' have to make the collision detection perfect to make the game fun.  For example, you don't have to think of the dot as a perfect shape that you have drawn or even a circle, but you can think of it as a simple rectangle which is large enough.  Our dot is of size 40 x 40, but we have some curve.  Therefore we can view it as a rectangle of size, say, 30 x 30 centered at the position of the player.
+<pre>
 Clearly these two test cases are not enough to ensure that your <tt>check_player_pillar_collision</tt> works correctly.  Therefore, after your code for <tt>check_player_pillar_collision</tt> passes these two test cases, you might want to add more test cases.  The figure below shows a few other test cases that you should try adding to the test script.

@@ แถว 552: / แถว 552: @@
 </syntaxhighlight>
-xxxxxxxxxxxx This <tt>test.js</tT> file contains function <tt>assert</tt> and a few lines of test cases.  You can ignore function assert for now, but these two calls to <tt>assert</tt> checks the following two collision cases:
+We put each test case as a function call in the docstring of the function.  Each line that started with ">>>" (that looks like you are typing in Python's console) is a test case.  Its expected output is on the next line.  In the above code, we have two test cases.
 '''NOTES:''' You '''don't''' have to make the collision detection perfect to make the game fun.  For example, you don't have to think of the dot as a perfect shape that you have drawn or even a circle, but you can think of it as a simple rectangle which is large enough.  Our dot is of size 40 x 40, but we have some curve.  Therefore we can view it as a rectangle of size, say, 30 x 30 centered at the position of the player.

@@ แถว 526: / แถว 526: @@
 {{synfile|coldetect.py}}
 <syntaxhighlight lang="python">
 </syntaxhighlight>
-Then, add this file (<tt>src/coldetect.js</tt>) to the <tt>jsFiles</tt> config in <tt>project.json</tt>.  (We might want to do this after we have finish writing the function, but let's do it now so that we won't forget.)
+We will use Python's [https://docs.python.org/3.7/library/doctest.html doctest] to implement our unit test.  Each test and its expected output will be put as a document on the function.
-We will test this function in a separated main JavaScript program.  We will put all these testing codes in a separated directory <tt>src/test</tt>.
+So let's start adding a few test cases.  Change the function <tt>check_player_pillar_collision</tt> to be
-Let's create directory <tt>src/test</tt>.
+{{synfile|coldetect.py}}
-Add <tt>index.html</tt> in <tt>src/test</tt>:
+    >>> check_player_pillar_collision(100, 100, 300, 200)
-{{synfile|src/test/index.html}}
+     When the dot hit the middle of the top pillar
-     if ( actual === expected ) {
+     >>> check_player_pillar_collision( 300, 300, 300, 200 )
-	msg = '<span style="color: green">OK</span>';
+     True
-    } else {
+     """
-assert( checkPlayerPillarCollision( 100, 100, 300, 200 ), false,
+    return False
 </syntaxhighlight>
-This <tt>test.js</tT> file contains function <tt>assert</tt> and a few lines of test cases.  You can ignore function assert for now, but these two calls to <tt>assert</tt> checks the following two collision cases:
+xxxxxxxxxxxx This <tt>test.js</tT> file contains function <tt>assert</tt> and a few lines of test cases.  You can ignore function assert for now, but these two calls to <tt>assert</tt> checks the following two collision cases:
-If you look at <tt>test.js</tt>, each <tt>assert</tt> line is a single test case.  Currently our function is broken int the second test case.  You can start fixing the function in <tt>src/coldetect.js</tt> to make sure that you get all "OK"'s.
+Currently our function is broken in the second test case.  You can start fixing the function in <tt>src/coldetect.js</tt> to make sure that you get all "OK"'s.
 '''NOTES:''' You '''don't''' have to make the collision detection perfect to make the game fun.  For example, you don't have to think of the dot as a perfect shape that you have drawn or even a circle, but you can think of it as a simple rectangle which is large enough.  Our dot is of size 40 x 40, but we have some curve.  Therefore we can view it as a rectangle of size, say, 30 x 30 centered at the position of the player.
-Clearly these two test cases are not enough to ensure that your <tt>checkPlayerPillarCollision</tt> works correctly.  Therefore, after your code for <tt>checkPlayerPillarCollision</tt> passes these two test cases, you might want to add more test cases.  The figure below shows a few other test cases that you should try adding to the test script.
+Clearly these two test cases are not enough to ensure that your <tt>check_player_pillar_collision</tt> works correctly.  Therefore, after your code for <tt>check_player_pillar_collision</tt> passes these two test cases, you might want to add more test cases.  The figure below shows a few other test cases that you should try adding to the test script.
 [[Image:Test-coldetect-moretests.png]]

@@ แถว 486: / แถว 486: @@
 == Exercise: Collision detection ==
-We will check if our dot hits the pillar pair.  Our goal is to write method <tt>hit</tt> in class <tt>PillarPair</tt>.  '''But WAIT!! Don't start write it for now..  There will be more steps before we will do that.'''
+We will check if our dot hits the pillar pair.  Our goal is to write method <tt>hit</tt> in class <tt>PillarPair</tt>.  '''But WAIT!! Don't start write it for now.  There will be more steps before we will do that.'''
 <syntaxhighlight lang="python">
@@ แถว 504: / แถว 504: @@
 We will try to use automated testing for this part of the game.  The idea is simple: we will try to explicitly call <tt>hit</tt> in various ways to check if it returns the correct decision.
-For normal functions, this is not very hard to do.  However, in this case, it is fairly hard to directly call <tt>hit</tt> because it is a method in class derived from <tt>cc.Node</tt> for which we do not quite know how to create it outside the Cocos2d-html framework.
+For simple functions, this is not very hard to do.  However, in this case, to call method <tt>hit</tt>, we have to create the world, the pillar pair and the player.  Note that since we have already decouple our model's code from <tt>arcade</tt> we can actually do that in our unit testing code.
-We will get away with that by extracting the decision function as a stand-alone function and test it independently of the Cocos2d-JS framework.  Let's finish method <tt>hit</tt> first.
+But since this is probably the first time you learn about unit testing, we will try to make the set-up very minimal by extracting the decision function as a stand-alone function called <tt>check_player_pillar_collision</tt> and test it independently of our other codes.  Let's finish method <tt>hit</tt> first.
-{{synfile|src/PillarPair.js}}
+{{synfile|models.py}}
-<syntaxhighlight lang="javascript">
+<syntaxhighlight lang="python">
-    hit: function( player ) {
+class PillarPair:
-	var playerPos = player.getPosition();
+    # ...
-         return checkPlayerPillarCollision( playerPos.x, playerPos.y, myPos.x, myPos.y );
+    def hit(self, player):
+         return check_player_pillar_collision(player.x, player.y,
 </syntaxhighlight>
-We will write function <tt>checkPlayerPillarCollision</tt> in a separated file, so that we can test it without having to deal with Cocos2d-html5 library.
+We will write function <tt>check_player_pillar_collision</tt> in a separated file, so that we can test it more independently.
 Since this part is quite a detour, I'll give more detailed instructions.
-Let's create a (broken) function <tt>checkPlayerPillarCollision</tt> in file <tt>src/coldetect.js</tt>.
+Let's create a (broken) function <tt>check_player_pillar_collision</tt> in file <tt>coldetect.py</tt>.
-{{synfile|src/coldetect.js}}
+{{synfile|coldetect.py}}
-<syntaxhighlight lang="javascript">
+<syntaxhighlight lang="python">
 </syntaxhighlight>

←รุ่นแก้ไขก่อนหน้า		รุ่นแก้ไขเมื่อ 21:01, 13 กุมภาพันธ์ 2562
แถว 518:		แถว 518:

	== Additional Exercises ==		== Additional Exercises ==
		+	There are many ways to make the game more fun like a real game. Here we list a few:
		+
		+	* After the player dies, the game stops. Implement the game restart feature, i.e., when the player hit any key after the player dies, the game should restart.
		+	* The game shows no score. Add the scoring to the game.
		+	* Flappy dot is extremely hard because you can hit only once. Add more lives to the player.
		+	* In our game, the pillar pair can have different spacing. Implement this feature to make the game extremely hard.
		+	* You can allow the dot to fire a few rockets to destroy the pillars.
		+
		+	Good luck. Have fun writing games!
		+
		+	{{gitcomment\|Don't forget to regularly commit your work.}}