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

Jittat: /* แบบฝึกหัด 100: ชนและเด้ง */

2019-01-18T02:48:45Z

แบบฝึกหัด 100: ชนและเด้ง

Jittat: /* A simple ball game */

2019-01-18T02:47:53Z

A simple ball game

Jittat: /* Installing Arcade */

2019-01-18T02:31:35Z

Installing Arcade

Jittat: /* Installing Arcade */

2019-01-18T01:49:58Z

Installing Arcade

Jittat: /* A simple ball game */

2019-01-17T20:21:27Z

A simple ball game

Jittat: /* The Circle class */

2019-01-17T20:12:37Z

The Circle class

Jittat: /* แบบฝึกหัด 2: ชนและสะท้อนที่ขอบ */

2019-01-17T20:06:13Z

แบบฝึกหัด 2: ชนและสะท้อนที่ขอบ

Jittat: /* แยกฟังก์ชัน */

2019-01-17T20:04:23Z

แยกฟังก์ชัน

Jittat: /* Many circles */

2019-01-17T19:04:29Z

Many circles

Jittat: /* Many circles */

2019-01-17T19:03:18Z

Many circles

@@ แถว 540: / แถว 540: @@
 Instead of just call <tt>quit()</tt> to quit instantly, you should change the code so that it ends more smoothly, e.g., all balls stop or the player get hidden.
-== แบบฝึกหัด 100: ชนและเด้ง ==
+== Exercise 100: Hit and bounce ==
-ถ้าทำมาถึงจุดนี้ ลองเขียนให้ลูกบอลเด้งเวลาชนกันเองด้วย
+If you are at this point, try to modify the game so that the balls bounce when they hit each other.

@@ แถว 472: / แถว 472: @@
 </syntaxhighlight>
-==== ส่งปุ่มให้ player ====
+==== The player's control ====
-เพิ่มเมท็อด control ในคลาส Player ที่ตอนนี้ตรวจการกดปุ่มซ้ายอย่างเดียว
+Add method <tt>control</tt> in class <tt>Player</tt>.  The code currently detects only the LEFT key.
 <syntaxhighlight lang="python">
 class Player:
-     # ... ละโค้ดเก่าไว้
+     # ... old code hidden
      def control(self, keys):
@@ แถว 485: / แถว 485: @@
 </syntaxhighlight>
-จากนั้นเรียก player.control จาก on_draw
+Function <tt>on_draw</tt> then calls <tt>player.control</tt> to inform the player of the key pressed.
 <syntaxhighlight lang="python">
@@ แถว 499: / แถว 499: @@
 </syntaxhighlight>
-==== แบบฝึกหัด 4: เพิ่มการอ่านปุ่มขึ้นลงขวาให้ครบ ====
+==== Exercise 4: all the arrows ====
-แก้เมท็อด Player.control ให้ตรวจสอบการเคลื่อนที่ให้ครบทุกทิศทาง
+Modify <tt>Player.control</tt> so that it detects key pressed for all other directions (e.g., up, down, right).
-=== แบบฝึกหัด 5: โดนชน ===
+=== Exercise 5: Collision detection ===
-เขียนเมท็อด is_hit ที่ตรวจสอบว่า player ชนกับ circle หรือไม่
+Write method <tt>is_hit</tt> that detects collision between the player and a circle.
 <syntaxhighlight lang="python">
 class Player:
-     # ... โค้ดอื่น ๆ ไม่แสดง
+     # ... other code hidden
      def is_hit(self, circle):
-         # ... ตรวจสอบว่า self ชนกับ circle หรือเปล่า
+         # ... checks of self hits with circle
-         # ทำโดยพิจารณาตำแหน่ง self.x, self.y กับ circle.x และ circle.y กับรัศมี circle.r
+         # The method should consider self.x, self.y and circle.x and circle.y with radius circle.r
-         # อย่าลืมว่า player มีรัศมี 10
+         # Don't forget that the player has radius of 10
+         #
-         # method นี้คืนค่า True หรือ False
+         # The method should return True or False
 </syntaxhighlight>
-ใน on_draw ให้เรียก is_hit  ถ้าจริงให้จบเลย
+You can use <tt>is_hit</tt> in <tt>on_draw</tt>.  If the player is hit, the code stops (with <tt>quit()</tt>).
 <syntaxhighlight lang="python">
@@ แถว 534: / แถว 534: @@
 </syntaxhighlight>
