Se63/typescript/zombie - ประวัติรุ่นแก้ไข

Jittat: /* สุ่มตำแหน่ง bot */

2020-07-13T07:11:24Z

สุ่มตำแหน่ง bot

2020-07-13T07:11:04Z

สุ่มตำแหน่ง bot

2020-07-13T06:54:34Z

GamePiece

2020-07-13T03:32:13Z

โค้ดเริ่มต้น

2020-07-13T03:24:48Z

โค้ดเริ่มต้น

2020-07-13T03:21:57Z

โค้ดเริ่มต้น

2020-07-12T20:14:40Z

GamePiece

2020-07-12T20:11:28Z

สถานะเป็นตาย และการชนกัน

2020-07-12T20:10:50Z

GamePiece

2020-07-10T11:12:00Z

สถานะเป็นตาย และการชนกัน

@@ แถว 340: / แถว 340: @@
 class GameBoard {
    // ..
    randomBots(n: number) {
      // ** YOUR JOB HERE **
+   }
+}

@@ แถว 340: / แถว 340: @@
 class GameBoard {
    // ..
-   def randomBots(n: number) {
+   randomBots(n: number) {
      // ** YOUR JOB HERE **
+   }

@@ แถว 214: / แถว 214: @@
 </syntaxhighlight>
-แกะ method <tt>drawPiece</tt>
+เพื่อจะวาด ชิ้นเกมต่าง ๆ เราจะใช้ method <tt>drawPiece</tt>  ซึ่งแกะมาจากโค้ด showBoard  (เขียนในคลาส GameBoard)
 <syntaxhighlight lang="typescript">
    drawPiece(boardRows: char[][], piece: GamePiece) {
      boardRows[piece.y][piece.x] = piece.getPieceChar();
+   }
 </syntaxhighlight>
-แล้ววาดของลงไปด้วยโค้ดเดียวกัน (สร้างอาร์เรย์ <tt>elements</tt> ขึ้นมาก่อน โดยรวม this.bots และ this.player
+จากนั้นแก้เมท็อด showBoard ให้เรียกใช้ drawPiece โดยวาดของลงไปด้วยโค้ดเดียวกัน (สร้างอาร์เรย์ <tt>elements</tt> ขึ้นมาก่อน โดยรวม this.bots และ this.player
 <syntaxhighlight lang="typescript">
      let elements = [...this.bots, this.player];
@@ แถว 229: / แถว 242: @@
        board.drawPiece(boardRows, piece);
      });
 </syntaxhighlight>

@@ แถว 27: / แถว 27: @@
      this.botCount = 5;
      this.botXs = [10,20,30,40,50];
-     this.botYs = [5,10,20,15,25,12]
+     this.botYs = [5,10,20,15,25];
+   }

@@ แถว 1: / แถว 1: @@
 == โค้ดเริ่มต้น ==
-ใส่ใน https://playcode.io/ (jsfiddle ใช้ typescript รุ่นเก่า)
+ใส่ใน https://playcode.io/ (ไม่ควรใช้ jsfiddle เพราะ jsfiddle ใช้ typescript รุ่นเก่า)
 ส่วน HTML
@@ แถว 70: / แถว 70: @@
 ทำความเข้าใจกันก่อน
-* <tt>gameBoard</tt> เป็น global ทำให้เราเรียก <tt>gameBoard.step()</tt> ใน console ให้เกมทำงานทีละขั้นได้
+* <tt>gameBoard</tt> เป็น global ทำให้เมื่อเวลาเรากดปุ่ม step ในหน้าจอจะสามารถเรียก <tt>gameBoard.step()</tt> ให้เกมทำงานทีละขั้นได้
 == clean showBoard กันก่อน ==

@@ แถว 6: / แถว 6: @@
 <syntaxhighlight lang="html">
 <pre id="gameBoard"></pre>
 </syntaxhighlight>
 ส่วน Typescript (เลือก Javascript เปลี่ยนภาษาเป็น Typescript)

@@ แถว 223: / แถว 223: @@
 </syntaxhighlight>
-'''หมายเหตุ''': ในฟังก์ชันใน <tt>forEach</tt> เราใช้ this แทน gameBoard ไม่ได้ เพราะว่าจะมีการตีความเป็นอย่างอื่น เลยต้องสร้างตัวแปรพิเศษมาเก็บค่าไว้
+'''หมายเหตุ 1''':  สังเกตการใช้ <tt>[...this.bots, this.player]</tt> ในการสร้าง array ที่นำค่ามาจาก this.bots  จะพบใน Javascript สามารถทำได้กับ object ด้วย
 == move bots ==

@@ แถว 366: / แถว 366: @@
    isHit(other: GamePiece): boolean {
-     return ((this.getX() == other.getX()) &&
+     return ((this.x == other.x) &&
-             (this.getY() == other.getY()));
+             (this.y == other.y));
+   }
+}

@@ แถว 191: / แถว 191: @@
    constructor(public x: number, public y: number) {}
    getPieceChar(): string { return '*'; }
+}
@@ แถว 211: / แถว 209: @@
 <syntaxhighlight lang="typescript">
    drawPiece(boardRows: char[][], piece: GamePiece) {
-     boardRows[piece.getY()][piece.getX()] = piece.getPieceChar();
+     boardRows[piece.y][piece.x] = piece.getPieceChar();
+   }
 </syntaxhighlight>

@@ แถว 326: / แถว 326: @@
 == สถานะเป็นตาย และการชนกัน ==
-เราจะเพิ่ม property <tt>isAlive</tt> ให้กับ bot  เราจะแก้ให้ moveTo ทำงานก็ต่อเมื่อ this.isAlive เป็นจริง
+เราจะเพิ่ม property <tt>isAlive</tt> ให้กับ bot  นอกจากนี้เราจะแก้ให้ moveTo ทำงานก็ต่อเมื่อ this.isAlive เป็นจริง
 <syntaxhighlight lang="typescript">