どうも、東京経済大学のさいがやんです。
前回から、おまつりゲームのソースコードのscript要素の中身について書いています。script要素の中では、最初にグローバル変数を定義し、init関数、fieldkeydown関数、fieldpaint関数、eventpaint関数、shippai関数があります。
今回は、fieldpaint関数とfieldkeydown関数を紹介します。ついでに、ストーリーに合わない仕様を直したことを記録します。
fieldpaint関数
fieldpaint関数はマップや主人公を描画します。init関数やfieldkeydown関数の中でfieldpaint関数が呼び出されます。
function fieldpaint() {
gc.fillStyle = "rgba(160, 160, 150, 1)";
gc.fillRect(0, 0, 800, 440);
▲fieldpaint関数ではまず、キャンパス全体を灰色っぽくしています。これがそのまま、校庭の色になります。
var y, x;
for (y = 0; y < map[stage].length; y++) {
for (x = 0; x < map[stage][y].length; x++) {
var mpt = map[stage][y][x];
if (mpt ==01) { //もん
gc.drawImage(mon, x * 40, y * 40, 40, 40);
}
else if (mpt ==02) { //き
gc.drawImage(ki, x * 40, y * 40, 40, 40);
}
else if (mpt ==04) { //ちゃり
gc.fillStyle = "rgba(150, 220, 240, 1)";
gc.fillRect(x * 40, y * 40, 40, 40);
gc.drawImage(chari2, x * 40, y * 40, 40, 40);
▲次に、表示するステージ（マップ0～5のどれか）の配列の要素番号が格納されるものをy、さらにその中の配列の要素番号が格納されるものを変数xとします。for文とif文を使って、色や画像をつけた40px四方のマスを、横20個×縦11個描画していきます。
if (flag01 == true && flag02 == false) { //主人公
gc.drawImage(boku, px * 40, py * 40, 40, 40);
}
else {
gc.drawImage(shujinkou2, px * 40, py * 40, 40, 40);
}
▲主人公を描画します。
for (y = 0; y < map[stage].length; y++) { //暗闇
for (x = 0; x < map[stage][y].length; x++) {
var mpt = map[stage][y][x];
if (mpt ==03 || mpt == 31 || mpt == 51 || mpt == 52 || mpt == 68 || mpt == 73) {
gc.fillStyle = "rgba(50, 50, 40, 0.65)"; //かげ
gc.fillRect(x * 40, y * 40, 40, 40);
}
}
}
▲校庭の暗闇部分を半透明の暗い灰色で描画します。暗闇にいる主人公を見えにくくするため、主人公の後に上から描画します。
fieldpaint関数は以上です。
fieldkeydown関数
init関数でキーダウンイベントが登録されたので、キーが押されるとfieldkeydown関数が実行されます。fieldkeydown関数は、主人公が移動するための関数です。
function fieldkeydown(e) {
var dx = px, dy = py;
switch (e.keyCode) {
case 37: dx--; break;
case 38: dy--; break;
case 39: dx++; break;
case 40: dy++; break;
}
▲変数dx,dyは、主人公の移動先候補を表します。switch文で、上下左右のキーと、x,y座標の増減を対応させます。
var mpt = map[stage][dy][dx];
if ((mpt == 20 || mpt == 21 || mpt == 23) && flag07 == true) {
px = dx;
py = dy;
fieldpaint();
}
else if (mpt == 22 && flag07 == true) {
px = dx;
py = dy;
fieldpaint();
eventpaint(mpt);
}
▲移動先候補の座標を、移動先の座標に入れて、fieldpaint関数に描画を頼みます。さらに、移動先のマスでキャラクターと話したりする場合はeventpaint関数も呼びます。
しかし、移動先候補のマスが木や壁のときは特に何もしませんし、画面遷移が必要なときはまた別の処理をします。そのコードの記載は省略します。
修正箇所
関数の説明とは無関係ですが、ぼくが一人でいるときに正門から出ようとすると、こんな画面が出てきてしまうことを発見しました。
これでは、みずほが瞬間移動して正門にきていることになってしまい不自然です。場面によっては、トイレにいるみずほが、瞬間移動で正門に来てトイレに戻る、ということにもなりえます。これではよろしくないので、変えました。
この画面を新しく追加し、解決しました。
＜参考文献＞
・田中賢一郎『ゲームで学ぶ JavaScript 入門』インプレス、2015年
・田中賢一郎『ゲームを作りながら楽しく学べる HTML5+CSS+JavaScript』インプレス、2017年
・田中賢一郎『ゲームで学ぶ JavaScript 入門 増補改訂版～ブラウザゲームづくりでHTML&CSSも身につく！』インプレス、2022年
