iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 6
0
Modern Web

關於你關於我關於phaser系列 第 6

Day 6 第一個遊戲:完成遊戲啦

  • 分享至 

  • xImage
  •  

接下來加入我們的星星,加入步驟爲: create 出星星物件 -> 爲星星加上相對的物理特性(相對於地板與相對於主角)

//create()
//設定星星要重複幾次與每個星星的間隔
stars = this.physics.add.group({
    key: 'star',
    repeat: 11,
    setXY: {
      x: 12,
      y: 0,
      stepX: 70
    }
});

//遍歷每個星星,並每個星星加上亂數的反彈重力
stars.children.iterate(function(child) {
    child.setBounceY(Phaser.Math.FloatBetween(0.4, 0.8));
});
//對星星加上相對的物理特性
this.physics.add.collider(stars, platforms);
//當主角與星星重疊時,呼叫collectStar函式
this.physics.add.overlap(player, stars, collectStar, null, this);
function collectStar(player, star) {
  star.disableBody(true, true);
}

最後加上分數,就完成一個簡單的小遊戲啦

//在全域宣告兩個變數
var score = 0
var scoreText;

//在create裡將文字顯示在畫面上
//依序的參數爲(x軸位置,y軸位置,文字內容,文字的相關樣式)
scoreText = this.add.text(16, 16, 'Score: ' + score, {
    fontSize: '32px',
    fill: '#000'
});

//最後當碰撞事件發生的時候去修改分數
function collectStar(player, star) {
  star.disableBody(true, true);

  score += 10;
  scoreText.setText('Score: ' + score)
}

而接下來就可以開始延伸你想要的遊戲內容了,以官方範例來說,他增加了遊戲難度,新增碰到會死掉到炸彈,你也可以把遊戲做成小朋友上下樓梯,更甚至加入怪物讓主角挑戰,這些的是可以做到的,在之後的天數,會儘量多介紹 phaser 好用的地方與做一些遊戲讓大家認識phaser的強大之處

總結:
從這邊我們可以看到如果想要加入一個遊戲元素需要的步驟:
載入 -> 創造 -> 相關的物理特性 -> 相關的事件
掌握每個元素之間的關係就可以打造出一個自己想要的遊戲

在接下來的天數,會有更多實作遊戲與 phaser 使用方式的解析介紹,請大家拭目以待

這四天的參考資料:
phaser官方網站
phaser教學
phaser小站


上一篇
Day5 第一個遊戲:~加入主角
下一篇
Day7 phaser的滑鼠監聽
系列文
關於你關於我關於phaser30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言