IchigoJamWebであそぼう

IchigoJamって何?という方はこちらを先にどうぞ!

Scratchの次はIchigoJam



IchigoJamWebであそぼうよ!
わ、黒い画面!
難しそうだけど、ぼくにできるかなぁ?
大丈夫!
始め方の公式動画があるよ!


このブログの内容


最初に動画を見ながらやってみよう

ねずみのチョコがびっくりしたのはこの画面


引用:IchigoJam web公式HP
URL:https://fukuno.jig.jp/app/IchigoJam/

ここで何をするんだろう…と不安になりますよね。


大丈夫です、IchigoJamの開発者の福野泰介さんが、優しく丁寧に教えてくる練習サイトがあります。

いや、私がプログラムを創作してそれを解説しようかとも思ったのですが、非常に素晴らしい練習サイトがありましたので、こちらで学びましょう!

引用:IchigoJam web公式HP
- 【IchigoJamプログラミング、ネット教材】
- はじめてのプログラミング動画付き IchigoJam web
URL:https://fukuno.jig.jp/app/IchigoJam/


動画を見ながら左側で実際に入力することができます。
速度を遅くしたり、一時停止を使いながら、自分でも入力して進めてみましょう。

前後のお話も大事なこと話されていますので、最後まで見ましょう!


こんなプログラムになるよ

先ほどのサイトの教材はオープンデータとのことですので、こちらで私のやってみたものを上げたいと思います。


その1 エルチカ

最初ちょっと失敗してやり直してます。
LED電球(WEBでは画面の枠)をチカチカ光らせるプログラムです。




その2 ねこよけて!

コードはうまくいっていたけど、できあがったゲームですぐ死にました。
これじゃ何が何だかなので、2回ゲームしています。
ねこちゃんが音符の壁にぶつからないようにキーボードの左右キーで操作しています。


さあほらやってみよう!

まずは公式の動画をみて、一緒にやってみてくださいね!
訳が分からなくても、やってみてくださいね!

引用:IchigoJam web公式HP
- 【IchigoJamプログラミング、ネット教材】
- はじめてのプログラミング動画付き IchigoJam web
URL:https://fukuno.jig.jp/app/IchigoJam/


コードの意味が知りたいときはこれ、リファレンスで確認をします。

引用:IchigoJam公式HP
- 【IchigoJamプログラミング、ネット教材】
- はじめてのプログラミング動画付き IchigoJam web
- IchigoJam BASIC Reference
- (日本語ver)
URL:https://fukuno.jig.jp/app/IchigoJam/





どうですか?やってみました?



え?まだ?やってやって!





やりましたね!←


コードを書いて、動かしてみましたか?
自分で作ったゲームをやってみましたか??
キャラや時間を変えてアレンジして楽しむのも。


楽しかった方は、公式サイトにテキストがたくさんありますので、いろいろ作ってみましょう。
先ほどのサイトの【IchigoJamプログラミング、ネット教材】のところにあります。 ↓

引用:IchigoJam web公式HP
- 【IchigoJamプログラミング、ネット教材】
URL:https://fukuno.jig.jp/app/IchigoJam/



私のお気に入りは「IchigoJamプログラミング入門」です。
簡単なところから始めて、いろんなコマンドを使うことができます!

引用:IchigoJam web公式HP
- 【IchigoJamプログラミング、ネット教材】
- IchigoJamプログラミング入門
URL:https://fukuno.jig.jp/app/IchigoJam/

あー楽しかった!
楽しかったけど…
ねぇ、ほとんど公式サイトやってみて!だけなんだけど、このブログとしてはそれでいいの?
…だめ??




このままではあまりにも公式頼りに過ぎるので、この後コードの解説をしてみます。


でも、


最初から完全に理解しなくてもいいんです。

大まかにリファレンス使って流れを掴めればOKです。

このコード書いたらこうなった!が集まれば、楽しくプログラムは作れます。

何これ分かんないと悩んでいるより、コピペでもいいので数を作る方が良いです。
いくつか真似しているうちに、だんだん理解出来てきます。
だんだん理解出来てくると自分で調べてさらに覚えるようになります。


私も、そうやってプログラミングを覚えました。
(文系なので独学からのスタートですから)

お子さんは特に、作って楽しむことが大切です!





