How to create the game with Phaser framework (Part7)

บทนำ (Overview)

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

ขั้นตอน (Steps)

  1.  เปิดไฟล์ “part7.html”
  2. เราจะต้องมากำหนดก่อนว่าตัวพรเอกของเราจะใช้ “Keyboard” ในการควบคุม ซึ่งสามารถกำหนดได้ในส่วนของ “function create()”
        //  กำหนดให้มีการรับค่าทาง Keyboard เมื่อกดปุ่มใดจะถูกจัดเก็บไว้ที่ตัวแปร cursors
        cursors = game.input.keyboard.createCursorKeys();
    
  3. จากนั้นเราต้องมาเขียนให้ตรวจสอบได้ว่า ถ้ามีการกดปุ่มลูกศรไปซ้าย พระเอกเราต้องไปด้านซ้าย และเมื่อกดปุ่มด้านขวาจะต้องไปด้านขวา และที่สำคัญกดปุ่มขึ้น จะต้องสามารถกระโดด ดึ๊งๆ ซึ่งในส่วนของเหตุการณ์ที่เกิดขณะเล่นเกมส์เราจะไปเขียนในส่วนของ “function update()” โดยค่าที่ตั้ง -150 หมายถึงถอยหลังไป 150 “pixel” ตามแนวแกน “x” ต่อวินาที
     if (cursors.left.isDown)
        {
            //  เดินไปด้านซ้าย
            player.body.velocity.x = -150;
    
        }
    
  4. ทดลองกดปุ่มด้านซ้ายจะพบว่าพระเอกของเราจะเลื่อนไปด้านซ้าย สังเกตุว่าพระเอกของเราก็จะไม่หลุดจาก “Game World” เนื่องจากกำหนดไว้แล้ว “player.body.collideWorldBounds = true;”
    game14
  5. ที่นี้ลองมากำหนดให้ปุ่มขวาบ้าง
        else if (cursors.right.isDown)
        {
            //  เดินไปด้านขวา
            player.body.velocity.x = 150;
    
        }
    
  6. ก็จะเหมือนกับกดปุ่มซ้ายแต่เปลี่ยนทิศทางกัน แต่มันดันมีปัญหาอยู่ว่า แทนทีเมื่อปล่อยปุ่มที่กดพระเอกของเราจะหยุด แต่ดันเลื่อนสไลด์ไปหยุดที่ขอบจอซะอย่างนั้นgame15
  7. เพราะฉนั้นเราต้องแก้ว่า ให้หยุดเมื่อไม่มีการกดปุ่มใด หรืออีกนัยนึงคือเมื่อปุ่มถูกปล่อยแล้ว วิธีการก็คือการตั้งค่าเคลื่อยย้ายวัตถุแนวแกน “x = 0” วางไว้ก่อนจะมีการตรวจสอบการกดปุ่มจากข้างต้นนั้นเอง
           //หยุดการเคลื่อนไหว
           player.body.velocity.x = 0;
    
  8. โดยหลักการในส่วนของ “function update()” นั้น ก็ง่าย ๆ เหมือนเขียน Loop รอเป็นรอบ ๆ ไว้แล้วเพราะฉะนั้นคำสั่งอะไรที่อยู่ใน “function update()” ก็จะทำซ้ำไปเรื่อย ๆ พอเราสั่งให้ตั้งค่าย้ายวัตถุ = 0 ก็จะไม่มีการเคลื่อนย้าย พอโปแกรมมาถึงบรรทัดนี้ แต่พอถึงบรรทัดการตรวจสอบปุ่มกด ถ้ามีก็เคลื่อนย้ายไม่ว่า จะเป็น + หรือ – Pixel ตามที่กำหนดนั้นเองgame16
  9. ต่อมาเราจะทำให้พระเอกของเราสามารถกระโดดได้โดยการกดปุ่ม “ขึ้น” โดยมีหลักการว่าจะกระโดดได้เมื่ออยู่บนวัตถุ พื้นหญ้าและแท่นหิน
        //  เมื่อกดปุ่ม "ขึ้น" และพระเอก "player" อยู่บนวัตถุ หญ้าและแท่นหิน
        if (cursors.up.isDown && player.body.touching.down)
        {
            //เวลากระโดดจะโดนแรงดึงดูด ของค่า "physics" ที่เรากำหนดไว้ด้วย
            player.body.velocity.y = -350;
        }
    

    game17

  10. สรุป “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;
    
        ground.body.immovable = true;
        ledge1.body.immovable = true;
        ledge2.body.immovable = true;
        ledge3.body.immovable = true;
    
        cursors = game.input.keyboard.createCursorKeys();
    
    }
    
    function update() {
        game.physics.arcade.collide(player, platforms);
    
        player.body.velocity.x = 0;
    
        if (cursors.left.isDown)
        {
            player.body.velocity.x = -150;
        }
        else if (cursors.right.isDown)
        {
            player.body.velocity.x = 150;
        }
    
        if (cursors.up.isDown && player.body.touching.down)
        {
            player.body.velocity.y = -350;
        }
    
    }
    
    </script>
    

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

ใส่ความเห็น