How to create the game with Phaser framework (Part7)

บทนำ (Overview)

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

ขั้นตอน (Steps)

เปิดไฟล์ “part7.html”
เราจะต้องมากำหนดก่อนว่าตัวพรเอกของเราจะใช้ “Keyboard” ในการควบคุม ซึ่งสามารถกำหนดได้ในส่วนของ “function create()”
```
    //  กำหนดให้มีการรับค่าทาง Keyboard เมื่อกดปุ่มใดจะถูกจัดเก็บไว้ที่ตัวแปร cursors
    cursors = game.input.keyboard.createCursorKeys();
```
จากนั้นเราต้องมาเขียนให้ตรวจสอบได้ว่า ถ้ามีการกดปุ่มลูกศรไปซ้าย พระเอกเราต้องไปด้านซ้าย และเมื่อกดปุ่มด้านขวาจะต้องไปด้านขวา และที่สำคัญกดปุ่มขึ้น จะต้องสามารถกระโดด ดึ๊งๆ ซึ่งในส่วนของเหตุการณ์ที่เกิดขณะเล่นเกมส์เราจะไปเขียนในส่วนของ “function update()” โดยค่าที่ตั้ง -150 หมายถึงถอยหลังไป 150 “pixel” ตามแนวแกน “x” ต่อวินาที
```
 if (cursors.left.isDown)
    {
        //  เดินไปด้านซ้าย
        player.body.velocity.x = -150;

    }
```
ทดลองกดปุ่มด้านซ้ายจะพบว่าพระเอกของเราจะเลื่อนไปด้านซ้าย สังเกตุว่าพระเอกของเราก็จะไม่หลุดจาก “Game World” เนื่องจากกำหนดไว้แล้ว “player.body.collideWorldBounds = true;”

ที่นี้ลองมากำหนดให้ปุ่มขวาบ้าง

    else if (cursors.right.isDown)
    {
        //  เดินไปด้านขวา
        player.body.velocity.x = 150;

    }

ก็จะเหมือนกับกดปุ่มซ้ายแต่เปลี่ยนทิศทางกัน แต่มันดันมีปัญหาอยู่ว่า แทนทีเมื่อปล่อยปุ่มที่กดพระเอกของเราจะหยุด แต่ดันเลื่อนสไลด์ไปหยุดที่ขอบจอซะอย่างนั้น
เพราะฉนั้นเราต้องแก้ว่า ให้หยุดเมื่อไม่มีการกดปุ่มใด หรืออีกนัยนึงคือเมื่อปุ่มถูกปล่อยแล้ว วิธีการก็คือการตั้งค่าเคลื่อยย้ายวัตถุแนวแกน “x = 0” วางไว้ก่อนจะมีการตรวจสอบการกดปุ่มจากข้างต้นนั้นเอง
```
       //หยุดการเคลื่อนไหว
       player.body.velocity.x = 0;
```
โดยหลักการในส่วนของ “function update()” นั้น ก็ง่าย ๆ เหมือนเขียน Loop รอเป็นรอบ ๆ ไว้แล้วเพราะฉะนั้นคำสั่งอะไรที่อยู่ใน “function update()” ก็จะทำซ้ำไปเรื่อย ๆ พอเราสั่งให้ตั้งค่าย้ายวัตถุ = 0 ก็จะไม่มีการเคลื่อนย้าย พอโปแกรมมาถึงบรรทัดนี้ แต่พอถึงบรรทัดการตรวจสอบปุ่มกด ถ้ามีก็เคลื่อนย้ายไม่ว่า จะเป็น + หรือ – Pixel ตามที่กำหนดนั้นเอง

ต่อมาเราจะทำให้พระเอกของเราสามารถกระโดดได้โดยการกดปุ่ม “ขึ้น” โดยมีหลักการว่าจะกระโดดได้เมื่ออยู่บนวัตถุ พื้นหญ้าและแท่นหิน

    //  เมื่อกดปุ่ม "ขึ้น" และพระเอก "player" อยู่บนวัตถุ หญ้าและแท่นหิน
    if (cursors.up.isDown && player.body.touching.down)
    {
        //เวลากระโดดจะโดนแรงดึงดูด ของค่า "physics" ที่เรากำหนดไว้ด้วย
        player.body.velocity.y = -350;
    }

สรุป “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>

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

Articles

How to create the game with Phaser framework (Part7)

ใส่ความเห็น ยกเลิกการตอบ