それでも、もうちょっと詳しく知りたいという方は続きをどうぞ!

筆者の頑張りを見てあげたいという方もぜひどうぞ!







コードの解説をするよ

ここでは動画の補足をするので、しつこいようですがまずは公式の動画をみて、やってみてくださいね!
やってから解説を読むとかなり理解度が変わります。

引用:IchigoJam web公式HP
- 【IchigoJamプログラミング、ネット教材】
- はじめてのプログラミング動画付き IchigoJam web
URL:https://fukuno.jig.jp/app/IchigoJam/


コードの意味が知りたいときはこれ、リファレンスで確認をします。
私の解説でも、このリファレンスを使っています。

引用:IchigoJam公式HP
- 【IchigoJamプログラミング、ネット教材】
- はじめてのプログラミング動画付き IchigoJam web
- IchigoJam BASIC Reference
- (日本語ver)
URL:https://fukuno.jig.jp/app/IchigoJam/



その1 エルチカ

 日本語にすると… 

  1. LEDを付けて、そのまま10待機する

  2. LEDを消して、そのまま30待機する

  3. 1行目に戻る

  4. LEDがチカチカ点滅する

細かく説明していきますね!

左端の数字

行番号
行番号をつけるとその行はプログラムの一部と認識されます。
行番号は1からじゃなくてもよくて、
10とか100とか好きな数字から始められます。

大きなプログラムを作るときほど、数字は大きくしておきます。
後から行番号で行を挿入することができるためです。

1、2、3としてしまうと間に数字を入れられないですが、
10、20、30としておけば間に11や21など行を挿入できます。

LED 数 / エル・イー・ディー

数が1ならLEDが光り、0なら消える
1がオン、0がオフですね。

: / コロン

コマンドを後ろに続けて書くときの区切り記号
コマンドとは、命令のことです。
LEDを付けなさい、消しなさいというような命令です。
基本的にコマンドは1行に1つですが、「:コロン」を付けると同じ行に次のコマンドを書くことができます。

WAIT 数 / ウェイト

数1の数だけ待つ(60で1秒)
すぐに次のコマンドに行かずに、そのままの状態で待機させます。

GOTO 行番号 / ゴートゥー

指定した行番号へ飛ぶ
処理を繰り返させることができます。



その2 ねこよけて!

まずは前半から

 日本語にすると… 

  1. 画面をクリアして、変数Xに15をセットする

  2. 横15,縦5の位置に、ねこ🐱を表示する
    →主人公を配置

  3. 横は0~31のランダムな数字,縦23の位置に♪♪♪を表示する
    →敵(障害物)を配置。一つ上にスクロール。

  4. そのまま6待機する
    →ゲームの進行速度

CLS / クリア・スクリーン

画面を全部消す
最初に何も書いていないきれいなゲーム画面を用意します。

X=15

変数セット
Xは変数です。15をセットしています。
Xはこのあと横軸の位置に使っています

LC 数1,数2 / ロケート

次に文字を書く位置を横、縦の順に指定する(左上が0,0)
左上が0,0というところに注意してください。
LC X,5 ということは、横15,縦5の位置を指定していますね。
ここがねこ🐱のスタート位置になります。

LC RND(32),23 こちらは、横のRND(32)は後程説明します。
縦23は一番下の行です。
IchigoJamでは最下行に文字を入れると一つ上にスクロールします。

? {数や文字列} / クエスション

