アイストマトバズーカのゲーム制作日記

いろいろ超初心者がゲーム制作に挑戦。現在RPGツクールMZでフリーゲーム制作中。フリー素材も作って置いてます。

JavaScriptさわってみる3回目(*´Д`) 分岐と画像表示

こんにちは。



JavaScriptさわってみる企画3回目やっていきます。なかなか進まないので入門書1冊と言っても結構回数がかかりそうですね。

 

参考にしている入門書はこちら。

まだ序盤で基礎の基礎でしょうからなるべくサクサクと進めたいところではあります。

 

※おことわり

毎度のことですが"初心者がやってみた”というだけの記事ですので内容の信頼性はそれ相当です。信用してどんな災難に遭おうとも責任は負いかねます。

 

今回やってみるのはIF文(分岐)。~だったら〇〇して、そうじゃなくて…だったら△△してね、みたいなやつです。RPGツクールMZで言うところの条件分岐、どんな言語でもこれがなければゲームは作れないでしょう、というくらいの基礎だと思います(たぶんね)。

 

本によりますとJavaScriptでの分岐の書き方は3種類あるようです。

①IF文

if (条件式1) {

処理1

else if (条件式2) {

処理2

else {

処理3

}

条件式1が成り立つ(TRUEが返る)とき処理1を実行、条件式1は成り立たず(FALSEが返り)条件式2がTRUEのとき処理2を実行、どちらもFALSEのとき処理3を実行。っていうやつ。

 

②switch文

switch(㋐){

case ㋑:

処理1

break;

case ㋒:

処理2

break;

default:

処理3

}

㋐と㋑が一致するとき処理1、㋐と㋒が一致するとき処理2を実行、いずれでもなければ処理3を実行。IF文と似てますが条件式にイコールを使う場合や分岐が多いときはこっちが見やすいよ、ということです。

 

③三項演算子

条件式? 処理1:処理2

分岐が2つだけなら1行で書けちゃうよ、というもののようです。EXCELのIF関数みたいですね。

 

②も③も①の書き方で置き換えることは可能なのでとりあえずは①だけ覚えておけばいいような気もしますが、既にあるプログラムを読み解こうとする場合にはこういうパターンがあることも知っておく必要はありますね。

 

私はRPGツクールMZのコアスクリプトやプラグインを読めるようになりたいので今回もなかなかの収穫です。実際プラグインで②は見たことがあります。

 

では実践。前回のコードにIF文を付け足してみようと思いますがせっかくなので違うことも付け足してみたい…。

 

画像の表示でもやってみましょう!ネットで調べてみました。

 

まずHTMLで画像表示なら

 

<img id ="××" src="〇〇" >

××に画像id(任意)、〇〇に画像アドレスですね。

 

これを付け足して・・・関数にIF文を入れて・・・とやってみましたが大苦戦しました(+_+)

 

とりあえずできたもの↓

<script>

function pic() {
     const target = document.querySelector("#gazou");
     const a = document.getElementById("i0").value;

     if(a == 1){
          target.src = "https://cdn-ak.f.st-hatena.com/images/fotolife/i/icedtomatobazooka/20220304/20220304182304.jpg"
     }
     else if(a == 2){
          target.src = "https://cdn-ak.f.st-hatena.com/images/fotolife/i/icedtomatobazooka/20220205/20220205192723.jpg"
     }
     else{
          target.src ="https://cdn-ak.f.st-hatena.com/images/fotolife/i/icedtomatobazooka/20220216/20220216021720.jpg"
     }
}
</script>
<body>
画像番号:<input id="i0" value="1" />
<button onclick="pic()">表示</button><br>
<img src="" width="400" id ="gazou">
</body>

URLが入ってるのは画像アドレスです。入力欄に”1”を入れた場合、"2"を入れた場合、それ以外の3パターンで表示ボタンを押すと過去記事のアイキャッチ画像を表示するようにしてます。

画像番号:

 

条件式の比較演算子を"==="(厳密な比較?)にするとうまく行きませんでした。たぶん前回のjavascript記事で話した型の違いでしょうね。調べたところ"=="で数値と文字列を比較した場合は文字列が数値に自動で変換されるようです。さすがJavaScript(*'ω'*)

 

画像の表示についてはquerySelector()ってやつでタグを検索するってことをしてるんです。下から2行目が画像を表示するHTMLですがここでidを"gazou"ってしてるじゃないですか、これを探してその場所のsrc(情報元)を指定のアドレスに変えてねってことをpic関数の中でやってるんですよね。実は前回からやってることですがこのへんのイメージがつかみにくかったです。関数"pic"には直接的に「再描画する」という命令文は無いのですが画像が置き換わるんですね。javaやVBAにはこういった考え方無い気がする(知らないだけかも)。

 

答えだけ見ると簡単そうなんですけどね( ;∀;) 難しかった…(自分には)。

 

参考にしたページ↓

正直あんまり理解してませんw

ちなみにはてなブログでJavaScriptを動かすなら設定から編集モードをMarkdownモードにする必要がありますよ!(記事毎に設定できます。)

 

 

さて、らくがきがないのでまたまた例のヤツやります。

例のヤツとは:素体からキャラクターを描く練習としてオリキャラ+体操着を描く企画。素体は「SPEEDRAW」というアプリの絵を模写したもの。

f:id:icedtomatobazooka:20220309002431j:plain

ちゃんと色を塗る体力は残っていませんでした。そしてオチの使い回し。なんかこう・・・下から風がぶわーみたいなの描きたかったんですけどムリでしたね。

素体からの練習したやつ↓

f:id:icedtomatobazooka:20220309002936j:plain

酷いでしょ。やっぱり描き慣れてない角度はホントに描けませんね。JavaScriptがうまくいかなくて疲れたのでほとんど手直ししてないっていうのもあります(言い訳)。

 

 

 

ランキング参加中です。下のバナーをクリックして頂けるとやる気値が増幅します!!

f:id:icedtomatobazooka:20201229184218j:plainにほんブログ村 ゲームブログ ゲーム制作へ