
在宅さん
ゲームに必要な動きや素材の配置などができるようになってきたので、ゲームみたいに作っていこう!!
ブロックの配置
前回はStageSceneクラスに直接書いていましたが、ステージが増えるにつれStageSceneクラスに各ブロックの配置等を書くと、行が多くなってしまいます。そこでステージのブロックの配置、ゴール位置、初期プレイヤー位置を別クラスにまとめて1つのファイルで管理します。
class stage1 {
constructor(){
this.stagename="ステージ1";
}
ban_set(max_index){
this.max_index=max_index;
this.player_index_x=4;
this.player_index_y=this.max_index-1;
this.end_index_x=this.max_index-1;
this.end_index_y=3;
this.ban = new Array(this.max_index);//1:ブロック、2:プレイヤー、4:GOAL
for (var x = 0; x < this.max_index; x++){
this.ban[x] = new Array(this.max_index);
}
for (var p = 0; p < this.max_index; p++){
for (var q = 0; q < this.max_index; q++){
this.ban[p][q] =0;
}
}
this.Outside();
this.ban[this.player_index_x][this.player_index_y]=2;
this.ban[this.end_index_x][this.end_index_y]=4;
this.ban[1][5] =1;
this.ban[2][2] =1;
this.ban[1][4] =1;
this.ban[3][9] =1;
this.ban[4][1] =1;
this.ban[4][5] =1;
this.ban[5][9] =1;
this.ban[8][7] =1;
this.ban[6][9] =1;
this.ban[7][1] =1;
this.ban[7][6] =1;
this.ban[9][5] =1;
this.ban[9][10] =1;
this.ban[2][7] =1;
this.ban[7][2] =1;
this.ban[10][10] =1;
}
Outside() {
for (var p = 0; p < this.max_index; p++){
for (var q = 0; q < this.max_index; q++){
if(p==0||p==(this.max_index-1)||q==0||q==(this.max_index-1)){
this.ban[p][q] =1;
}
}
}
}
}
class stage2 {
constructor(){
this.stagename="ステージ2";
}
ban_set(max_index){
this.max_index=max_index;
this.player_index_x=9;
this.player_index_y=3;
this.end_index_x=this.max_index-1;
this.end_index_y=3;
this.ban = new Array(this.max_index);
for (var x = 0; x < this.max_index; x++){
this.ban[x] = new Array(this.max_index);
}
for (var p = 0; p < this.max_index; p++){
for (var q = 0; q < this.max_index; q++){
this.ban[p][q] =0;
}
}
this.Outside();
this.ban[this.player_index_x][this.player_index_y]=2;
this.ban[this.end_index_x][this.end_index_y]=4;
this.ban[1][5] =1;
this.ban[2][2] =1;
this.ban[1][4] =1;
this.ban[3][9] =1;
this.ban[4][1] =1;
this.ban[4][5] =1;
this.ban[5][9] =1;
this.ban[8][8] =1;
this.ban[6][9] =1;
this.ban[7][1] =1;
this.ban[7][6] =1;
this.ban[9][5] =1;
this.ban[9][10] =1;
this.ban[2][7] =1;
this.ban[7][2] =1;
}
Outside() {
for (var p = 0; p < this.max_index; p++){
for (var q = 0; q < this.max_index; q++){
if(p==0||p==(this.max_index-1)||q==0||q==(this.max_index-1)){
this.ban[p][q] =1;
}
}
}
}
}
SceneManagerで呼び出されたオプション値によって遷移するSceneを決定します。
phina.define("GameManager", {
superClass: "ManagerScene",
init: function(option) {
this.superInit({
startLabel:option.startLabel,
scenes: [
{
className: 'stageScene',
label: 'stage1',
arguments: { stage: new stage1()},
nextLabel: 'result',
},
{
className: 'stageScene',
label: 'stage2',
arguments: { stage: new stage2()},
nextLabel: 'result',
},
{
className: 'ResultScene',
label: 'result',
},
{
className: 'MainScene',
label: 'main',
},
]
});
},
呼び出す時は、オプション値をつけて指定のstageのSceneへ移動させます。
ゲーム内では、ボタンごとにstage_Labelを変えています。
var button_stage1 = Button({
x: main_scene.gridX.center(-4),
y: main_scene.gridY.span(12),
width: 150,
height: 100,
text: "STAGE1",
fontSize: 18,
fontColor: 'black',
}).addChildTo(this)
.onpush=function(){
main_scene.app.replaceScene(GameManager({startLabel:'stage1'}));
};
これでStageSceneにステージ情報を渡すことができました。
次にStageSceneで、先ほど渡したクラスを受け取り盤面をセットします。
phina.define("stageScene", {
superClass: 'DisplayScene',
init: function(options) {
this.superInit({
backgroundColor:'hsl(200, 80%, 64%)',//背景色設定
});
options = ({}).$safe(options,{stage: new stage2()});
this.stage = options.stage;
this.stage.ban_set(max_index);
ban = this.stage.ban;
for (var p = 0; p < max_index; p++){
for (var q = 0; q < max_index; q++){
if(ban[p][q]==1){
block(p,q,"black").addChildTo(this);
}
if(ban[p][q]==4){
block(p,q,"yellow","GOAL").addChildTo(this);
}
}
}
block(this.stage.player_index_x,this.stage.player_index_y,"yellow","START").addChildTo(this);
this.player = player(this.stage.player_index_x,this.stage.player_index_y).addChildTo(this);//プレイヤ
結果
一応手作り感がすごいですが、ゲームっぽい形にはなりました。
タイトル画面とリザルト画面はほぼデフォルトで作っています。いずれアレンジしたいと思います。
Getting started | phina.js