【IchigoJam × Ambient】センサーの値、ゲームのスコアをグラフ化!IchigoJamでIoT入門【NT鯖江2020】
IchigoJamをインターネットにつなげて川下りゲームのスコアをグラフ化!
NT鯖江2020にHana道場として出展しました!(10/3-4)
※NTとは「なにか・つくろう」の略
Hana道場ブースはIchigoJamとドローンのみ置いてあるだけだったので、SNT(その場で・なにか・つくろう)しました。出展中でもなにかつくる!
<今回SNTしたもの>
#NT鯖江 の出展中につくりました笑#MixJuice × #IchigoJam で川下りゲームのスコアグラフ化!
— 初代 *Hana道場【師範】 (@shoichi1031da) October 4, 2020
現在ハイスコア20!ぜひ挑戦してみてください✨ pic.twitter.com/DALGMwYTAd
3の川下りゲームのスコアがグラフ化されるプログラムを解説していきます!
川下りゲーム自体の解説は、こちらでしています↓↓
【目次】
1.必要なもの
Ambientはマイコンから送信されたデータを蓄積・グラフ化するIoT可視化サービスです。アカウントとチャネルは無料で作れるので、IchigoJamとMixJuice(+WiFi環境)があればお金は掛かりません!(2020年10月現在)
2.プログラム概要
ファイル0番:川下りゲーム本体
ファイル1番:スコア送信
※1つのファイルにまとめてもらってもOK
※値送信→グラフ化のテストだけしたい方はファイル1番のみでOK
【ファイル0番:川下りゲーム本体】
6 K=INKEY():IF K!=10 LC 0,5:?"エンター デ スタート":?"ハイスコア";PEEK(#FFF):CONT
10 CLS:CLT:VIDEO1:X=15
15 S=TICK()/60
20 LC X,5:?"🐱"
30 LC RND(32),23:?S
40 WAIT 4
50 X=X-BTN(28)+BTN(29)
60 X=X&31
70 IF SCR(X,5)=0 GOTO15
80 IF S>PEEK(#FFF) GSB@HS ELSE ?"スコア:";S
90 WAIT120
100 LRUN 1
200 @HS
210 VIDEO6
220 ?"ハイスコア!":?S:WAIT180
230 POKE #FFF,S
240 SAVE FILE()
250 RTN
【ファイル1番:値送信プログラム】
IchigoJam + MixJuiceで製作するIoTセンサを参考に作成しました。
10 CLS:P=#C00:UART1
20 ?"MJ PCT application/json"
30 ?"MJ POST START ambidata.io/api/v2/channels/チャネルID/data"
35 GSB@TX
40 '{"writeKey":"ライトキー","d1":"#"}
50 ?"MJ POST END"
100 LRUN 0
500 @TX
510 IF PEEK(P)!=ASC("'") P=P+1:CONT
520 P=P+1:IF PEEK(P)=ASC("#") ?S;:CONT
530 IF PEEK(P)!=0 ?CHR$(PEEK(P));:GOTO520
540 ?:RTN
そもそもMixJuiceの使い方(接続方法、ネットワークにつなぎ方など)が分からない方は下記サイトからご確認ください。
3.Ambientの使い方
川下りゲームのスコアをグラフ化するために、Ambientで設定をしていきましょう。
- 「チャネル一覧」からチャネルを選択(クリック)
- 画面上部の「グラフ+」のアイコンをクリックし「チャネル/データ設定」をクリック
- 「チャート設定」から下記画像のように入力
IoT人流カウンターのmixjuice版を設置してみました!#IchigoJam #楽しい pic.twitter.com/mIGAIuRZbQ
— Hana道場【師範】 (@shihan_hanadojo) 2019年11月15日
4.プログラム解説
【ファイル0番:川下りゲーム本体】
6 K=INKEY():IF K!=10 LC 0,5:?"エンター デ スタート":?"ハイスコア";PEEK(#FFF):CONT
10 CLS:CLT:VIDEO1:X=15 ビデオ画面を通常サイズにする
15 S=TICK()/60 経過時間(スコア)を秒にして変数Sに保存
20 LC X,5:?"🐱" X,5の位置に、ネコを表示
30 LC RND(32),23:?S 0-31の中でランダム,23の位置に、経過時間を表示
40 WAIT 4 スピード
50 X=X-BTN(28)+BTN(29) ←→キー操作
60 X=X&31 変数Xが0より小さくなったら31に、31より大きくなったら0にする
70 IF SCR(X,5)=0 GOTO15 ネコが経過時間に当たるまでゲーム続行
80 IF S>PEEK(#FFF) GSB@HS ELSE ?"スコア:";S
90 WAIT120
100 LRUN 1 ファイル1番のプログラムをLOADしてRUN
200 @HS 200行目以降HSというハイスコア更新時のサブルーチン
210 VIDEO6 白黒反転の画面サイズ4倍にする
220 ?"ハイスコア!":?S:WAIT180
230 POKE #FFF,S メモリ#FFFに変数Sの値を書き込む
240 SAVE FILE() 現在のファイル番号にSAVE
250 RTN サブルーチン呼び出し元(GSB)へもどる
ハイスコアの保存以外は普通の川下りゲームとほとんど変わりませんが、敵が経過時間です!
・敵を時間経過ごとに増やしたい
— Hana道場 (@hanadojo_sabae) 2020年8月24日
・生き残ったタイムを表示したい
この2つを同時に叶えるお手軽改造方法です!!
秒単位にすると難易度ダウンするのでオススメです✨#IchigoJam #プログラミング https://t.co/TOwS4gG7cf
ハイスコアの保存プログラムを入れると、電源を切ったとしてもハイスコアごと保存されます(メモリのプログラム領域#FFFに保存しているため)。再びLOADすればハイスコアが残っていることが分かります。
【ファイル1番:値送信プログラム】
ⅰ) MixJuiceで値を送信するプログラム
10 CLS:P=#C00:UART1 変数Pはプログラム領域のメモリアドレス
20 ?"MJ PCT application/json" 通信のタイプを設定
30 ?"MJ POST START ambidata.io/api/v2/channels/チャネルID/data"
POST通信開始(START以降のURLに通信する)
35 GSB@TX サブルーチンTXを呼び出す
40 '{"writeKey":"ライトキー","d1":"#"}
JSON形式で、キー名はd1、値はスコア(変数S)をAmbientへ送信する。#は目印のようなもの
50 ?"MJ POST END" POST通信を終了
30行目:START以降のURLは大文字・小文字を間違えずに打ちましょう。エラーコードが返ってきた場合は打ち間違いの可能性大です。
40行目:JSON形式でデータを送ります。{キー名:値,キー名:値,…}のようにキー名と値をセットで記述します。
キー名d1の値(=スコア)が#になっている理由と`を使っている理由は(ⅲ)で書きます。
参考:JSONの形式を完全理解して読み書きできるようになるための記事 | 侍エンジニア塾ブログ(Samurai Blog) - プログラミング入門者向けサイト
ⅱ) ファイル移行
100 LRUN 0 0番のプログラムをLOADしてRUN
Ambientへ送信が終了したら川下りゲームのスタート画面にもどるようにします。
ⅲ) 40行目のプログラムをPRINT出力するプログラム
500 @TX 40行目をPRINT出力するためのサブルーチンTX
510 IF PEEK(P)!=ASC("'") P=P+1:CONT ' を見つけるまで変数Pを更新し続ける
520 P=P+1:IF PEEK(P)=ASC("#") ?S;:CONT #を見つけたら#の代わりに変数SをPRINT出力
530 IF PEEK(P)!=0 ?CHR$(PEEK(P));:GOTO520 終了コード0を見つけるまでPRINT出力
540 ?:RTN 改行して、呼び出し元にもどる
MixJuiceのMJコマンドはPRINT出力することで実行されます。
例:?"MJ APL"
20,30,50行目のプログラムは、PRINT(?)出力でMJコマンドを実行しています。
<なぜ40行目だけ処理が難しい(違う)のか>
【理由】
?" "の中でさらに"が使われているため
40行目を20,30,50行目と同じように、?で書くとこのようになります。
JSON形式では、キー名と値(文字列の場合)は""で囲む必要があるので、
?命令の""の中にさらに"を書くことになります。
Syntax error
(例1 errorの原因は、?""で完結しているのにその後ろにさらに"があるから)
{Syntax error in 40
(例2 errorの原因は、?"{"で完結しているのにその後ろにwriteKEY...と文字列が続いているため)
Syntax errorを防ぐため、500行目以降の処理でPRINT出力をしています。
<500行目以降のTXサブルーチン解説>
510行目:'を見つけるまで変数P(メモリのアドレス)を更新し続ける。
520、530行目:行の最後のメモリの値は終了コードといって、0が保存されています。変数Pの値が0のときは、行の最後までPRINT出力が完了したことになります。
次の文字が#の場合のみ、520行目で(#の代わりに)変数Sを出力しています。
つまり{d1:S}となり変数Sの値をキー名d1としてAmbientへ送ることができるという訳です。
【結論】
MixJuiceでJSON形式で送るには、”の問題で500行目以降のようにプログラムのメモリ領域から読み込んでPRINT出力をする必要がある。
5.まとめ
4.プログラム解説をちゃんと理解しようと思うと、IchigoJamのメモリマップやMixJuiceでの通信(GET,POST)やデータ形式(JSON)の知識も必要になります。IchigoJamのステップアップ、IoT入門として良い教材かも!?
<やってみよう>
- d1だけでなくd2,d3の値も送信してみよう!
- センサーと組み合わせてIoTを作ってみよう!
質問やご指摘はTwitterからお願いします。
CC BY shoichi1031da / @shoichi1031da
<参考リンク>
IchigoJam + MixJuiceで製作するIoTセンサ
JSONの形式を完全理解して読み書きできるようになるための記事 | 侍エンジニア塾ブログ(Samurai Blog) - プログラミング入門者向けサイト
初心に返って王道「川下りゲーム」徹底解説!!for IchigoJam【「寺子屋Hana」開所記念】
Hana道場の横展開としてSAPジャパンが支援し寺子屋Hanaが福島県会津若松に設立しました!!2020.9.26
本日、寺子屋Hanaがオープンしました。
— CoderDojoAizu (@CoderDojoAizu) September 26, 2020
9名が参加です。
CoderDojo Aizuも運営を応援しています。
今日はIchigoJam講座とレーザーカッター・3Dプリンタのデモを行いました。
地域の子供たちのICT教育の場として機能させていきたいと思います。
メンターのみなさま、今日もありがとうございました。 pic.twitter.com/KYwLRXhQlP
Hana道場公式ブログに詳細あり
また9月26日は私、師範の誕生日でもあり、私がIchigoJamでプログラミングを始めてちょうど3年が経ちました!
とてもアニバーサリーな日なので、初心に返って王道プログラム「川下りゲーム」を徹底解説していこうと思います。
新たに子どもたちにIchigoJamプログラミングを教えたい人の一助になれば幸いです。
【目次】
1. 川下りゲームについて
川下りゲームはIchigoJamでプログラミングを始める人が最初に作る入門的プログラムです。とても短いプログラムの中に、アプリ(ゲーム)作りで大切な要素が詰まっており、1行づつ打ち込んで実行しながらゲームが出来上がっていく過程を体験できます。
(鯖江市の小学校の総合学習の授業でも川下りゲームをつくります)
2. プログラム概要
【プログラム】
20 LC X,5:?"0"
30 LC RND(32),23:?"*"
35 WAIT 3
36 X=X-BTN(28)+BTN(29)
39 IF SCR(X,5) END
40 GOTO 20
3. 実行結果と解説(1行づつ)
<初期設定>10行目
<自分のキャラ表示>20行目
<敵のキャラ表示>30行目
<繰り返し>40行目
35〜39行目を飛ばして、40行目の繰り返しを入力し実行します。
↑の改行デモの前半では、手動で*を打ってエンターを押しています。
<スピード調整>35行目
WAITを入れることで、*を表示する間隔が長くなります。
コンピューターの速度は人間には速すぎるので、WAITで待ってもらいましょうねと言っています。
<キャラの移動操作>36行目
キーボードのキーにはそれぞれ番号が決まっています。
←キーは28番、→キーは29番です。
BTN(28) は←キーを押すと1に、押してないと0を返します。
←キーを押したときの36行目
36 X=X-1+0
変数Xを-1して記憶し直します。自分のキャラが左に1マス移動します。
→キーを押したときの36行目
36 X=X-0+1
変数Xを+1して記憶し直します。自分のキャラが右に1マス移動します。
<当たり判定>39行目
4. バグについて
バグの理由
実は、この状態だとバグがあります。
何人かの子どもたちはバグを見つけてニヤニヤしていることでしょう。
左右の端にいくと敵に当たらない<無敵バグ>が起こります。
なぜ<無敵バグ>が起こるのか、解説します。
結論:自分のキャラが画面外にいってしまっているから。
画面左端は0ですが、さらに←キーを押すとXがマイナスの値になります。
画面上には0の位置にいるように表示されますが、実際の座標はマイナスになっており、0〜31に表示される*には永遠に当たらなくなります。
(右端も同じように31にいるように表示されていても実際は32以上になっています)
バグを解消しよう!
プログラムの穴(バグ)をついて、不正しているプレイヤーを「チーター」と言います。子どもたちは大体チーターという言葉を知っていて、なぜか喜びます。
チーター対策としてバグを直すのもプログラマーの仕事だよと言いながら、バグ修正のプログラムを教えます。
短いバージョンと長いバージョンの2つご紹介します。どちらも同じ動きになります。
短いプログラム
長いプログラム
38 IF X>31 X=0
38 IF X>31 X=0 もし Xが31より大きくなったら Xに0を記憶させる
5. まとめ
1つでもプログラムの原理を理解すると、他にも応用が効くようになっていきます。
あとは自分でも改造、実験(仮説と実装の繰り返し)をしながら、遊びつつ学んでいきましょう!
仮説を即実装できるのがIchigoJamの良いところ!何度間違えてもコンピューターは怒りません。
川下りゲームのおすすめの改造方法は別の記事で紹介しようと思います。
<やってみよう>
- 自分のキャラを変える
- 敵のキャラを変える
- スピードをゆっくりにする
- CLTとTICK()を使ってタイムを表示
CC BY shoichi1031da / @shoichi1031da
【文字列の代入】『お絵かきゲームのお題生成プログラム』 for IchigoJam
お絵かきゲームのお題を生成するプログラムを紹介します。
イベントなどで自由にIchigoJamで遊んでもらうときに便利です。
↑Hana道場4周年イベントの様子です。
写真左下のMeganeJamの0番にお題生成プログラムが保存されています。
MeganeJamのモニターにお絵かきゲームのお題が表示され、それに合わせてお絵かきバトル!!(MeganeJamのボタンを押すと次のお題が表示)
誰が上手いかはお母さんがジャッジしていました笑
IchigoJam初心者でも放っておいても大丈夫!無料体験イベントなどでおすすめです。
【プログラム】
5 CLS:VIDEO 5:T=180
10 LET[0],"リンゴ","アメ","ゾウ","ニホン","フクイ","キリン","ハル","ナツ","アキ","フユ"
20 R=RND(10)
30 LC 0,0:?"オダイハ.."
40 IF BTN(32)=0 BEEP RND(50):CONT
50 ?STR$([R]):BEEP
60 WAIT120:BEEP60
70 ?"ヨウイ";:WAIT60:?"スタート!":BEEP20,60
80 CLT
90 LC 0,0:?"ノコリ";T-TICK()/60;" "
100 IF T-TICK()/60>0 GOTO90
110 LC 0,2:?"シュウリョウ!!":BEEP20,120
<使い方>
スペースを押すと、10行目で指定した文字列がランダムに一つ表示されます。
そして3分間時間を測ってくれます。
<解説>
T:制限時間 R:0〜9の乱数
[0]〜[9]:お題の文字列
5 CLS:VIDEO 5:T=180 画面サイズを5、制限時間を180秒に設定
10 LET[0],"リンゴ","アメ","ゾウ","ニホン","フクイ","キリン","ハル","ナツ","アキ","フユ" お題を配列に代入
20 R=RND(10) 0〜9のうちランダムに一つを変数Rに代入
30 LC 0,0:?"オダイハ.."
40 IF BTN(32)=0 BEEP RND(50):CONT スペースを押すまで、くりかえし
50 ?STR$([R]):BEEP [0]〜[9]のうちランダムに一つ文字列として表示
60 WAIT120:BEEP60
70 ?"ヨウイ";:WAIT60:?"スタート!":BEEP20,60 開始のベル
80 CLT
90 LC 0,0:?"ノコリ";T-TICK()/60;" " ←スペース2つ分
100 IF T-TICK()/60>0 GOTO90 残り時間が0になるまでくりかえし
110 LC 0,2:?"シュウリョウ!!":BEEP20,120 終了のベル
数1の部分に文字列を代入した変数を入れましょう。
変数や配列に代入した文字列の表示は、下のようにします。
20 ?STR$([0]) 代入した文字列の表示
RUN
リンゴ
配列は[0]〜[101]まであるので、お題(文字列)を102個保存可能!!
<やってみよう>
- お題の追加(10行目)
- 制限時間の変更(5行目)
- 1つ目のお題終了後、次のお題が表示されるようにする
- 同じお題が表示されないようにする
Hana道場4周年の時は、<やってみよう>の4までできたプログラムで行いました。
チャレンジしてみてください!
<追記>2020/9/23
複数人で行う「プログラミングお絵かきバトル」が白熱!!
プログラミング能力とデザインセンスが試される!?
#IchigoJam お絵かきバトル✨
— Hana道場 (@hanadojo_sabae) September 23, 2020
お題は「ニホン」
①お絵かきするためのプログラムを自分で作成
②お題作成プログラムが出題するお題を3分以内に書く
③第三者がジャッジ!!
途中でお絵かきプログラムを修正可能!プログラミングとデザインが試される!! pic.twitter.com/hhnm03uZFb
3分の中でならお絵かきプログラムを書き換えOK!
必要な機能を実装しながらお絵かきを楽しもう✨
CC BY shoichi1031da / @shoichi1031da
【POKEでキャラ作成】みんなでワイワイ『視力検査ゲーム』 for IchigoJam / めがねのまち 鯖江
目の健康にも力を入れて発信しています。
IchigoJamでも視力検査ゲームをつくってみました。
みんなでワイワイ測りましょう!
【プログラム】
5 CLV:CLP:V=7
6 COPY 233*8,232*8,8*4
10 POKE 232*8,0
11 POKE 233*8+7,0
12 POKE 234*8+2,67,1,1,67
13 POKE 235*8+2,194,128,128,194
20 CLS:VIDEO V
30 C=232+RND(4)
40 Z=2*(V=1)+4*(V=3)+8*(V=5)+16*(V=7)
50 X=31/Z:Y=23/Z
60 LC X,Y:?CHR$(C)
70 K=INKEY():IF K=0 WAIT10:CONT
80 IF K=10&&V>1 V=V-2:M=0
90 IF M=2 VIDEO3:?"シリョク:";S:END
100 IF K=8 M=M+1:GOTO20
110 S=S+1
120 GOTO20
<遊び方>
2人でプレイヤー側と審判側に分かれて遊びます。
審判は、表示された方向とプレイヤーの言った方向が合っていればEnter、間違っていればBackSpaceを押します。
3回連続で間違うとゲームオーバー。スコア(視力)が表示されます。
<解説>
V:画面サイズ C:方向を示す文字のコード
Z:表示する位置を画面サイズによって調整する
X:方向を示す文字のヨコ座標 Y:方向を示す文字のタテ座標
M:ミスした回数 S:スコア(視力)
20 CLS:VIDEO V VIDEO7からスタート
30 C=232+RND(4) ランダムに↑↓←→方向の文字コードを決定
40 Z=2*(V=1)+4*(V=3)+8*(V=5)+16*(V=7) 画面サイズによって中心の座標を補正
50 X=31/Z:Y=23/Z 方向文字の位置の決定
60 LC X,Y:?CHR$(C) 方向文字の表示
70 K=INKEY():IF K=0 WAIT10:CONT 何かキーを押すまで同じ行繰り返し
80 IF K=10&&V>1 V=V-2:M=0 Enterキーを押すと、画面サイズが半分になる
90 IF M=2 VIDEO3:?"シリョク:";S:END 同じ大きさで3回ミスをすると終了
100 IF K=8 M=M+1:GOTO20 BackSpaceキーを押すとミスカウントを増やし、同じ大きさで再表示
110 S=S+1 スコア増加
120 GOTO20
<補足>
6行目で文字コード232(○)を3つコピーして用意します。
1文字あたり8つのアドレスで構成されているので、8*3の32個分にコピーします。
10〜13行目でコピーした○文字を、↑↓←→方向に穴を空けていきます。
例えば、10行目だと○文字の一番上の部分(アドレス:232*8)を0に書き換えることで、○の上方向に穴の開いた文字になります。
※文字コード224〜255の文字はPCGといって、POKEで書き換え可能な文字です。
【文字コード232の初期状態】
POKE 232*8,0 を実行すると
↑方向の文字ができました!
?CHR$(232) を実行して書き換わっているか確認しましょう。
あとは同じように、
11行目で↓(233番)、12行目で←(234番)、13行目で→(235番)の方向文字を作成しています!
<改造方法>
さらに4つの方向文字、右上、左上、右下、左下を追加していきます。
下のプログラムを追加すればOKです。
6 COPY 233*8,232*8,8*7
14 POKE 236*8+1,96,193
15 POKE 237*8+1,6,131
16 POKE 238*8+5,193,96
17 POKE 239*8+5,131,6
30 C=232+RND(8)
6 COPY 233*8,232*8,8*7 ○の文字を7個分コピー
14 POKE 236*8+1,96,193 右上 方向の文字作成
15 POKE 237*8+1,6,131 左上 方向の文字作成
16 POKE 238*8+5,193,96 右下 方向の文字作成
17 POKE 239*8+5,131,6 左下 方向の文字作成
30 C=232+RND(8) 8つの方向からランダムに1つ決定
合計で8個の文字(232〜239番)をつくりましたね。
前方向ということで○をそのまま使うのもありかも?w
これを期にPOKEによるキャラクターづくりをマスターしましょう!
CC BY shoichi1031da / @shoichi1031da
【人気ゲーム】『プロ飛行士をめざせ!!』for IchigoJam / 『プログラミング教育マスター』がドランクドラゴンさんの番組で紹介
お久しぶりです、Hana道場師範です。
僕も作成に協力させていただいた『プログラミング教育マスター』がドランクドラゴンさんの番組で紹介されました。
『プログラミング教育マスター』を手掛けた株式会社リオの浅田さんのFacebookでこんな嬉しい投稿を!
僕のブログIchigoJamで画像保存?お絵かきゲーム&イラスト保存プログラムを参考に、ねばーる君をつくってくれました。
活用してくれる方がいるということで、ブログを再開しようと思います。
Hana道場で人気のアクションゲーム『プロ飛行士をめざせ』
改造の余地も大きくとてもおすすめのプログラムです。
こちらの本でも収録されています。
『アニメーションとゲームをつくりながら学ぶ Hana道場式プログラミング』by 師範
【プログラム】
10 FOR X=10 TO 18 STEP4
20 Z=RND(19)+2:IF Z=A CONT
30 FOR Y=0 TO 22
40 LC X,Y:?CHR$(1-(Y=Z))
50 NEXT:A=Z
60 NEXT
70 LC W,Z:?"🚁"
80 WAIT3
90 LC W,Z:?" "
100 K=INKEY():IF K>28&&K<32 C=K
110 C=C-(Z>21)+(Z<1)
120 W=W+(C=29)
130 Z=Z+(C=31)-(C=30)
140 IF SCR(W,Z)!=1 GOTO70
<操作方法>
↑↓→で操作します。
壁にぶつかったら終了です。壁を全てくぐり抜けたらクリアです。
<解説>
X:壁のヨコ座標 Y:壁のタテ座標 Z:壁穴のタテ座標 A:一つ前の壁穴のタテ座標
W:ヘリのヨコ座標 Z:ヘリのタテ座標(変数のリユース)
K:入力したキーのコード C:ヘリの自動移動用
10 FOR X=10 TO 18 STEP4 壁はヨコ座標10,14,18の3箇所に表示
20 Z=RND(19)+2:IF Z=A CONT 穴をランダムに決定。同じ位置ならやり直し
30 FOR Y=0 TO 22 壁はタテ座標0〜22に表示
40 LC X,Y:?CHR$(1-(Y=Z)) 壁(文字コード1番)と穴(文字コード0番)を表示
50 NEXT:A=Z 一つ前の壁穴のタテ座標を変数Aに記憶させる
60 NEXT
70 LC W,Z:?"🚁" ヨコW,タテZの位置にヘリを表示
80 WAIT3
90 LC W,Z:?" " ヘリを消す
100 K=INKEY():IF K>28&&K<32 C=K ←↓↑→どれかを押したらCにキーコードを代入
110 C=C-(Z>21)+(Z<1) ヘリの上下の移動制限
120 W=W+(C=29) →方向の自動移動
130 Z=Z+(C=31)-(C=30) ↑↓方向の自動移動
140 IF SCR(W,Z)!=1 GOTO70 もし 壁(1番)に当たっていなければ 70行目へ
<改造方法>
- 穴を広げる
40 LC X,Y:?CHR$(1-(Y=Z)-(Y=Z+1))
- クラッシュ演出をつける
150 LC W,Z:?CHR$(244):BEEP50,80
- クリアしたら次のステージへ
135 IF W=25 W=0:C=0:GOTO10
- 壁を増やす
10 FOR X=10 TO
- ステージ数を追加
- ステージをクリアする毎にスピードアップ
- 最終ステージ(第5ステージ)の演出
4〜7は自分でやってみて下さい!
『アニメーションとゲームをつくりながら学ぶ Hana道場式プログラミング』by 師範
に5〜7のプログラムが載っていますので、知りたい方はぜひお買い求めください^^
IF文や文字コードなども学ぶことができます!
CC BY shoichi1031da / @shoichi1031da
【VRAM書き換え】たった4行の『○○をさがせ!!ゲーム』for IchigoJam
たった4行のお手軽ゲームです。
一つだけ違うキャラを見つけたら指を指します。
一つの画面でみんなでやると楽しいです。
【プログラム】
10 POKE#900,249
20 COPY#901,#900,32*24-1
30 POKE RND(32*24)+#900,250
40 CONT
【改造プログラム】
5 S=0:C=250:CLT
10 POKE#900,249
20 COPY#901,#900,32*24-1
30 POKE RND(32*24)+#900,C
40 X=15:Y=12
50 LCX,Y,1
60 WAIT6
70 X=X-BTN(28)+BTN(29)
80 Y=Y-BTN(30)+BTN(31)
90 IF BTN(32)*SCR(X,Y)=C S=S+1:GOTO10
100 IF S<3 GOTO50
110 CLK
120 LC12,12:?"タイム ";TICK()/60
カーソルを違うキャラに合わせてスペースを押そう。
3回当てるまでのタイムを競います。
<改造プログラムの解説>
5 S=0:C=250:CLT 文字コード250のキャラを見つけるゲーム
10 POKE#900,249 画面左上(#900)に文字コード249のキャラを表示
20 COPY#901,#900,32*24-1 アドレス#900にある文字を画面いっぱいにコピー
30 POKE RND(32*24)+#900,C 画面上のランダムな位置に250のキャラを表示
40 X=15:Y=12 カーソルの座標
50 LCX,Y,1 ヨコX,タテYの位置にカーソルを表示
60 WAIT6
70 X=X-BTN(28)+BTN(29) カーソルの←→移動
80 Y=Y-BTN(30)+BTN(31) カーソルの↑↓移動
90 IF BTN(32)*SCR(X,Y)=C S=S+1:GOTO10 もし 250番のキャラの位置でスペースを押したら スコアを1増やし、再表示
100 IF S<3 GOTO50 スコアが3未満ならゲーム続行
110 CLK
120 LC12,12:?"タイム ";TICK()/60 3回見つけるまでのタイムを表示(終了)
CC BY shoichi1031da / @shoichi1031da
【メモリの読み書きコピー】スネークゲーム風プログラム for IchigoJam
実行画面はYouTubeからご覧ください。
いちごを食べるたびに猫ちゃんが増殖していきます。
壁に当たるか、自分の体に当たるとゲームオーバーです。
プログラム自体は短いですが、メモリの読み書きコピーと配列を組み合わせているため難易度は高めの4.5です(5でもいいかも?)。
【プログラム】
10 CLS:CLV:K=28:X=#A4F:S=1
20 POKE#900,1:POKE#91F,1
30 COPY#920,#900,32*21
40 COPY#901,#900,31
50 COPY#BA1,#BA0,31
60 R=RND(32*22)+#900:IF PEEK(R) CONT ELSE POKER,255
70 POKEX,236
80 WAIT3
90 POKE[B],0:[B]=X:B=(B+1)%S
100 A=INKEY():IF A K=A
110 X=X-(K=28)+(K=29)-32*(K=30)+32*(K=31)
120 IF PEEK(X)=255 S=S+1:GOTO60
130 LC0,22:?"Score:";S-1;" ";
140 IF PEEK(X)=0 GOTO70
【コメントつきプログラム】
// Xは自キャラ(猫)の座標。VRAMのアドレス
10 CLS:CLV:K=28:X=#A4F:S=1
// 壁表示プログラム(ver1.4以上ならDRAWコマンドでも可)
20 POKE#900,1:POKE#91F,1
30 COPY#920,#900,32*21
40 COPY#901,#900,31
50 COPY#BA1,#BA0,31
// いちごの出現位置をランダムに決定。いちごの出現位置になにかあればやりなおし
60 R=RND(32*22)+#900:IF PEEK(R) CONT ELSE POKER,255
// 猫を表示
70 POKEX,236
80 WAIT3
//配列[B]に先頭猫の位置を代入。猫の数分配列を使い回す(配列節約のため)
90 POKE[B],0:[B]=X:B=(B+1)%S
// 一度押した方向へ進み続けるために変数Aを用意
100 A=INKEY():IF A K=A
// 猫の位置を押したキーによって決定
110 X=X-(K=28)+(K=29)-32*(K=30)+32*(K=31)
// いちごをとったらスコアが増える
120 IF PEEK(X)=255 S=S+1:GOTO60
130 LC0,22:?"Score:";S-1;" ";
// 当たり判定。当たったら次の行へ(終了)
140 IF PEEK(X)=0 GOTO70
【ポイント】
- VRAMに直接書き込めば、処理も早くなり、変数もひとつ(今回でいう変数X)で済むようになります。
- 90行目がこのプログラムの最重要ポイント。猫の先頭の座標Xを配列に保存し、文字コード0で残像を消す作業をしています。たとえば、猫が3匹(S=3)のとき配列は[0]〜[2]の3つを使い回すことになります。
理屈的には↑のように増えていっています。
なので、配列は102個あるので102匹まで猫を増やすことができるはず!
メモリの読み書きコピーを使った時短術と、配列の節約術のご紹介でした!
CC BY shoichi1031da / @shoichi1031da
【人気ゲーム】2人対戦シューティングゲームでゲーム大会!? for IchigoJam
プロジェクターで画面を映し出して、トーナメント形式でシューティングゲーム大会をした様子はこちら↓
大盛り上がり!
#IchigoJam シューティング大会決勝戦の模様をお届けします。
— Hana道場 (@hanadojo_sabae) December 26, 2019
一発撃ったら攻守交代のハラハラ感#出張Hana道場 pic.twitter.com/ehvbiZO8Ma
当時のプログラムはこちら↓
#IchigoJam で2人対戦シューティングゲームをつくりました!
— Hana道場【師範】 (@sihan_ichigojam) September 12, 2019
一発撃ったら、攻守交代です。#Hana道場 でも盛り上がったのでオススメです。 pic.twitter.com/NW9m5Ss1uf
子どもたちから、攻守がどちらかわかりやすくして欲しいと要望を受けたので、改良版をつくりました。
【改良版プログラム】
5 X=12:W=3:VIDEO3
20 K=INKEY()
30 LCX,0:?CHR$(249-244*!F)
40 LCW,10:?CHR$(249-244*F);
50 X=(X-(K=28)+(K=29))&15
60 W=(W-(K=90)+(K=67))&15
70 IF K=31&&!F Y=0:GSB110
80 IF K=88&&F Y=10:GSB110
90 GOTO10
100 ?"|"
110 Y=Y-F+!F
120 IF F LCW,Y ELSE LCX,Y
130 IF Y>0&&Y<10 GOTO100
140 IF X!=W F=!F:CLK:RTN
150 ?CHR$(244)
<操作方法>
プレイヤー1:左右キーで移動、下キーで発射
プレイヤー2:Zキー・Cキーで移動、Xキーで発射
<ルール>
攻撃側が文字コード5のキャラになる。1発打って外したら攻守交代。
【プログラム解説】
5 X=12:W=3:VIDEO3
20 K=INKEY()
30 LCX,0:?CHR$(249-244*!F) F=0のときはプレイヤー1が攻め(文字コード5のキャラになる)
40 LCW,10:?CHR$(249-244*F); F=1のときはプレイヤー2が攻め(文字コード5のキャラになる)
50 X=(X-(K=28)+(K=29))&15 &は論理積(ヨコ座標を0〜15に指定)
60 W=(W-(K=90)+(K=67))&15 &は論理積(ヨコ座標を0〜15に指定)
70 IF K=31&&!F Y=0:GSB110 F=0かつ下キーを押したら、ビームのサブルーチンへ
80 IF K=88&&F Y=10:GSB110 F=1かつXキーを押したら、ビームのサブルーチンへ
90 GOTO10
100 ?"|" ビームアニメーションのサブルーチン
110 Y=Y-F+!F プレイヤーによって変わるビームの上下方向をFで制御
120 IF F LCW,Y ELSE LC X,Y プレイヤーによって変わるビームの座標をFで分岐
130 IF Y>0&&Y<10 GOTO100 サブルーチン繰り返し条件
140 IF X!=W F=!F:CLK:RTN 当たり判定。外れたらFを0⇄1を入れ変える(攻守交代)
150 ?CHR$(244) 当たった場合、爆発キャラを表示
プログラムを少しでも短くするために、攻守フラグ用変数のFを多用しています。
<改造ポイント>
子どもたちにトーナメントをした時に、攻め側がなかなか発射しないことがありました。攻めには制限時間を設けて、画面に表示するのがいいと思います。
【実行画面】
CC BY Hana道場師範 / @shihan_hanadojo
【人気ゲーム】ver1.4でつくれる糸通し<Hana道場ver> for IchigoJam
三角関数で糸通しみたいなアニメーションできた!と投稿した去年のツイート
#IchigoJam 版「糸通し」をつくってみた!
— 初代 *Hana道場【師範】 (@shoichi1031da) December 30, 2019
ガラケー時代によくやっていたゲームです^^
ver1.4は可能性が広がりますね〜https://t.co/d7CXg8DlO7 pic.twitter.com/GerQeehSQg
その後、すぐにPCN上田の斎藤さんが三角関数なしで実装してくれました。
by Shiro SAITO
小学校でも作ったそうです↓
by taisuke fukuno
今回は、斎藤さんのプログラムを改良してつくった、Hana道場でも大人気の糸通し<Hana道場ver>を紹介していきます。
(去年にはできていましたが、ブログにするのを忘れていました...)
Hana道場でのランキング表(最高記録:35)
【Hana道場公式プログラム】ver1.4〜
10 CLV:CLS:Y=3:C=31:H=10
20 R=RND(35)+2
30 IF S>1&&S%5=0&&H>2 H=H-1
40 DRAW 62,0,62,47
50 DRAW 62,R,62,R+H,0
60 FOR X=0TO25
70 B=BTN(30)
80 V=V-B+!B
90 Z=Y+V
100 SCROLL 3
110 DRAW 7,Y,9,Z:Y=Z
120 LC 0,0:?S
130 WAIT 6
140 NEXT
150 IF R<=Y&&Y<=R+H S=S+1:GOTO20
160 IF S>PEEK(#FFF) POKE#FFF,S:SAVE FILE()
170 ?"ハイスコア";PEEK(#FFF)
<操作方法>
↑キーのみで操作します。
↑キーを押すと上昇、押さないと落下していきます。
<変数>
Y:糸の高さ(始点) Z:糸の高さ(終点)
V:糸の高さの増減
K:押したキーのコード C:次にキーが押されるまで保存するコード
R:針の穴の上端の高さ H:針の穴の大きさ
X:スクロール回数(26回スクロールすると、針穴がひとつ生成)
【プログラム解説】
10 CLV:CLS:Y=3:C=31:H=10
20 R=RND(35)+2 針穴の始点を決定
30 IF S>1&&S%5=0&&H>2 H=H-1 針穴を小さく条件を記述
40 DRAW 62,0,62,47 針穴用の直線を引く
50 DRAW 62,R,62,R+H,0 直線に針穴をあける
60 FOR X=0TO25 スクロールアニメーション開始
70 B=BTN(30) ↑キーを押したら1,押してないと0を変数Bに代入
80 V=V-B+!B 加速度的に変数Vを増減させる
90 Z=Y+V 糸の高さ
100 SCROLL 3 左スクロール
110 DRAW 7,Y,9,Z:Y=Z 糸(直線)を始点(7,Y)から終点(9,Z)に引く
120 LC 0,0:?S スコア表示
130 WAIT 6
140 NEXT
150 IF R<=Y&&Y<=R+H S=S+1:GOTO20 穴より高くても低くてもダメ(当たり判定)
160 IF S>PEEK(#FFF) POKE#FFF,S:SAVE FILE() ハイスコアの保存
170 ?"ハイスコア";PEEK(#FFF) ハイスコアの表示
数1,数2の座標から数3,数4の座標へ線を引く(座標は最大63x47)、数5に0指定で線を消し、2指定で反転する、省略時または1指定で線を引く *ver1.4以上
【ポイント①】スコアを5更新ごとに針穴を小さくする
30 IF S>1&&S%5=0&&H>2 H=H-1
Hの最小値は3
【ポイント②】ハイスコアをファイルに保存
150 IF S>PEEK(#FFF) POKE#FFF,S:SAVE FILE()
160 ?”ハイスコア”;PEEK(#FFF)
プログラム領域の最後のアドレス#FFFに書き込んでセーブ
CC BY shoichi1031da / @shoichi1031da
IchigoJamで画像保存?お絵かきゲーム&イラスト保存プログラム
実行画面はyoutubeからご確認できます。
お絵かきゲームの正規版は『アニメーションとゲームをつくりながら学ぶ Hana道場式プログラミング』by 師範 に収録されています!
【0番:お絵描きゲーム】
10 CLS:X=15:Y=12:C=1
15 K=INKEY():IF K>32 C=K:BEEP:IF C<58 C=C%48
20 LC X,Y,1
30 X=X-(X>0)*BTN(28)+(X<31)*BTN(29)
40 Y=Y-(Y>0)*BTN(30)+(Y<22)*BTN(31)
50 WAIT5
60 IF BTN(32) LC X,Y:?CHR$(C)
70 IF BTN(88) LC X,Y:?CHR$(0)
80 IF K=83 LRUN1,100
90 GOTO15
<操作方法>
・上下左右キーでカーソル移動
・スペースキーで塗る、Xキーで消す
・その他のキーでキャラ選択
・Sキーで画像保存(1番のプログラムの100行目から実行)
<解説>
15行目▶︎塗る文字を変更する用。例えばAと押すと塗る文字がAにかわり、1と押すと文字コード1の文字になります。初期値は1。変更すると音が鳴ります。
20行目▶︎LC数1,数2,数3で数1を0以外にすると、カーソルを表示できます。
(数1,数2はカーソルのX座標とY座標)
キー操作をINKEY()ではなくBTN()を使っているのは、長押ししたいからです。
例えば、スペースを長押ししながらカーソルを操作すると 連続で塗ることができます。
(Xキーで消すときも同様)
【1番:画像保存プログラム】
10 COPY#900,#D00,32*24
20 IF BTN()=0 CONT
30 LRUN 0
100 COPY#D00,#900,32*24
110 LC 0,0
120 INPUT ”SAVE”,N
130 SAVE N
<操作方法>
SAVEと画面に表示されるので、絵を保存したいファイル番号を入力。エンターを押すとセーブ完了。
実行すると絵が表示。
IchigoJamのボタンを押すと、0番のお絵描きプログラムを実行。
<解説>
100行目以降が画像保存プログラムです。
100行目▶︎メモリのプログラム領域(LIST)#D00〜#FFFに、画面領域(VRAM)#900〜#BFFをコピー
110行目▶︎カーソルの位置を0,0に
120行目▶︎画像の保存先を指定
130行目▶︎指定先に保存
10,20,30行目が画像表示プログラムです。
10行目▶︎メモリのVRAM領域に#900〜#BFFに、メモリのプログラム領域#D00〜#FFFをコピー
20,30行目▶︎IchigoJamのボタンを押すと、お絵描き開始。それ以外は画像表示
<その他>
外部メモリを使えば何枚でも保存できますね!
CC BY shoichi1031da / @shoichi1031da