How to create Flappy Bird (Part 1) – Create game world

บทนำ (Overview)

เราจะมาลองเขียนนกข้ามท่อ (Flappy Bird) จากนั้นจะดัดแปลงเป็นนกแนวประหลาด ๆ ก็สนุกดีนะครับ

flappy18

ขั้นตอน (Steps)

  1. สร้าง “HTML” ไฟล์สำหรับแสดงผล “Game” ชื่อ “flappy.html”
    <!doctype html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8" />
    	<title>Flappy Bird</title>
            <!--โหลด phaser และ game ของเรา -->
    	<script type="text/javascript" src="js/phaser.min.js"></script>
    	<script type="text/javascript" src="js/main.js"></script>
    </head>
    <body>
    <!--ตั้งชื่อ Id เพื่อให้เกมส์แสดงผลใน div -->
    <div id="flappyDiv"> </div>
    </body>
    </html>
    
  2. จากคำสั่งด้านบนสามารถอธิบายได้ว่า ให้สร้าง “folder” ชื่อ “js” เก็บไฟล์ “javascript” สองไฟล์ คือ “phaser.min.js” และ “main.js” และสร้าง <div> ตั้งชื่อว่า “flappyDiv” เพื่อให้เกมส์ที่เขียนมาแสดง
    |_flappy.html
    |_/js
        |_phaser.min.js
        |_main.js
    
  3. ในส่วน main.js เราจะเขียนเกมส์ในส่วนนี้กัน
    //เราจะสร้าง Game Wolrd ของเราขึ้นมาขนาด 400 x 490
    //โดยใช้ระบบ Render แบบ Auto
    //และให้ Game แสดงผลใน flappyDiv คือส่วนของ <div> ที่กำหนดไว้ใน flappy.html
    //จากนั้นสร้าง Game World ไว้ใน ตัวแปร game
    var game = new Phaser.Game(400, 490, Phaser.AUTO, 'flappyDiv');
    
    //ส่วนของ logic เกมส์ที่เราเขียนแล้วเก็บไว้ในตัวแปร mainstate
    var mainState = {
    
        preload: function() {
            //พื่นที่สำหรับโหลด /assets
        },
    
        create: function() {
            //พื่นที่ setup game และแสดงผล
        },
    
        update: function() {
            //พื่นที่ loop game 60 times ต่อวินาที
            //ไว้เขียน logic
        },
    };
    
    //ตัวแปร mainState จะถูกสร้างเป็น state ตั้งชื่อเป็น main
    game.state.add('main', mainState);
    //เริ่มต้น state
    game.state.start('main');
    
  4. สร้างสีให้ “Background” สำหรับ “Game” ของเรา
        preload: function() {
           game.stage.backgroundColor = '#71c5cf';
        }
    

    flappy1

  5. สามารถดาวน์โหลด source-code ได้ที่ https://gist.github.com/thaisingle/aa146d9806229d2bf26f

ใส่ความเห็น