How to create the game with Phaser framework (Part9)

บทนำ (Overview)

จากบทควาที่แล้วเราสามารถสร้างภาพเคลื่อนไหว (Animation) สำหรับพระเอกของเราไม่ว่าจะเป็นการเดินไปทางซ้ายหรือเดินทางขวา (How to create the game with Phaser framework (Part8)) มาในบทความนี้เราจะสร้างดาวให้ตกมาจากฟ้า และสามารถเด้งดึ๊ง ๆ ได้ด้วยตามแรงโนมถ่วง เพื่อที่จะสามารถให้พระเอกของเราเก็บสะสมแต้มได้…

ขั้นตอน (Steps)

  1. เปิดไฟล์ “part8.html”
  2. เตือนความจำสักนิด เราเคยโหลดรูปดาวเอาไว้แล้วที่ “function preload()” และตั้งชื่ออ้างอิงว่า “star”
      function preload() {
    
        game.load.image('sky', 'assets/sky.png');
        game.load.image('ground', 'assets/platform.png');
        game.load.image('star', 'assets/star.png');
        game.load.spritesheet('dude', 'assets/dude.png', 32, 48);
    
      }
    
  3. ต่อมาเราจะสร้าง “Group” ของดาว เพื่อตั้ง “Physics” ให้เหมือนกัน
       //สร้าง Group ให้โดยใส่ไว้ในตัวแปรชื่อ Stars
       stars = game.add.group();
    
  4. และกำหนด “Physics” ทั้ง “Group” ที่ชื่อ “Stars”
       //  เปิดการใช้งาน physics ให้กับวัตถุที่อยู่ใน group
       stars.enableBody = true;
    
  5. เราจะมาสร้างดาวกัน จากชื่ออ้างอิง “star”
       //  สร้างดาวดวงแรกที่ตำแหน่ง แกน x = 70 และ แกน Y
       var star = stars.create(70, 0, 'star');
    

    game21

  6. จากนั้นใส่ค่า “Physics” แรงโน้มถ่วงตามแนวแกน y ให้ดาวร่วงลงมา
       //  ตั้งค่าแรงโน้มถ่วงให้ตัวแปร Star
       star.body.gravity.y = 300;
    

    game22

  7. แต่ปัญหาคือดาวทะลุพื้นหญ้าและแท่นหินไปเลย เป็นปัญหาเดียวกับตัวประพระเอกของเราในตอนแรกที่ยืนทะลุหญ้า ให้เขียนใน “function update()”
        //กำหนดให้ใช้งาน physics ของการชนกันระหว่าง player (วัตถุ) และ platforms (Group)
        game.physics.arcade.collide(player, platforms);
    
        //กำหนดให้ใช้งาน physics ของการชนกันระหว่าง stars (Group) และ platforms (Group)
        game.physics.arcade.collide(stars, platforms);
    

    game23

  8. แต่ดาวของเราไม่ยอมเด้งดึ๊ง เหมือนตัวพระเอกของเรา ดังนั้นเราจะมากำหนดให้เด้งดึ๊งไป และพิเศษไปกว่านั้น ความสูงของเด้งดึ๊งให้ใช้ค่าสุ่มด้วย จะทำให้ดาวของเราเด้งไม่เท่ากันในแต่ละครั้ง เราจะเขียนใน “function create()”
        //ตั้งค่าเด้งดึ๊ง โดยใช้ฟังก์ชันสุ่ม โดยมีค่าระหว่าง 0.2 ถึง 0.7
        star.body.bounce.y = 0.2 + (Math.random() * 0.7);
    
  9. ดาวเดียวไม่สนุกเราจะให้มันโผล่มาที่เดียว 10 ดวงเลยทีดียว ดังนั้นเราจะใช้ “Loop” ของ “function for”
          //ส้รางดาว 12 ดวง Loop เริ่มจากรอบ 0 จนถึงรอบ 19 จะเท่ากับ 10 รอบ
          //ดังนั้นจะสร้างค่าอ้างอิง star ใน group ของ starts ทั้ง 10 ดวง
          for (var i = 0; i < 10; i++)
          {
            var star = stars.create(70, 0, 'star');
            star.body.gravity.y = 300;
            star.body.bounce.y = 0.2 + (Math.random() * 0.7);
          }
    

    game24

  10. แต่ปัญหาที่เกิดขึ้นคือดาวดันอยู่ในตำแหน่งแกน Y ที่เดียวกันหมด เพราะฉะนั้นเพื่อความสนุกเราจะมาสุ่มตำแหน่งกันเลยดีกว่า
        for (var i = 0; i < 10; i++)
          {
            var y = 40 + (Math.random() * 300);
            var x = 40 + (Math.random() * 700);
    
            var star = stars.create(x + i, y, 'star');
            star.body.gravity.y = 300;
            star.body.bounce.y = 0.2 + (Math.random() * 0.7);
          }
    

    game25

  11. สรุป “code” ในบทความนี้
    <script type="text/javascript">
    
    var game = new Phaser.Game(800, 600, Phaser.AUTO, '', { preload: preload, create: create, update: update });
    
    function preload() {
    
        game.load.image('sky', 'assets/sky.png');
        game.load.image('ground', 'assets/platform.png');
        game.load.image('star', 'assets/star.png');
        game.load.spritesheet('dude', 'assets/dude.png', 32, 48);
    
    }
    
    function create() {
    
        game.add.sprite(0, 0, 'sky');
    
    		platforms = game.add.group();
        platforms.enableBody = true;
    
    		var ground = platforms.create(0, game.world.height - 64, 'ground');
        ground.scale.setTo(2, 2);
    
    		var ledge1 = platforms.create(400, 400, 'ground');
    		var ledge2 = platforms.create(350, 100, 'ground');
    		var ledge3 = platforms.create(-150, 250, 'ground');
    
        player = game.add.sprite(32, game.world.height - 150, 'dude');
    
        game.physics.startSystem(Phaser.Physics.ARCADE);
        game.physics.arcade.enable(player);
    
        player.body.bounce.y = 0.2;
        player.body.gravity.y = 300;
        player.body.collideWorldBounds = true;
        player.animations.add('left', [0, 1, 2, 3], 10, true);
        player.animations.add('right', [5, 6, 7, 8], 10, true);
    
        ground.body.immovable = true;
        ledge1.body.immovable = true;
        ledge2.body.immovable = true;
        ledge3.body.immovable = true;
    
        stars = game.add.group();
        stars.enableBody = true;
    
        for (var i = 0; i < 10; i++)
          {
            var y = 40 + (Math.random() * 300);
            var x = 40 + (Math.random() * 700);
    
            var star = stars.create(x + i, y, 'star');
            star.body.gravity.y = 300;
            star.body.bounce.y = 0.2 + (Math.random() * 0.7);
          }
    
        cursors = game.input.keyboard.createCursorKeys();
    
    }
    
    function update() {
    
        game.physics.arcade.collide(player, platforms);
        game.physics.arcade.collide(stars, platforms);
    
    		player.body.velocity.x = 0;
    
    		if (cursors.left.isDown)
        {
            player.body.velocity.x = -150;
            player.animations.play('left');
        }
        else if (cursors.right.isDown)
        {
            player.body.velocity.x = 150;
            player.animations.play('right');
        }
        else
        {
            player.animations.stop();
            player.frame = 4;
        }
    
        if (cursors.up.isDown && player.body.touching.down)
        {
            player.body.velocity.y = -350;
        }
    
    }
    
    </script>
    

บทความที่เกี่ยวข้อง

ใส่ความเห็น