数や文字列を表示する (文字列は"で囲む)
?"🐱" ということは画面に🐱を表示するということですね。

RND(数) / ランダム

0から数未満のでたらめな整数を返す
RND(32) ということは0~31までのランダムな数字が返されます。
画面が横に32文字分あるので、その間の数字ということですね。



 

後半に行きます。

 日本語にすると… 

  1. 左矢印ボタンを押したらX-1、右矢印ボタンを押したらX+1をXにセットする
    →Xはねこの横軸なので、-1は左へ移動、+1は右へ移動

  2. ねこが右端と左端に逃げ込めないようにする
    →矢印移動が右端を超える場合はねこを左端に移動、左端を超える場合には右端に移動

  3. もし、矢印移動後の位置に文字(♪)があったら、プログラムを終了する
    →当たり判定。ぶつかったらゲームオーバー

  4. 横X,縦5の位置にねこ🐱を表示する行20へ戻る
    →プログラム終了まで繰り返す

BTN({数}) / ボタン

ボタンが押されていれば1、そうでないとき0を返す
どのボタンが押されたかは、()内の数字でわかります。
下記サイトの「制御・特殊コード」のところに、今回のボタン左右矢印キーの数字が書いてあります。

引用:イチゴジャム レシピHP
- BASIC
- はじめの一歩
- 制御・特殊コード
URL:https://15jamrecipe.jimdofree.com/

BTN(28)は左矢印キー
BTN(29)は右矢印キー

-BTN(28)は左矢印キーが押されていれば-1、
+BTN(29)は右矢印キーが押されていれば+1を返します。

X=X-BTN(28)+BTN(29)は、左を押したら-1(左へ)右を押したら+1(右へ)ねこの位置を動かすということになります。

矢印キーで移動するということも、命令してあげないとプログラムは動かないんです。

数 & 数 / アンパサンド

論理積(ビット演算)
いきなり文系には!?!?な説明が出てきました。

これはもう説明が難しすぎるので、こういうもんだと覚えて下さい。
2進数で計算しますので…。

X= X&31
動画の中でやりましたね
右端と左端に逃げ込めないようにしている記述、です。

計算の中身は置いといて結果だけ書きます。
Xに32が入った場合は、0が返ります。
Xに-1が入った場合は、31が返ります。
Xに0~31が入った場合は、そのままの値が返ります。

画面は左端が0、右端が31ですので、
X=X-BTN(28)+BTN(29)の計算結果が
右端を超える場合は左に移動、左端を超える場合には右端に移動させている、ということです。

IF 数 {THEN} コマンド1 / イフ

数が0でなければコマンド1を実行する(THENは省略可)
英語みたいに読むと、もし数が0以外なら~と読めるので、わかりやすいですね。

SCR(数,数) / スクリーン

画面上の指定した位置に書かれた文字コードを返す
SCR(X,5)は横X、縦5の位置の文字コードを返します。文字がなければ0が返ります。

END / エンド

プログラムを終了する
ゲームオーバーです。



 

くっつけるとこうなります

 日本語にすると… 

  1. 画面をクリアして、変数Xに15をセットする

  2. 横15,縦5の位置に、ねこ🐱を表示する
    →主人公を配置

  3. 横は0~31のランダムな数字,縦23の位置に♪♪♪を表示する
    →敵(障害物)を配置。一つ上にスクロール。

  4. そのまま6待機する
    →ゲームの進行速度

  5. 左矢印ボタンを押したらX-1、右矢印ボタンを押したらX+1をXにセットする
    →Xはねこの横軸なので、-1は左へ移動、+1は右へ移動

  6. ねこが右端と左端に逃げ込めないようにする
    →矢印移動が右端を超える場合はねこを左端に移動、左端を超える場合には右端に移動

  7. もし、矢印移動後の位置に文字(♪)があったら、プログラムを終了する
    →当たり判定。ぶつかったらゲームオーバー

  8. 横X,縦5の位置にねこ🐱を表示する行20へ戻る
    →プログラム終了まで繰り返す


おわりに

どのコードが何をやっているかだいたい理解できましたか??


私が仕事で作るプログラムも、同じような作りです。
最初に画面や変数を初期化、ボタン押下で処理の開始、条件やボタン押下で終了するための処理、終了せず処理継続のための処理。

言語によらず、プログラムの基本の形ですね。


もう一度言いますが、最初から全部理解する必要はないです。

このコード書いたら結果そうなるのね、で大丈夫!
まずは色んなプログラ厶を書いて遊んでみることがプログラムが書けるようになる近道です。

遊びながら覚えましょう!


 

それでは!
【IchigoJamプログラミング、ネット教材】へ! ↓

引用:IchigoJam web公式HP
- 【IchigoJamプログラミング、ネット教材】
URL:https://fukuno.jig.jp/app/IchigoJam/



私のお気に入りは「IchigoJamプログラミング入門」

引用:IchigoJam web公式HP
- 【IchigoJamプログラミング、ネット教材】
- IchigoJamプログラミング入門
URL:https://fukuno.jig.jp/app/IchigoJam/



※IchigoJamはjig.jpの登録商標です。



この記事をシェアする
  No Related Posts...

0 件のコメント :

コメントを投稿