-ถ้าเกมยากไป (เปิดมาตายเลย) ให้ลดจำนวนลูกบอล หรือเปลี่ยนการสุ่มให้ไม่อยู่กลางหน้าจอมากไป
+If your game is too hard (you get instantly dead), you should reduce the number of balls or try to random balls not too close to the center.
-=== แบบฝึกหัด 6: จบแบบเนียนๆ ===
+=== Exercise 6: smoother end ===
-แทนที่จะ quit เลย ให้แก้โปรแกรมให้จบได้เนียนกว่าเดิม เช่นลูกบอลหยุด หรือ player หายไป หรืออะไรก็ได้
+Instead of just call <tt>quit()</tt> to quit instantly, you should change the code so that it ends more smoothly, e.g., all balls stop or the player get hidden.
 == แบบฝึกหัด 100: ชนและเด้ง ==
 ถ้าทำมาถึงจุดนี้ ลองเขียนให้ลูกบอลเด้งเวลาชนกันเองด้วย

@@ แถว 88: / แถว 88: @@
   pip install arcade
-'''หมายเหตุ:''' ถ้าติดตั้งด้วย pip แล้ว pip เอาไปลงกับ Python 3.5 ให้ ให้สั่งแบบนี้แทน (ขอบคุณศิรกร):
+'''Remarks:''' If you install arcade with <tt>pip</tt>, but <tt>pip</tt> puts it in Python 3.5's packages, use the following command to install:
   python3.6 -m pip install arcade
 === virtualenv ===
-เราติดตั้ง arcade ลงใน library ของระบบเลย ซึ่งทำแบบนี้บ่อย ๆ อาจจะทำให้ library เละและตีกันได้ Python มีระบบสำหรับติดตั้ง library แยกกัน เรียกว่า virtualenv
+We install <tt>arcade</tt> into the system's library.  If you work intensively with Python, having many packages in the system may causes version clashes, you might want to install library locally using ''virtualenv''.  Try to google it if you want to try.
 : ''Sorry NOT READY: to do - how to install with virtualenv''

@@ แถว 54: / แถว 54: @@
 ==== 1. Installing pip on Windows ====
