MapleStory
on Phaser
2016/06/02
Today's Note
This is ZERO
今天的目標
Today's goal
下載模板
進到 Hackpad
& some basics
關於玩家
About the player
create: function
// 玩家的生命上次已經給了(這次要給他"靈魂")
// 還有 給他超能力！！！
// pay attention to the declaration form and order!!!
// 注意宣告方式以及在 code 中的順序
this.pointer_down = false;
this.player.killMeCD = 150; //靈魂
this.arrows = []; //陣列～"坑" 的概念
this.firetime = 0;basics
// 人物行為、動畫 (上次有做了一滴滴)
// 這次來點調整吧 (改成 ADW )
game.input.keyboard.isDown(Phaser.Keyboard.A)
game.input.keyboard.isDown(Phaser.Keyboard.D)
game.input.keyboard.isDown(Phaser.Keyboard.W) && touching_groundupdate: function
player
// 將 if ( !true ) 的判斷式修改成以下
// 大家一起來射箭吧
// 發射動畫
// 按著滑鼠左鍵時出現拉弓動作
if (game.input.activePointer.isDown && this.firetime <= 0)
{
this.pointer_down = true;
if(player.frame < 6)
player.frame = 1;
else
player.frame = 11;
}
// 放開左鍵時放箭
else if(this.pointer_down)
{
this.pointer_down = false;
var fire_point = {x: player.x + 33, y: player.y + 48}; // 設定發射點
var rotation = phaser.physics.arcade.angleToPointer(fire_point);
console.log(rotation); //設定發射點與滑鼠之間的角度（可印出來看看）
//呼叫fire function來發射子彈
if(player.frame < 6 && Math.abs(rotation) > Math.PI / 2)
{
player.frame = 0;
this.fire(fire_point.x, fire_point.y, rotation);
this.firetime = 30;
}
else if(player.frame >= 6 && Math.abs(rotation) < Math.PI / 2)
{
player.frame = 12;
this.fire(fire_point.x, fire_point.y, rotation);
this.firetime = 30;
}
}update: function
player
讓我們來點特別的
自己定義幾個函式
Important FIRE function
// 這裡你看一下就懂了吧
// 自己定義函式是不是很厲害(ﾉ>ω<)ﾉ
var phaser = this.phaser;
var arrow = phaser.add.sprite(x, y, 'arrow');
arrow.rotation = rotation;
arrow.currentSpeed = 50;
arrow.anchor.setTo(-0.5, -0.5);
phaser.physics.arcade.enable(arrow);
phaser.physics.arcade.velocityFromRotation(arrow.rotation, arrow.currentSpeed, arrow.body.velocity);
// 用發射點與滑鼠之間的角度來產生速度
arrow.outOfBoundsKill = true;
this.arrows.push(arrow);fire: function (x, y, rotation)
functions
關於血條
About the player's health
& functions for fun
// 左上角加入一個記分板
// 然後做一點基本設定
var blood = this.phaser.add.text(16, 16, 'Health:', { fontSize: '32px' });
blood.fixedToCamera = true;
blood.font = 'Arial';
blood.align = 'center';
blood.setShadow(2, 2, '#373331', 1);
this.blood = blood;create: function
Health
// 有沒有覺得哪裡怪怪 der
But
Health
好吧～應該沒人發現 ＝ㄡ＝
讓我們再來點特別的
自己定義幾個函式
functions for fun
// 有了記分板（其實是另類血條）、當然要有分數啊～哈 XD
// 而且還可以改變顏色 ＠萌萌der＠
var color;
// ====================== 變更血條顏色 ========================
if (this.player.Health < 40 || this.player.Health == "Dead")
color = '#DA1212';
else if (this.player.Health >= 40 && this.player.Health < 80)
color = '#E4663A';
else if ((this.player.Health >= 80 && this.player.Health < 120) || this.player.Health == "Ultra")
color = '#17E7A4';
// ======================== 結果訊息 =======================
if (this.monsterTotalHealth == 0)
this.createText("You Win (●´ω｀●)ゞ",'w');
if (this.player.Health < 0) {
this.player.kill();
this.player.Health = "Dead";
this.createText("You Lose (;´༎ຶД༎ຶ`)",'l');
// use createText function to create texts
}
this.blood.text = 'Health: ' + this.player.Health;
this.blood.fill = color;showHealth: function
functions
// 這裡你看一下就懂了吧
// 自己定義函式是不是很厲害(ﾉ>ω<)ﾉ
// 遊戲結果訊息
var color;
if(result == 'w') //贏了
color = '#17EAD9';
else if(result == 'l')
color = '#EB2632'; //哭哭
var note = this.phaser.add.text( this.phaser.width/2-300, this.phaser.height/2 - 50, text, { fontSize: '72px', fill: color });
note.fixedToCamera = true;
note.font = 'Arial';
note.align = 'center';
note.setShadow(2, 2, '#3E3E3E', 1);createText: function (text, result)
functions
"" 太強惹 OP ""
👆🏻字的顏色到這裡找喔👆🏻
Again ! 有沒有哪裡怪怪的 ?
But
Health
好吧～應該還是沒人發現 ＝ㄡ＝
// 有了記分板
// 但怎麼沒有更新呢 ) 怒 = = 怒 (
// 當然要有分數出現啊～哈 XD
// 因為你沒有 update 呀 （你過時了）
// 來呼叫剛剛寫的函式吧
// show 出血量
this.showHealth();update: function
Health
沒錯！就只有一行
關於怪物
About the monsters
& some basics
create: function
// 賦予怪物生命(顧名思義嘛～～)
// pay attention to the declaration form and order!!!
// 注意宣告方式以及在 code 中的順序
this.monsters = [];
this.monsterRunningCount = 60;
this.monsterTotalHealth = 33;
basics
// 使用迴圈 ( for loop ) 來省點事～創世神是你 ：D
for (var i = 0; i <= 10; i++) {
//加入怪物 宣告怪物物件
var x = phaser.world.randomX;
if (x >= 1200)
x = 1200;
else if (x < 200)
x = 200;
var monster = phaser.add.sprite( x, 350, 'monster');
phaser.physics.arcade.enable(monster);
monster.body.bounce.y = 0.2;
monster.body.gravity.y = 300;
monster.body.collideWorldBounds = true;
//怪物移動時的動畫效果及碰撞
monster.animations.add('left', [0, 1], 10, true);
monster.animations.add('right', [2, 3], 10, true);
monster.bringToTop();
monster.body.checkCollision.up = false; //怪物撞不到天花板
monster.body.checkCollision.left = true;
monster.body.checkCollision.right = true;
monster.body.checkCollision.down = true;
//怪物出現時的移動方向
if (x <= 700) {
monster.body.velocity.x = 100;
monster.animations.play('right');
}
if (x > 700) {
monster.body.velocity.x = -100;
monster.animations.play('left');
}
//將以上創造出來的怪物一個個推進沙坑（？
this.monsters.push({
monster : monster,
health : 3,
alive : true
})
}create: function
monsters
啊～怎麼沒看到怪物
壞掉了吧 ㄟ 不是
你過時了
剛剛講過
要 update !
monsters
然後我們需要
Artificial Intelligence
// 怪物的AI
this.monsterRunningCount --; // 用來改變方向
this.player.killMeCD --; // 怕你死太快 XD
for (var i = 0; i <= 10; i++)
{
if (monsters[i].alive)
{
//怪物不是外星生物,也會碰撞RRRRRRRR
phaser.physics.arcade.collide(monsters[i].monster, layer);
//如果你碰到怪物ㄜ 你就準備 say bye bye ～～
if(this.player.killMeCD <= 0)
{
phaser.physics.arcade.overlap(player, monsters[i].monster, function(){
this.player.Health -= 8;
this.player.killMeCD = 60;
// console.log("cd: " + this.player.killMeCD);
// console.log("hp: " + this.player.Health);
},null,this);
}
// 箭跟怪物的互動
phaser.physics.arcade.overlap(arrows, monsters[i].monster,
function(arrow, monster) {
// 箭要消失喔
arrow.kill();
monsters[i].health --; // 心好痛
this.monsterTotalHealth --; // 一步步走向滅絕
// 沒血了 bye 囉
if(monsters[i].health <= 0)
{
monsters[i].alive = false;
monsters[i].monster.kill();
}
}, null, this);
//跑跑跑～～～向前跑 左右左右跑
if (this.monsterRunningCount == 0)
{
monsters[i].monster.body.velocity.x *= -1;
if(monsters[i].monster.body.velocity.x > 0)
monsters[i].monster.animations.play('right');
else
monsters[i].monster.animations.play('left');
}
}
}
// ====================== left & right =====================
if (this.monsterRunningCount < 0) {
this.monsterRunningCount = 120;
}update: function
monsters
工商時間
Advertisement
快來官網、粉專按讚👍🏻
Click me
音樂會好聽喔👍🏻
The End
MapleStory on Phaser
By Hao-You Hung
MapleStory on Phaser
by NCHUIT
