ぷよの表示 puyoimage.js① 〜「ぷよぷよプログラミング」でお勉強〜　その９

ぷよ が表示されるにゃ！

前回までは、ゲームの大枠部分のgame.jsの中を見ていきました。

お待たせいたしました！
今回から、新しいソースコードを見ていきます。

用意した画像を表示するpuyoimage.jsを見てみよう

最初にあるのは、クラスプロパティと呼ばれるクラス内全体で使用される変数を指定しています。

class PuyoImage {
    // static puyoImages;
    // static batankyuImage;
    // static gameOverFrame;

    

コメントアウトしているのは、javascriptではこのような指定の仕方ではないからです。
（TypeScriptではできます。TypeScriptは型定義ができるjavascriptです）

おそらく、わかりやすいように書いてあるのではないでしょうか？

javascriptでは
後から出てくるように
this.puyoImages
の様に指定します。

初期化処理で画像を準備する

初期化処理であるinitialize()
game.jsのinitialize() の「 画像を準備する」で呼び出される関数です。

static initialize() {
    this.puyoImages = [];
    for(let i = 0; i < 5; i++) {
        const image = document.getElementById(`puyo_${i + 1}`);
        image.removeAttribute('id');
        image.width = Config.puyoImgWidth;
        image.height = Config.puyoImgHeight;
        image.style.position = 'absolute';
        this.puyoImages[i] = image;
    }
    this.batankyuImage = document.getElementById('batankyu');
    this.batankyuImage.width = Config.puyoImgWidth * 6;
    this.batankyuImage.style.position = 'absolute';
}

this.puyoImages = [];
［］は複数のデータが入ります。
これを配列と言います。

繰り返し文（for文）で、この配列（this.puyoImages）にデータを入れていっています。
０からスタートして、５未満（４まで）と５回繰り返します。

const image = document.getElementById(`puyo_${i + 1}`);

変数のimageに情報をセットしていきます。

document.getElementById　は、HTML内からID指定したエレメント（要素）を取得します。（正確には参照します）

『ぷよぷよプログラミング』内で、htmlファイルは、と言うと
index.htmlです。
↓こちらで見ましたね。

index.htmlをみると「id」指定しているところがあります。

<img src="img/puyo_1.png" id="puyo_1">
<img src="img/puyo_2.png" id="puyo_2">
・・・

document.getElementById　で、このidを探します。
document.getElementById（）←このカッコの中にidで指定している文字列を入れます。

const image = document.getElementById(`puyo_${i + 1}`);

こちらでは、idが`puyo_${i + 1}`の物を探します。

この一見？な書き方なのですが
『テンプレートリテラル』という便利な書き方です。
文字列の中に変数や定数を埋め込むことができます。

『テンプレートリテラル』を使うには、
文字列を `` （バックコート）で囲みます。

ちなみに、バックコートを入力するには
半角英数字にして
shiftキー＋＠マーク
（Macだと↑マークがShiftキー）

puyo_${i + 1}　の　${i + 1}　の部分。
計算式になっています。

for(let i = 0; i < 5; i++) {

繰り返し文で 変数i が出てきました。
i = 0
i = 1
i = 2
i = 3
i = 4

と数値が入っていきます。

${i + 1}　の部分は
i = 0　の時　${0 + 1}　→   １
i = 1　 の時　${1 + 1}　→　2
i = 2　の時　${2 + 1}　→　3
i = 3　の時　${3 + 1}　→　4
i = 4　の時　${4 + 1}　→　5
になります。

puyo_${i + 1}は
puyo_1
puyo_2
puyo_3
puyo_4
puyo_5
になります。

１つ目にもってくるのは↓

<img src="img/puyo_1.png" id="puyo_1">

puyo_1.pngを指しています。

image.removeAttribute('id');
image.width = Config.puyoImgWidth;
image.height = Config.puyoImgHeight;
image.style.position = 'absolute';

このエレメントを操作したり、プロパティを指定しています。

removeAttribute は、指定した属性を削除します。
今回ですと、idを削除します。↓

<img src="img/puyo_1.png">

width は、エレメントの幅です。
ConfigファイルにあるpuyoImgWidthを指定しています。

height は、エレメントの高さです。
ConfigファイルにあるpuyoImgHeightを指定しています。

style.position は、エレメントの配置位置を決めます。
absoluteは親要素を基準として絶対的な位置を決めます。
（↓ぷよの位置が全然違いますね）

そして、配列this.puyoImagesに保存します。

this.puyoImages[i] = image;

this.puyoImages[0]　には、puyo_1.pngの情報
this.puyoImages[1]　には、puyo_2.pngの情報
this.puyoImages[2]　には、puyo_3.pngの情報
this.puyoImages[3]　には、puyo_4.pngの情報
this.puyoImages[4]　には、puyo_5.pngの情報
が入ります。

同じ様に、「ばたんきゅー」の画像もHTMLから情報をとってきます。

this.batankyuImage = document.getElementById('batankyu');
this.batankyuImage.width = Config.puyoImgWidth * 6;
this.batankyuImage.style.position = 'absolute';

idが'batankyu'　のものをthis.batankyuImage に入れます。

widthにConfigファイルにあるpuyoImgWidthの６倍の数値を。

style.position にabsoluteを設定します。

まとめ

今回は、画像を表示できるようにする処理をおこなう
puyoimage.jsの初期化部分を見ていきました。

・配列
・htmlファイルからidを使って、必要なエレメントの取得の仕方
・『テンプレートリテラル』という、文字列の中に変数を入れる便利な方法
などありました。

他に、どんな画像表示処理があるでしょうか？
次回に続きます。

参考　「ぷよぷよプログラミング」サイト

【公式】ぷよぷよeスポーツ×プログラミング

「ぷよぷよプログラミング」サポートページ – Monaca Education

パンフレット（初級中級の写経と上級のヒントが書いています）

001

サンプルソースコード

ぷよぷよプログラミングコード一式201024.indd

Javascript参考サイト

js STUDIO | JavaScript、jQuery日本語リファレンス

JavaScript Tutorial

＊　こちらの連載記事は、プログラミング初心者さん向けです。
プログラミングが詳しい方は、説明がおかしい所など見つけていただけましたらコメントなどでご指摘していただけるとうれしいです。

＊　事前にSEGAさんの使用許諾を受けています。
©SEGA ©Asial Corporation