บทนำ(Overview)
พระเอกของเราเก็บดาวได้แล้ว (How to create the game with Phaser framework (Part10)) คราวนี้เราลองนับแต้มของการเก็บดาวกัน
ขั้นตอน (Steps)
- เปิดไฟล์ “part9.html”
- เราจะสร้างตัวแปร 2 ตัวเพื่อสร้างข้อความแสดงแก่ผู้เล่นว่าเก็บดาวไปกี่ดวง และอีกตัวแปรสำหรับการนับเลข
//ตัวแปรสำหรับการนับจำนวนดาว var score = 0; //ตัวแปรสำหรับแสดงข้อความ "Score" var scoreText;
- จากนั้นเริ่มต้นเกมส์เราจะเริ่มต้นจำนวนดาวเท่ากับ 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' });
- จากนั้นเราจะให้นับจำนวนดาวที่เก็บโดยเพิ่มใน “function collectStar” (player, star) ที่ถูกอ้างอิงใน”function update”
score += 10; scoreText.text = 'Score: ' + score;
- สรุป “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>
บทความที่เกี่ยวข้อง
- How to create the game with Phaser framework (Part1) – Start Game World
- How to create the game with Phaser framework (Part2) – Function preload()
- How to create the game with Phaser framework (Part3) – Display Images
- How to create the game with Phaser framework (Part4) – Function create()
- How to create the game with Phaser framework (Part5) – Physics
- How to create the game with Phaser framework (Part6) – Collide
- How to create the game with Phaser framework (Part7) – Control
- How to create the game with Phaser framework (Part8) – Animation
- How to create the game with Phaser framework (Part9) – Star Shines
- How to create the game with Phaser framework (Part10) – Keep Star
- How to create the game with Phaser framework (Part11) – Count Score