How to create the game with Phaser framework (Part11)

หมวดหมู่ HTML5

บทนำ(Overview)

พระเอกของเราเก็บดาวได้แล้ว (How to create the game with Phaser framework (Part10)) คราวนี้เราลองนับแต้มของการเก็บดาวกัน

ขั้นตอน (Steps)

  1. เปิดไฟล์ “part9.html”
  2. เราจะสร้างตัวแปร 2 ตัวเพื่อสร้างข้อความแสดงแก่ผู้เล่นว่าเก็บดาวไปกี่ดวง และอีกตัวแปรสำหรับการนับเลข 
    //ตัวแปรสำหรับการนับจำนวนดาว
var score = 0;
//ตัวแปรสำหรับแสดงข้อความ "Score"
var scoreText;
  3. จากนั้นเริ่มต้นเกมส์เราจะเริ่มต้นจำนวนดาวเท่ากับ 0 สามารถแสดงผลได้ใน “function create()” 
        //พารามิเตอร์ที่ 1 กับ 2 16 x 16 คือขนาดของกรอบที่จะแสดงตัวอักษร
    //พารามิเตอร์ที่ 3 score: 0 แสดงตัวอักษรบนหน้าจอ
    //พารามิเตอร์มี่ 4 ใช้ CSS {} ได้
    scoreText = game.add.text(16, 16, 'score: 0', { fontSize: '32px', fill: '#000' });

    game30

  4. จากนั้นเราจะให้นับจำนวนดาวที่เก็บโดยเพิ่มใน “function collectStar” (player, star)  ที่ถูกอ้างอิงใน”function update” 
        score += 10;
    scoreText.text = 'Score: ' + score;

    game31

  5. สรุป “code” ทั้งหมดดังนี้ 
    <script type="text/javascript">

var game = new Phaser.Game(800, 600, Phaser.AUTO, '', { preload: preload, create: create, update: update });
var score = 0;
var scoreText;

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();
    scoreText = game.add.text(16, 16, 'score: 0', { fontSize: '32px', fill: '#000' });

}

function update() {

    game.physics.arcade.collide(player, platforms);
    game.physics.arcade.collide(stars, platforms);

    game.physics.arcade.overlap(player, stars, collectStar, null, this);

		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;
    }

}

function collectStar (player1, star1) {
    star1.kill();
    score += 10;
    scoreText.text = 'Score: ' + score;

}

</script>

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

 

ใส่ความเห็น