-pip จะมาพร้อมกับการติดตั้ง python  ให้เลือก option ดังกล่าวด้วย  ถ้าเปิด command แล้วเรียก pip ขึ้นก็แสดงว่าได้ติดตั้งเรียบร้อย  ถ้าไม่มี ให้ลองติดตั้ง python3 อีกครั้ง และให้เลือก pip ในหน้า Optional Features ด้วย
+<tt>pip</tt> comes with python.  Don't forget to check an option to include pip.  If it's not available on the command line, try to install Python 3 again.
-* ดูรายละเอียดการติดตั้งที่นี่ [https://pythonhosted.org/arcade/installation_windows.html arcade installation บน windows]
+* Read instructions here: [https://pythonhosted.org/arcade/installation_windows.html arcade installation บน windows]
 ==== 2. Installing pip3 on Linux ====
-ให้ติดตั้ง pip3 และโปรแกรมประกอบอื่น ๆ โดยสั่ง
+Install pip3 with other programs with
   sudo apt install -y python3-dev python3-pip libjpeg-dev zlib1g-dev
-==== 3. ติดตั้ง pip3 บน Mac ====
+==== 3. Installing pip3 on Mac ====
-ถ้าติดตั้ง python3 แล้ว น่าจะมี pip3 มาแล้ว ทดลองเรียกดูใน terminal
+<tt>pip3</tt> usually comes with Python 3.  Try to call it from the terminal.
-บน Mac จะต้องติดตั้ง libjpg ด้วย ถ้ายังไม่มี  ถ้าคุณมี homebrew อยู่แล้ว ให้สั่ง
+On Mac, you have to install <tt>libjpg</tt>.  If you have <tt>homebrew</tt>, call
   brew install libjpeg
-ถ้าไม่ได้ ให้ไปดาวน์โหลดและ install จาก [http://ethan.tira-thompson.com/Mac_OS_X_Ports.html] (เลือก libjpg)
+If it doesn't work, download and install from [http://ethan.tira-thompson.com/Mac_OS_X_Ports.html].  (choose libjpg)
 === Use pip to install arcade ===
-For Ubuntu, ถ้าในการติดตั้ง python เราได้ลง pip มาแล้ว เราจะสามารถติดตั้ง arcade ผ่านทาง pip ได้โดยสั่ง
+For Ubuntu, install arcade using pip (or pip3) with
   sudo pip3 install arcade

@@ แถว 407: / แถว 407: @@
 == A simple ball game ==
-เราจะเขียนเกมหลบลูกบอล  ให้ copy โค้ดจากส่วนก่อน ๆ ลงในไฟล์ชื่อ <tt>cir4.py</tt> แล้วทำงานต่อที่ไฟล์นี้
+We will write a simple game.  Copy the code from the previous section into file <tt>cir4.py</tt> and work on this new file.
-เราจะนิยามคลาส Player โดย player จะเป็นวงกลมรัศมี 10 สีน้ำเงิน
+We define class '''Player'''.  We show on screen as a blue ball with radius 10.
 <syntaxhighlight lang="python">
@@ แถว 422: / แถว 422: @@
 </syntaxhighlight>
-สร้าง object ของคลาส Python ไว้บริเวณใกล้ ๆ กับที่ประกาศ circles   (การหาร // คือหารปัดเศษ)
+Add the code for creating an object of class Player near the code where we declare <tt>circles</tt>. (Operator // is an integer division.)
 <syntaxhighlight lang="python">
@@ แถว 430: / แถว 430: @@
 </syntaxhighlight>
-เพิ่มโค้ดให้แสดง player ใน on_draw
+Show the player in <tt>on_draw</tt>.
 <syntaxhighlight lang="python">
@@ แถว 443: / แถว 443: @@
 </syntaxhighlight>
-=== ขยับ player ===
+=== Move the player ===
-ขั้นตอนนี้จะยุ่งยากเล็กน้อย เนื่องจากเราจะใช้การอ่านการกดปุ่มแบบอ่านสถานะ  ในการเขียนครั้งถัด ๆ ไปจะสะดวกกว่านี้
+We shall control the player through the keyboard.  This step is technically tedious because we have to read the keyboard statuses.  In later tutorials, we will use a simpler method.
-==== เตรียมการอ่าน keys ====
+==== Preparing to read keys ====
-เราจะใช้ส่วนอ่านการกดปุ่มจากไลบรารี pyglet ดังนั้นต้องไป import ก่อน (ใส่ตรงหัวโปรแกรม)
+We will use library <tt>pyglet</tt> to read the keyboard statuses.  So you have to import it at the beginning of the code.
 <syntaxhighlight lang="python">

@@ แถว 338: / แถว 338: @@
 == The Circle class ==
-สังเกตว่าในโค้ดชุดก่อน เราจะจัดการกับลูกบอลโดยพิจารณาตัวแปรที่เกี่ยวข้องกัน 4 ตัวคือ x, y, vx, และ vy แทบจะตลอดเวลา  เราจะ '''extract''' ตัวแปรที่เกี่ยวข้องกันนี้ออกมาเป็น object ของคลาส Circle
+Observe that for each ball, we maintain four variables, i.e., <tt>x, y, vx,</tt> and <tt>vy</tt>.  We shall '''extract''' these variables into a class '''<tt>Circle</tt>'''
-ให้ย้ายโค้ดจากส่วนที่แล้วมาเขียนใหม่ในไฟล์ <tt>cir3.py</tt>
+Move all code into file <tt>cir3.py</tt>.
-คลาสดังกล่าวเขียนบางส่วนได้ดังนี้  อย่าลืมว่าใน python เวลาเขียนเมท็อดจะมีตัวแปร self (ที่เป็นตัวแปรตัวแรก) แทน object ที่ทำงานด้วย  และเมท็อด __init__ จะเป็นเมท็อดพิเศษที่ใช้ในการกำหนดค่าเริ่มต้นให้กับ object
+Clsss <tt>Circle</tt> can be written as follows.   Note that class methods have additional <tt>self</tt> argument that represents the current object the methods are dealing with.  Method <tt>__init__</tt> is a special one that initializes the object.
 <syntaxhighlight lang="python">
@@ แถว 356: / แถว 356: @@
          self.y += self.vy
-         # เพิ่มโค้ดส่วนจัดการการชนขอบจอที่นี่ด้วย
+         # TODO: add the bouncing code here.
      def draw(self):
@@ แถว 363: / แถว 363: @@
 </syntaxhighlight>
-แก้ส่วนสร้าง object
+With class Circle, we update the code that creates the balls.
 <syntaxhighlight lang="python">
@@ แถว 378: / แถว 378: @@
 </syntaxhighlight>
-แก้เมท็อด <tt>on_draw</tt>
+Also, we need to modify <tt>on_draw</tt>.
 <syntaxhighlight lang="python">
@@ แถว 386: / แถว 386: @@
      for c in circles:
          c.move()
          c.draw()
 </syntaxhighlight>
-=== แบบฝึกหัด 3: วงกลมที่มีหลายขนาด ===
+=== Exercise 3: Circles of many sizes ===
-เราจะเพิ่มตัวแปร r ลงใน Circle โดยให้มีค่าเป็น 20 ถ้าไม่มีการระบุตอนสร้าง
 <syntaxhighlight lang="python">
@@ แถว 403: / แถว 404: @@
 </syntaxhighlight>
-ให้แก้โค้ดที่เกี่ยวข้องให้สุ่มมาแล้วมีลูกบอลหลายขนาดเคลื่อนที่ในหน้าจอ
+Modify the rest of the code so that the programs generates balls with different sizes and shows these balls on the screen.
 == A simple ball game ==

@@ แถว 333: / แถว 333: @@
 </syntaxhighlight>
-=== แบบฝึกหัด 2: ชนและสะท้อนที่ขอบ ===
+=== Exercise 2: Bounce ===
-โปรแกรมที่มีลูกบอลหลายลูกที่เราเขียนยังไม่ได้มีการจัดการเรื่องการชนกับขอบ ให้แก้ฟังก์ชัน <tt>move_circle</tt> ให้ตรวจสอบและปรับทิศทางของลูกบอลให้สะท้อนกลับมาด้วย
+The program with many balls does not deal with screen edges.  Modify function <tt>move_circle</tt> so that it checks the situation and updates the balls speeds so that the balls bounce at the screen edges.
 == The Circle class ==

@@ แถว 314: / แถว 314: @@
 '''Quick question:''' What can you do to improve the current code to make it more readable and maintainable?
-=== แยกฟังก์ชัน ===
+=== Split the function ===
-ฟังก์ชัน <tt>draw_and_move_circle</tt> เป็นตัวอย่างของฟังก์ชันที่พยายามทำหลายอย่างมากเกินไป เราจะแยกฟังก์ชันออกเป็นสองฟังก์ชัน แล้วเรียกใน <tt>on_draw</tt>
+Function <tt>draw_and_move_circle</tt> is a good example of a function that tries to do too many things.   We will split it into two functions and calls them in <tt>on_draw</tt>.
 <syntaxhighlight lang="python">

@@ แถว 241: / แถว 241: @@
 == Many circles ==
-เราจะแก้โปรแกรมให้มีลูกบอลวิ่งไปมาหลาย ๆ ลูก  ให้เซฟโปรแกรมที่เขียนในไฟล์ใหม่ชื่อ <tt>cir2.py</tt>
+After this point, we will refer to circles as balls interchangeably.
-เราจะสุ่มตำแหน่งและความเร็วของลูกบอลด้วยฟังก์ชัน <tt>randint</tt> ดังนั้นให้เพิ่มบรรทัด import ดังด้านล่าง
+We will modify our code so that we have many moving circles.  Save the new code for this section in file <tt>cir2.py</tt>.
 <syntaxhighlight lang="python">
@@ แถว 250: / แถว 252: @@
 </syntaxhighlight>
-เราจะเก็บตำแหน่งและความเร็วในแกนต่าง ๆ ของลูกบอลในลิสต์ xs, ys, vxs, vys และจำนวนลูกบอลในตัวแปร n
+We use lists to keep circles' co-ordinates and speeds in lists <tt>xs, ys, vxs, vys</tt> and the number of circles.
 <syntaxhighlight lang="python">
@@ แถว 267: / แถว 269: @@
 </syntaxhighlight>
-เราจะเขียนฟังก์ชันสำหรับจัดการลูกบอลลูกที่ i ในรายการดังด้านล่าง จากนั้น <tt>on_draw</tt> จะเรียกฟังก์ชันนี้  สังเกตว่าเรายังไม่ได้จัดการการชนขอบจอ
+The following function <tt>draw_and_move_circle</tt> handles the i-th ball in the list.  Function <tt>on_draw</tt> will call this function.   Note that the code below does not include the code for bouncing with screen edges.
 <syntaxhighlight lang="python">
@@ แถว 276: / แถว 278: @@
      arcade.draw_circle_outline(xs[i], ys[i], 20, arcade.color.BLACK)
 </syntaxhighlight>
-−
-<tt>on_draw</tt> วนลูบเรียกฟังก์ชัน <tt>draw_and_move_circle</tt>
+Function <tt>on_draw</tt> iteratively calls <tt>draw_and_move_circle</tt>.
 <syntaxhighlight lang="python">
@@ แถว 287: / แถว 289: @@
 </syntaxhighlight>
-อย่าลืมเรียก initialize ใน main
+We are ready to add our main function.  Don't forget to call <tt>initialize</tt> in it.
 <syntaxhighlight lang="python">
@@ แถว 299: / แถว 301: @@
      arcade.schedule(on_draw, 1 / 80)
      arcade.run()
 </syntaxhighlight>