さて、サンプルプログラムが無事動いたら、色々いじって遊んでみましょう。
😉絵を書き換えてみる
サンプルプログラムの入ったフォルダに「dat」というフォルダがあります。
この中には、サンプルプログラムで使っている絵が入っています。
サンプルプログラムは、この「dat」フォルダの中身を読み込んで表示しているわけです。
つまり、「dat」フォルダの中身を書き換えれば、サンプルプログラムで表示される絵も変化します。
試しに、「pegi-ch.png」を（ペイントとかでラクガキして）書き換えてやりましょう・・・😉
そしてサンプルプログラムを再起動します。再起動はキーボードの「F5」キーひとつで可能です。
😳プログラムを書き換えてみる
次に、プログラムを書き換えてみましょう。
写真の赤枠にある「サンプル01」を、好きなことばに書き換えてみます。
「dat」フォルダの１つ上の階層・・・ ここのデータがプログラムです。
プログラミング環境の準備 でダウンロードした「Visual Studio Code」を起動します。
ウインドウズのスタートボタン（画面左下の）をクリックして、「vis」まで入れれば出てきます。
（出てこない場合は、インストールされているか確認しましょう😘）
Visual Studio Codeが起動したら、「index.html」をブチこんでやりましょう😎
するとプログラムコードが出てきます。これは、言語でいうと「JavaScript」です。
赤枠を、「サンプル01」から「ペギちゃんお手当してほしいペギィ♥」に書き換えて上書き保存（ctrl＋「s」キー）・・・
Chrome上でF5キーを押して再起動させましょう。
文字が変わりましたでしょうか。
おめでとうございます・・・😘
なお、サンプルプログラムは「index.html」のほか多数のファイルで構成されています。
「index.html」と同じ階層に置いてある「～.js」とか「～.html」もプログラムコードです。
それぞれどーいう役割でどーいう順番で動いているか、プログラムのどこを変更するかなどは別途、サンプルプログラムの解説ページに記載していきます・・・😘
コメント