JavaScriptの門をなで続ける: ブラゲ作るよ！

2021年05月07日

JavaScriptの門をなで続ける

連休など家人がいるとPCに触る時間が激減します。
平日にのんびり続ける所存です。

■参考サイト

●作っちゃうおじさん制作記録
初心者でも3時間程度でブラウザゲームを作れるようになろう！【2020年版】
https://hothukurou.com/blog/post-2058

今日は外枠だけ！

引き続き、お手玉ゲーム作成の練習中です。
以下おさらい。
「01otedama.html」body部分

<body>
    <script src="pixi.min.js"></script>
    <script src="script.js"></script>
    お手玉テスト用ＨＴＭＬ
</body>

大本のHTMLファイルではスクリプトファイル２つを呼び出し、１行の文字列をちょこっと配置。

「pixi.min.js」
これは公式サイトから貰ってきましょう。

「script.js」

 1| //サイズを指定してPIXI.JSアプリ呼び出し。htmlのbodyにapp.view（canvas）追加。
 2| const app = new PIXI.Application({ width: 400, height: 600 });
 3| document.body.appendChild(app.view);

スクリプト本体。前回苦戦していた１，２行目はコメントを入れて３行に。

今回はここから、ソースの全体像が分かる外側を見るだけです。

I did it !

PIXI：スタイル指定
JavaScript：外枠完了

これだけ！

PIXI：スタイル指定

参考サイトさまのスクリプトファイルのcss指定部分を書き写す！
cssは「app.renderer.view.sytle.スタイル = "ここに記述";」という形で書くみたい。
書式が分かれば改変も可能。値を変えたり、指定を増やしたりで自由にコーディネイトできますね。

 5| //canvasのcss指定
 6| app.renderer.view.style.position = "relative";
 7| app.renderer.view.style.width = "400px";
 8| app.renderer.view.style.height = "600px";

どんどん追記。～style.以降はほぼCSSそのままなので見慣れた形が続きます。
色やサイズは自分流にアレンジして、改変しながら打ち込んでいきました。

13| app.renderer.backgroundColor = 0xffaaaa;//＃指定でも「c」olorでもダメ

そうすると、急に見慣れない指定が出て来たぞ！「0x」表記なのでJavaScriptでの16進数指定です。よく見たら前半も他と少し違います。viewじゃない！
canvasの背景色指定なのですが、ここだけスタイルシートでは変更できないものなのかな？とりあえずそのまま書いときましょう。色だけ好きに変えてみよう。

ちなみにここ、書式が違うと無効な値になるようで、「#」指定だとcanvas自体が消失しました。
また、「backbroundColor」を「backgroundcolor」と後ろのCを小文字で書いても消失。
大文字小文字の間違いは、今後よくやりそうな気がするので気をつけねば…。

JavaScript：外枠完了

今回書いた「script.jp」の全文です。

 1| //サイズを指定してPIXI.JSアプリ呼び出し。htmlのbodyにapp.view（canvas）追加。
 2| const app = new PIXI.Application({ width: 400, height: 600 });
 3| document.body.appendChild(app.view);
 4| 
 5| //canvasのcss指定
 6| app.renderer.view.style.position = "relative";
 7| app.renderer.view.style.width = "400px";
 8| app.renderer.view.style.height = "600px";
 9| app.renderer.view.style.display = "block";
10| app.renderer.view.style.border = "2px solid #ddd";//canvasの周囲実線灰色
11| app.renderer.view.style.margin = "0 auto";//描画位置中央
12| 
13| app.renderer.backgroundColor = 0xffaaaa;//＃指定でも「c」olorでもダメ
14| 
15| //画像をプリロードしてからイベント呼び出し
16| PIXI.loader.add("img_t.svg");
17| PIXI.loader.load((loader, resources) => { });