Oop lab/flappy dot

หน้านี้เป็นส่วนหนึ่งของ oop lab

อ่านเวอร์ชันที่เป็น JavaScript บน Cocos2d-html5

แสดง Dot

เริ่มโปรเจ็คและหน้าจอว่าง

สร้าง project ชื่อ flappydot จากนั้นสร้าง Git repository สำหรับ project นี้ด้วย

สร้าง class FlappyDotGame ซึ่งจะเป็นคลาสหลักของเกมเรา จากนั้นให้เพิ่มเมท็อด render, init, update และสร้างเมท็อด main ที่เริ่มเกม (ดูจากเอกสารก่อน)

public class FlappyDotGame extends BasicGame {

  public FlappyDotGame(String title) {
    super(title);
  }

  // ... เพิ่มเอง
}

เมื่อทดลองรันและเห็นหน้าจอว่าง ให้ commit งานลงใน Git ต่อไปเพื่อเป็นการเตือนให้คุณ commit งาน เราจะใส่ย่อหน้าดังด้านล่างไว้เตือน

Commit งานที่คุณเขียน

แสดงสี background

เกมนี้เราจะไม่ใช้ background เป็นสีดำแล้ว เราจะแก้สี background ได้ โดยกำหนด background ลงใน graphics ของเกม เพิ่มคำสั่งเหล่านี้ในเมท็อด init

  @Override
  public void init(GameContainer container) throws SlickException {
    Color background = new Color(128, 128, 128);
    container.getGraphics().setBackground(background);        
  }

ทดลองรันเพื่อดูว่า background แสดงสีเทาหรือไม่? ปรับค่าสีตามใจชอบ

แสดง Dot

สร้างรูป dot.png สำหรับแสดงตัวผู้เล่น ให้สร้างให้มีขนาด 40 x 40 จุด จากนั้นให้ copy ไฟล์ไปไว้ที่ res/dot.png

เราจะสร้างคลาส Dot สำหรับจัดการแสดงผลตัวผู้เล่น และคำนวณการเคลื่อนที่ รวมถึงจัดการอื่น ๆ คลาสดังกล่าวจะถูกเรียกใช้โดย FlappyDotGame ดังนี้:

  @Override
  public void init(GameContainer container) throws SlickException {
    dot = new Dot(320, 240);
  }

  @Override
  public void render(GameContainer container, Graphics g) throws SlickException {
    dot.render();
  }

อย่าลืมเพิ่มบรรทัดที่ประกาส field ของ Dot ด้วย

  private Dot dot;

ด้านล่างแสดงคลาส Dot

public class Dot {

  private float x;
  private float y;
  private Image image;

  public Dot(float x, float y) throws SlickException {
    this.x = x;
    this.y = y;
    image = new Image("res/dot.png");
  }
  
  public void render() {
    image.draw(x - 20, 480 - (y + 20));
  }
}

ข้อสังเกต:

• พิกัดต่าง ๆ เป็น float (เพราะว่าเราต้องการปรับความเร็ว/ความเร่งให้ละเอียดขึ้น และ Slick2D รับพิกัดเป็น float อยู่แล้ว)
• ในเมท็อด render เรามีการแปลงตำแหน่งที่จะวาดรูป โดยเราเลื่อนพิกัดแกน x ไป -20 หน่วย, ส่วนพิกัดในแกน y นั้น เรากลับข้างมัน เพราะว่าในการคิด physics เรามักนิยมคิดค่าในแกน y เป็นความสูง แต่ทิศทางของแกน y ในการวาด graphics นั้น นับจุด (0,0) เป็นจุดมุมบนซ้าย

ทดลองสั่งให้โปรแกรมทำงาน ถ้าโปรแกรมแสดงจุดที่ตรงกลางหน้าจออย่างถูกต้อง ให้ commit งานของคุณ

จัดการกับค่าคงที่ (magic number)

สังเกตว่าในโปรแกรมมีการใช้ค่าคงที่ต่าง ๆ เป็นจำนวนมาก เช่น ค่าคงที่ที่เกี่ยวกับกับขนาดหน้าจอของเกม (640, 480, 320, และ 240) การใช้ค่าดังกล่าวทำให้ถ้ามีการแก้ไข เราจะต้องไปแก้หลายที่ และทำให้เกิดความยุ่งยากเวลาเราอ่านโค้ด เพราะว่าเราอาจจะไม่แน่ใจว่าค่าดังกล่าวหมายถึงอะไร

เราจะประกาศค่าคงที่ดังกล่าวในคลาส FlappyDotGame และใช้ค่าคงที่นั้น (แบบที่มีชื่อแล้ว) ในโปรแกรมแทน เราสามารถประกาศค่าคงที่ด้วย keyword final โดยเราจะประกาศแบบ public static ให้เป็นค่าคงที่ของคลาส และเปิดให้คลาสอื่น ๆ ใช้ได้ด้วย

เพิ่มบรรทัดเหล่านี้ในตอนต้นคลาส FlappyDotGame

public class FlappyDotGame extends BasicGame {

  public static final int GAME_WIDTH = 640;
  public static final int GAME_HEIGHT = 480;

  // ...
}

จากนั้นให้แก้โค้ดบรรทัดต่าง ๆ ที่มีการใช้ค่าเหล่านี้ให้เรียกผ่านทางค่าคงที่แบบมีชื่อที่เราสร้างนี้ เช่น

  // ...
  @Override
  public void init(GameContainer container) throws SlickException {
    dot = new Dot(GAME_WIDTH/2, GAME_HEIGHT/2);
  }

  public static void main(String[] args) {
      // ...
      container.setDisplayMode(GAME_WIDTH, GAME_HEIGHT, false);
  }
  // ...

ทดลองว่าโปรแกรมทำงานได้ไม่ต่างจากเดิม แล้ว commit

การเคลื่อนที่และการควบคุม Dot

การอ่าน input แบบ event-based

• Event based input