ผลต่างระหว่างรุ่นของ "Se63/typescript/zombie"
ไปยังการนำทาง
ไปยังการค้นหา
Jittat (คุย | มีส่วนร่วม) |
Jittat (คุย | มีส่วนร่วม) |
||
| แถว 67: | แถว 67: | ||
ทำความเข้าใจกันก่อน | ทำความเข้าใจกันก่อน | ||
* <tt>gameBoard</tt> เป็น global ทำให้เราเรียก <tt>gameBoard.step()</tt> ใน console ให้เกมทำงานทีละขั้นได้ | * <tt>gameBoard</tt> เป็น global ทำให้เราเรียก <tt>gameBoard.step()</tt> ใน console ให้เกมทำงานทีละขั้นได้ | ||
| + | |||
| + | == clean showBoard กันก่อน == | ||
| + | |||
| + | เมทอด <tt>showBoard</tt> นั้นค่อนข้างยาวและอ่านยาก เราจะแยกเป็น method ย่อย ๆ โดยเราจะแยกเป็น <tt>initBoardArray</tt> กับ <tt>showBoardArray</tt> | ||
| + | |||
| + | <pre> | ||
| + | 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; | ||
| + | } | ||
| + | |||
| + | showBoardArray(boardRows: char[][]) { | ||
| + | let boardStr = boardRows.map((row) => { | ||
| + | return row.join('') + "\n"; | ||
| + | }).join(''); | ||
| + | |||
| + | let boardElement = document.getElementById('gameBoard'); | ||
| + | boardElement.innerHTML = boardStr; | ||
| + | } | ||
| + | |||
| + | 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); | ||
| + | } | ||
| + | </pre> | ||
| + | |||
== แกะ player และ bots == | == แกะ player และ bots == | ||
รุ่นแก้ไขเมื่อ 06:45, 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 กับ 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;
}
showBoardArray(boardRows: char[][]) {
let boardStr = boardRows.map((row) => {
return row.join('') + "\n";
}).join('');
let boardElement = document.getElementById('gameBoard');
boardElement.innerHTML = boardStr;
}
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);
}
