サンプルプログラムをいじってみる

プログラミング支援

さて、サンプルプログラムが無事動いたら、色々いじって遊んでみましょう。

😉絵を書き換えてみる

サンプルプログラムの入ったフォルダに「dat」というフォルダがあります。

この中には、サンプルプログラムで使っている絵が入っています。

サンプルプログラムは、この「dat」フォルダの中身を読み込んで表示しているわけです。

つまり、「dat」フォルダの中身を書き換えれば、サンプルプログラムで表示される絵も変化します。

試しに、「pegi-ch.png」を(ペイントとかでラクガキして)書き換えてやりましょう・・・😉

🤣

そしてサンプルプログラムを再起動します。再起動はキーボードの「F5」キーひとつで可能です。

😳プログラムを書き換えてみる

次に、プログラムを書き換えてみましょう。

写真の赤枠にある「サンプル01」を、好きなことばに書き換えてみます。

「dat」フォルダの1つ上の階層・・・ ここのデータがプログラムです。

プログラミング環境の準備 でダウンロードした「Visual Studio Code」を起動します。

ウインドウズのスタートボタン(画面左下の)をクリックして、「vis」まで入れれば出てきます。

(出てこない場合は、インストールされているか確認しましょう😘)

Visual Studio Codeが起動したら、「index.html」をブチこんでやりましょう😎

確認メッセージが出ることがありますが「Open」で・・・

するとプログラムコードが出てきます。これは、言語でいうと「JavaScript」です。

赤枠を、「サンプル01」から「ペギちゃんお手当してほしいペギィ♥」に書き換えて上書き保存(ctrl+「s」キー)・・・

Chrome上でF5キーを押して再起動させましょう。

これであなたも、立派なプログラマーです!

文字が変わりましたでしょうか。

おめでとうございます・・・😘

なお、サンプルプログラムは「index.html」のほか多数のファイルで構成されています。

「index.html」と同じ階層に置いてある「~.js」とか「~.html」もプログラムコードです。

それぞれどーいう役割でどーいう順番で動いているか、プログラムのどこを変更するかなどは別途、サンプルプログラムの解説ページに記載していきます・・・😘

コメント

タイトルとURLをコピーしました