フロントエンド開発Blog

オレには鈍器がある

JavaScript , enchant.js

オレには鈍器がある デモバージョン
前回からの変更点は以下の通りです

実装機能:
・メッセージウィンドウを実装しました
・レベルアップ処理を追加しました

概要:
・襲ってくるにょろりをひたすらペシペシしちゃいます
・キーボードに接続している端末では以下のキー入力が可能です
上へ移動:上キー or w
左へ移動:左キー or a
下へ移動:下キー or s
右へ移動:右キー or d
攻撃: l

本体(http://oredon.guitarkouza.net)ではここでは盛り込めなかった機能を追加しています
・サーバサイドセーブ
・装備、アイテム、魔法
・街での各アクション
・年齢パラメータ、引退引き継ぎ

http://jsdo.it/oredon/vzoW

前回で大抵のコアとなる機能は実装しました。最後にメッセージウィンドウとレベルアップ処理を追加し、オレには鈍器があるDEMOバージョンを作るまでの経過記録を一区切りとさせていただきます。

まずはメッセージウィンドウですが、Labelを使って実装してみます。

//メッセージ
MSGLABEL = new Label();
MSGLABEL.font = "8px monospace";
MSGLABEL.color = "#ffffff";
MSGLABEL.text = "init";
MSGLABEL.x = 45;
MSGLABEL.y = 8;

var msgbg    = new Sprite(250, 20);
var msgbgS   = new Surface(250, 20);
msgbgS.context.fillStyle = "#000000";
msgbgS.context.fillRect(0, 0, 250, 20);
msgbg.image = msgbgS;
msgbg.x=35;
msgbg.y=5;
msgbg.opacity = 0.7;
scene.addChild(msgbg);
scene.addChild(MSGLABEL);

半透明の背景を敷いて、そこにLabelを配置します。配置したLabelはPlayerクラスなどから随時引っ張ってきてtextを差し替えます。

var msg = "LVUP! LV:"+this.lv+" " + "HP:" + this.maxHp + " ATK:" + this.p_atk + " DEF:" + this.p_def + " AGI" + this.agi;
console.log(msg);
MSGLABEL.text = msg;

そしてレベルアップ処理ですが、まずは経験値テーブルを作っておきます。

var EXPTABLE = [
4,
10,
22,
38,
58,
72,
99
]

Playerインスタンスのexpが上記表示を越えたらレベルアップとします。

checkLvUp: function(){
	var currentLv = this.lv;
	var currentExp = this.exp;
	if( EXPTABLE[currentLv - 1] !== undefined ){
	var nextLvExp = EXPTABLE[currentLv - 1];
		//console.log(EXPTABLE.length, nextLvExp)
		if( currentExp >= nextLvExp ){
			//レベルアップ処理
			this.lvup();
			this.checkLvUp();
		}
	}
},
lvup: function(){
	this.lv += 1;
	
	this.str += 3;
	this.vit += 3;
	this.agi += 10;
	
	this.p_atk = this.str*5;
	this.p_def = this.vit*5;
	
	this.maxHp = (this.vit * 5) + ( (this.lv - 1) * 3);
	this.hp = this.maxHp;
	
	this.changeAccel();
	this.changeAttackDuration();
	
	var msg = "LVUP! LV:"+this.lv+" " + "HP:" + this.maxHp + " ATK:" + this.p_atk + " DEF:" + this.p_def + " AGI" + this.agi;
	console.log(msg);
	MSGLABEL.text = msg;
}

ざくざくっと駆け足でしたがenchant.jsを使った軌跡を辿ってみました。

ページトップへ

関連ページ

ページトップへ