ผลต่างระหว่างรุ่นของ "Se63/typescript/zombie"

จาก Theory Wiki
ไปยังการนำทาง ไปยังการค้นหา
แถว 70: แถว 70:
 
== clean showBoard กันก่อน ==
 
== clean showBoard กันก่อน ==
  
เมทอด <tt>showBoard</tt> นั้นค่อนข้างยาวและอ่านยาก เราจะแยกเป็น method ย่อย ๆ โดยเราจะแยกเป็น <tt>initBoardArray</tt> กับ <tt>showBoardArray</tt>
+
เมทอด <tt>showBoard</tt> นั้นค่อนข้างยาวและอ่านยาก เราจะแยกเป็น method ย่อย ๆ โดยเราจะแยกเป็น <tt>initBoardArray</tt>, <tt>boardArrayToStr</tt> กับ <tt>showBoardArray</tt>
  
 
<pre>
 
<pre>
แถว 85: แถว 85:
 
   }
 
   }
  
   showBoardArray(boardRows: char[][]) {
+
   boardArrayToStr(boardRows: char[][]): string {
     let boardStr = boardRows.map((row) => {
+
     return boardRows.map((row) => {
 
       return row.join('') + "\n";
 
       return row.join('') + "\n";
 
     }).join('');
 
     }).join('');
   
+
  }
 +
 
 +
  showBoardArray(boardRows: char[][]) {
 
     let boardElement = document.getElementById('gameBoard');
 
     let boardElement = document.getElementById('gameBoard');
     boardElement.innerHTML = boardStr;
+
     boardElement.innerHTML = this.boardArrayToStr(boardRows);;
 
   }
 
   }
  
แถว 105: แถว 107:
 
   }
 
   }
 
</pre>
 
</pre>
 
  
 
== แกะ player และ bots ==
 
== แกะ player และ bots ==

รุ่นแก้ไขเมื่อ 06:48, 10 กรกฎาคม 2563

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

ใส่ใน jsfiddle

ส่วน HTML

<html>
  <body>
    <pre id="gameBoard"></pre>
  </body>
</html>

ส่วน Typescript (เลือก Javascript เปลี่ยนภาษาเป็น Typescript)

const boardHeight = 30;
const boardWidth = 50;

class GameBoard {
  constructor() {
    this.pX = 25;
    this.pY = 15;
    this.botCount = 5;
    this.botXs = [10,20,30,40,50];
    this.botYs = [5,10,20,15,25,12]
  }

  showBoard() {
    let boardRows = [];
    for (let i = 0; i < boardHeight; i++) {
      let rowChars = [];
      for (let j = 0; j < boardWidth; j++) {
        rowChars.push(' ');
      }
      boardRows.push(rowChars);
    }
    
    boardRows[this.pY][this.pX] = '@';
    for (let i = 0; i < this.botCount; i++) {
      boardRows[this.botYs[i]][this.botXs[i]] = 'B';
    }
    
    let boardStr = boardRows.map((row) => {
      return row.join('') + "\n";
    }).join('');
    
    let boardElement = document.getElementById('gameBoard');
    boardElement.innerHTML = boardStr;
  }
  
  moveBots() {
    for (let i=0; i < this.botCount; i++) {
      this.botXs[i]--;
    }
  }
  
  step() {
    this.moveBots();
    this.showBoard();
  }
}

gameBoard = new GameBoard();
gameBoard.showBoard();

ทำความเข้าใจกันก่อน

  • gameBoard เป็น global ทำให้เราเรียก gameBoard.step() ใน console ให้เกมทำงานทีละขั้นได้

clean showBoard กันก่อน

เมทอด showBoard นั้นค่อนข้างยาวและอ่านยาก เราจะแยกเป็น method ย่อย ๆ โดยเราจะแยกเป็น initBoardArray, boardArrayToStr กับ showBoardArray

  initBoardArray(): char[][] {
    let boardRows = [];
    for (let i = 0; i < boardHeight; i++) {
      let rowChars = [];
      for (let j = 0; j < boardWidth; j++) {
        rowChars.push(' ');
      }
      boardRows.push(rowChars);
    }
    return boardRows;
  }

  boardArrayToStr(boardRows: char[][]): string {
    return boardRows.map((row) => {
      return row.join('') + "\n";
    }).join('');
  }

  showBoardArray(boardRows: char[][]) {
    let boardElement = document.getElementById('gameBoard');
    boardElement.innerHTML = this.boardArrayToStr(boardRows);;
  }

  showBoard() {
    let boardRows = this.initBoardArray();
    
    boardRows[this.pY][this.pX] = '@';
    for (let i = 0; i < this.botCount; i++) {
      boardRows[this.botYs[i]][this.botXs[i]] = 'B';
    }
    
    this.showBoardArray(boardRows);
  }

แกะ player และ bots

interface

Bots รูปแบบอื่น ๆ