Hana道場【師範】のブログ

IchigoJamの徹底解説ブログ

【IchigoJam × Ambient】センサーの値、ゲームのスコアをグラフ化!IchigoJamでIoT入門【NT鯖江2020】

f:id:hanadojo_sihan:20201004204657j:plain

IchigoJamをインターネットにつなげて川下りゲームのスコアをグラフ化!

 

NT鯖江2020にHana道場として出展しました!(10/3-4)

※NTとは「なにか・つくろう」の略

Hana道場ブースはIchigoJamとドローンのみ置いてあるだけだったので、SNT(その場で・なにか・つくろう)しました。出展中でもなにかつくる!

<今回SNTしたもの>

  1. GPS付きIoTプロダクト基板づくり
  2. 距離センサーで店番ドローン
  3. インターネットにつながった川下りゲーム

 

3の川下りゲームのスコアがグラフ化されるプログラムを解説していきます!

川下りゲーム自体の解説は、こちらでしています↓↓

hanadojo-sihan.hatenablog.com

 

【目次】

 

1.必要なもの

Ambientはマイコンから送信されたデータを蓄積・グラフ化するIoT可視化サービスです。アカウントとチャネルは無料で作れるので、IchigoJamとMixJuice(+WiFi環境)があればお金は掛かりません!(2020年10月現在)

 

2.プログラム概要

ファイル0番:川下りゲーム本体

ファイル1番:スコア送信

※1つのファイルにまとめてもらってもOK

※値送信→グラフ化のテストだけしたい方はファイル1番のみでOK

 

【ファイル0番:川下りゲーム本体】

5 CLS:VIDEO3:WAIT60
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
0番にセーブしましょう。
グレーの部分はハイスコア保存部分です。不要な方は入れなくてOK!
NT鯖江の間での最高記録は117秒!ぜひ挑戦してみてください。
 

【ファイル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

Ambientの「チャネル一覧」からグラフ化したいチャネルのIDとライトキーをプログラムに追記すればプログラム完成です!1番に保存しましょう。

f:id:hanadojo_sihan:20201004223202p:plainそもそもMixJuiceの使い方(接続方法、ネットワークにつなぎ方など)が分からない方は下記サイトからご確認ください。

 

3.Ambientの使い方

川下りゲームのスコアをグラフ化するために、Ambientで設定をしていきましょう。

  1. 「チャネル一覧」からチャネルを選択(クリック)
  2. 画面上部の「グラフ+」のアイコンをクリックし「チャネル/データ設定」をクリック
  3. 「チャート設定」から下記画像のように入力

f:id:hanadojo_sihan:20201004230317p:plain

参考:Ambientを使ってみる – Ambient

 
公開チャネルに設定すると誰でもグラフを見ることができるようになります。 
「チャネル一覧」→「設定変更」→「公開チャネル」にチェック
※チャネルを公開するにはユーザー名を設定する必要があるようです。
 
これで完成!!(プログラムの仕組みが気になる方は4へ)
IchigoJamから送信してからグラフに反映されるのに15秒ほど掛かります。
 
CSV形式でダウンロードもできます!
「チャネル一覧」→「ダウンロード」
センサーと組み合わせて、気温や湿度などのグラフ化にも挑戦してみてください!
 
人感センサー(超音波センサー)と組み合わせた例↓↓

 

4.プログラム解説

【ファイル0番:川下りゲーム本体】

5 CLS:VIDEO3:WAIT60 ビデオ画面を2倍サイズにして1秒まつ
6 K=INKEY():IF K!=10 LC 0,5:?"エンター デ スタート":?"ハイスコア";PEEK(#FFF):CONT
エンターを押すまで待機。ハイスコア(メモリ#FFFに保存してある値)を表示
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
スコアがハイスコア(メモリ#FFFに保存してある値)より大きかったらサブルーチン@HSを呼び出す。大きくなかったらスコアを表示
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)へもどる

ハイスコアの保存以外は普通の川下りゲームとほとんど変わりませんが、敵が経過時間です!

 

ハイスコアの保存プログラムを入れると、電源を切ったとしてもハイスコアごと保存されます(メモリのプログラム領域#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行目と同じように、?で書くとこのようになります。

40 ? "{"writeKey":"ライトキー","d1":"#"}"

JSON形式では、キー名と値(文字列の場合)は""で囲む必要があるので、

?命令の""の中にさらに"を書くことになります。

?"""
Syntax error 

(例1 errorの原因は、?""で完結しているのにその後ろにさらに"があるから)

40 ? "{"writeKey":"ライトキー","d1":"#"}"
{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入門として良い教材かも!?

 

<やってみよう>

  1. d1だけでなくd2,d3の値も送信してみよう!
  2. センサーと組み合わせてIoTを作ってみよう!

 

質問やご指摘はTwitterからお願いします。

CC BY shoichi1031da / @shoichi1031da

twitter.com

<参考リンク>

IchigoJam + MixJuiceで製作するIoTセンサ

Ambientを使ってみる – Ambient

準備・使い方 - イチゴジャム レシピ

メモリマップ - イチゴジャム レシピ

JSONの形式を完全理解して読み書きできるようになるための記事 | 侍エンジニア塾ブログ(Samurai Blog) - プログラミング入門者向けサイト

初心に返って王道「川下りゲーム」徹底解説!!for IchigoJam【「寺子屋Hana」開所記念】

f:id:hanadojo_sihan:20200928212731j:plain

Hana道場の横展開としてSAPジャパンが支援し寺子屋Hana福島県会津若松に設立しました!!2020.9.26

Hana道場公式ブログに詳細あり

 

また9月26日は私、師範の誕生日でもあり、私がIchigoJamでプログラミングを始めてちょうど3年が経ちました!

とてもアニバーサリーな日なので、初心に返って王道プログラム「川下りゲーム」を徹底解説していこうと思います。

新たに子どもたちにIchigoJamプログラミングを教えたい人の一助になれば幸いです。

 

【目次】

 

1. 川下りゲームについて

川下りゲームはIchigoJamでプログラミングを始める人が最初に作る入門的プログラムです。とても短いプログラムの中に、アプリ(ゲーム)作りで大切な要素が詰まっており、1行づつ打ち込んで実行しながらゲームが出来上がっていく過程を体験できます。

鯖江市の小学校の総合学習の授業でも川下りゲームをつくります)

fukuno.jig.jp

 

2. プログラム概要

【プログラム】

10 CLS:X=15
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
(CC BY 福野泰介)
 
【日本語訳付きプログラム】
<初期設定>
10 CLS:X=15 画面を消す:変数Xに15を記憶させる
<自分のキャラ表示>
20 LC X,5:?"0" 横にX,縦に5の位置に:0 を表示
<敵のキャラ表示>
30 LC RND(32),23:?"*" 横に0〜31の中からランダム,縦に23の位置に:* を表示
<スピード調整>
35 WAIT 3 3(1/20秒)まつ
<キャラの移動操作>
36 X=X-BTN(28)+BTN(29) 自キャラを←キーを押すと左に、→キーを押すと右に移動
<当たり判定>
39 IF SCR(X,5) END もし 自キャラの位置に何かあったら プログラム終了
<繰り返し>
40 GOTO 20 20行目にいく
 
このように、各行で何をしているか理解できたらとりあえずOK!
ちゃんと川下りゲームのプログラムを理解したい方は続きをご覧ください。
 

3. 実行結果と解説(1行づつ)

<初期設定>10行目
10 CLS:X=15 画面を消す:変数Xに15を記憶させる

CLS 画面を消す(ショートカットキーはF1) <クリア・スクリーン>
変数 = 数 変数に数を記憶させる <イコール>
: 命令と命令を連結させる(左から順番に実行) <コロン>
CLS で画面を消します。:で続けて
X=15 で変数Xに15を記憶させます。
 
?X で変数Xを画面に表示すると15を記憶していることがわかります。
 
<自分のキャラ表示>20行目
20 LC X,5:?"0" 横にX,縦に5の位置に:0 を表示

LOCATE ヨコ,タテ 表示する位置を決める(省略形:LC) <ロケート>
PRINT 文字列や数 画面に文字列や数を表示する(省略形:?) <プリント>
 左上から横にX,縦に5の位置に、自分のキャラ「0」を表示します。

f:id:hanadojo_sihan:20200928230038p:plain

IchigoJamの画面は左上が0,0で、右方向に31、下方向に23まで座標があります。
変数Xには10行目で15を記憶させているので、横に15,縦に5の位置に表示されます。
 
<敵のキャラ表示>30行目
30 LC RND(32),23:?"*" 横に0〜31の中からランダム,縦に23の位置に:* を表示

RND(数) 0〜数-1の中からランダムに1つ数を返す <ランダム>
横に0〜31のどれかランダム,縦に23の位置に、敵のキャラ「*」を表示します。

f:id:hanadojo_sihan:20200928230953p:plain

RND(32) は0〜31の32個から1つランダムに返します。
F5(RUNのショートカット)キーを連打すると、横はランダムに、縦は23固定で敵キャラが表示されます。
 
<繰り返し>40行目
40 GOTO 20 20行目にいく

 

 

35〜39行目を飛ばして、40行目の繰り返しを入力し実行します。

*が上方向に高速スクロールしていく様子に、子どもたちは驚き、喜びます!
コンピューターの計算速度を肌で実感してもらうためにあえて40行目を先に入力しています。
 
なぜ、上スクロールするのか解説します。
 
画面に表示するPRINT(省略形:?)命令は、表示した後に「改行」をしています。
敵キャラ*を画面一番下の23の位置に表示して「改行」しています。
画面一番下で改行すると、IchigoJamの仕様上、画面全体を1つ上にスクロールします。

 

↑の改行デモの前半では、手動で*を打ってエンターを押しています。

後半では、川下りゲームのアニメーションをWAIT60にして1秒おきに*を表示しています。画面一番下に*を表示して改行されて上にスクロールしていくのがわかりますね。 
 
結論:画面の一番下に表示を繰り返すことで、改行によって画面全体が上にスクロールする
 
自分のキャラ「0」も上に上がるので、5個連なっているような表示になります。
 
<スピード調整>35行目
35 WAIT 3 3(1/20秒)まつ

 

WAITを入れることで、*を表示する間隔が長くなります。

コンピューターの速度は人間には速すぎるので、WAITで待ってもらいましょうねと言っています。

 

<キャラの移動操作>36行目
36 X=X-BTN(28)+BTN(29) 自キャラを←キーを押すと左に、→キーを押すと右に移動

BTN(数) 数でキーを指定し、指定されたキーを押すと1、それ以外で0を返す <ボタン>

キーボードのキーにはそれぞれ番号が決まっています。

←キーは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行目
39 IF SCR(X,5) END もし 自キャラの位置に何かあったら プログラム終了

SCR(ヨコ,タテ) 指定した位置にある文字の番号を返す <スクリーン>
SCR(X,5) は自分のキャラの位置に何の文字があるか調べます。
何もない時は0を返します。
(ちなみに敵キャラ*の番号は42番です。番号表はこちら
IF 数 命令 数が0以外の時、命令を実行(数が0の時は、何もせず次の行へいく) <イフ>
39行目を入れることで、
もし SCR(X,5)が何か数を返したら プログラムを終了
→ もし 自分のキャラの位置に何か文字があったら プログラムを終了 
 
当たり判定をつけて、ゲームが完成しました!!
 

4. バグについて

バグの理由

実は、この状態だとバグがあります。

何人かの子どもたちはバグを見つけてニヤニヤしていることでしょう。

 

左右の端にいくと敵に当たらない<無敵バグ>が起こります。

 

なぜ<無敵バグ>が起こるのか、解説します。

結論:自分のキャラが画面外にいってしまっているから。

f:id:hanadojo_sihan:20200929000434j:plain

f:id:hanadojo_sihan:20200929000440j:plain

画面左端は0ですが、さらに←キーを押すとXがマイナスの値になります。

画面上には0の位置にいるように表示されますが、実際の座標はマイナスになっており、0〜31に表示される*には永遠に当たらなくなります。

(右端も同じように31にいるように表示されていても実際は32以上になっています)

 

バグを解消しよう! 

プログラムの穴(バグ)をついて、不正しているプレイヤーを「チーター」と言います。子どもたちは大体チーターという言葉を知っていて、なぜか喜びます。

チーター対策としてバグを直すのもプログラマーの仕事だよと言いながら、バグ修正のプログラムを教えます。

短いバージョンと長いバージョンの2つご紹介します。どちらも同じ動きになります。

 

短いプログラム

37 X=X&31
短いですが、理解するのは少し難しいです。&のリファレンス
また別の機会に解説しようと思います。
 

長いプログラム

37 IF X<0 X=31
38 IF X>31 X=0
2行必要になりますが、意味はわかりやすいです。
37 IF X<0 X=31 もし Xが0より小さくなったら Xに31を記憶させる
38 IF X>31 X=0 もし Xが31より大きくなったら Xに0を記憶させる
 
↓実行画面↓ 両端に行ってみましょう、どうなる?
 
無敵バグを直したがらない子どもも出てきます。
そういう時は「ワープ機能をつけよう」と言って37行目以降を入力してもらいましょう(嘘はついていません笑)
 
これで、川下りゲームの完成です!!
全員立ってもらって、同時にF5で実行し、敵に当たったら座っていくゲーム大会をすると盛り上がりますよ!!
 

5. まとめ

1つでもプログラムの原理を理解すると、他にも応用が効くようになっていきます。

あとは自分でも改造、実験(仮説と実装の繰り返し)をしながら、遊びつつ学んでいきましょう!

仮説を即実装できるのがIchigoJamの良いところ!何度間違えてもコンピューターは怒りません。

 

川下りゲームのおすすめの改造方法は別の記事で紹介しようと思います。

 

<やってみよう>

  1. 自分のキャラを変える
  2. 敵のキャラを変える
  3. スピードをゆっくりにする
  4. CLTとTICK()を使ってタイムを表示

 

CC BY shoichi1031da / @shoichi1031da

twitter.com

Twitterのフォローもよろしくお願いします^^

【文字列の代入】『お絵かきゲームのお題生成プログラム』 for IchigoJam

f:id:hanadojo_sihan:20200908011242j:plain

 

お絵かきゲームのお題を生成するプログラムを紹介します。

イベントなどで自由にIchigoJamで遊んでもらうときに便利です。

f:id:hanadojo_sihan:20200908011826j:plain

↑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 終了のベル

STR$(数1{,数2})  PRINT内で、文字列を返す(数2(省略可)で長さ指定) 

数1の部分に文字列を代入した変数を入れましょう。

 

変数や配列に代入した文字列の表示は、下のようにします。

10 [0]="リンゴ" 文字列の代入
20 ?STR$([0]) 代入した文字列の表示
RUN
リンゴ

配列は[0]〜[101]まであるので、お題(文字列)を102個保存可能!! 

 

<やってみよう>

  1. お題の追加(10行目)
  2. 制限時間の変更(5行目)
  3. 1つ目のお題終了後、次のお題が表示されるようにする
  4. 同じお題が表示されないようにする

Hana道場4周年の時は、<やってみよう>の4までできたプログラムで行いました。

チャレンジしてみてください!

 

<追記>2020/9/23

複数人で行う「プログラミングお絵かきバトル」が白熱!!

プログラミング能力とデザインセンスが試される!?

 

3分の中でならお絵かきプログラムを書き換えOK!

必要な機能を実装しながらお絵かきを楽しもう✨

 

CC BY shoichi1031da / @shoichi1031da

twitter.com

【POKEでキャラ作成】みんなでワイワイ『視力検査ゲーム』 for IchigoJam / めがねのまち 鯖江

f:id:hanadojo_sihan:20200829131053j:plain

IchigoJamの生まれた地「めがねのまち 鯖江

目の健康にも力を入れて発信しています。

www.youtube.com

www.asahi.com

 

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

実行画面(IchigoJam web)

 

<遊び方>

2人でプレイヤー側と審判側に分かれて遊びます。

審判は、表示された方向とプレイヤーの言った方向が合っていればEnter、間違っていればBackSpaceを押します。

3回連続で間違うとゲームオーバー。スコア(視力)が表示されます。

 

<解説>

V:画面サイズ C:方向を示す文字のコード

Z:表示する位置を画面サイズによって調整する

X:方向を示す文字のヨコ座標 Y:方向を示す文字のタテ座標

M:ミスした回数 S:スコア(視力)

5 CLV:CLP:V=7 画面サイズの初期設定はVIDEO 7

6 COPY 233*8,232*8,8*3 ○の文字(232番)を233,234,235番に3つ分コピー

10 POKE 232*8,0 文字コード232の文字を、↑方向文字に書き換え

11 POKE 233*8+7,0 文字コード233の文字を、↓方向文字に書き換え

12 POKE 234*8+2,67,1,1,67 文字コード234の文字を、←方向文字に書き換え

13 POKE 235*8+2,194,128,128,194 文字コード235の文字を、→方向文字に書き換え 

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個分にコピーします。

COPY コピー先,コピー元,アドレス数

10〜13行目でコピーした○文字を、↑↓←→方向に穴を空けていきます。

例えば、10行目だと○文字の一番上の部分(アドレス:232*8)を0に書き換えることで、○の上方向に穴の開いた文字になります。

POKE アドレス,値 {,値,値,...}

文字コード224〜255の文字はPCGといって、POKEで書き換え可能な文字です。

 

文字コード232の初期状態】

f:id:hanadojo_sihan:20200829145414j:plain

POKE 232*8,0 を実行すると

f:id:hanadojo_sihan:20200829145409j:plain


↑方向の文字ができました!

?CHR$(232) を実行して書き換わっているか確認しましょう。

f:id:hanadojo_sihan:20200829152053p:plain

あとは同じように、

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つ決定

 

実行画面(IchigoJam web)

合計で8個の文字(232〜239番)をつくりましたね。

前方向ということで○をそのまま使うのもありかも?w

これを期にPOKEによるキャラクターづくりをマスターしましょう!

CC BY shoichi1031da / @shoichi1031da

twitter.com

【人気ゲーム】『プロ飛行士をめざせ!!』for IchigoJam / 『プログラミング教育マスター』がドランクドラゴンさんの番組で紹介

お久しぶりです、Hana道場師範です。

 僕も作成に協力させていただいた『プログラミング教育マスター』ドランクドラゴンさんの番組で紹介されました。

youtu.be

『プログラミング教育マスター』を手掛けた株式会社リオの浅田さんのFacebookでこんな嬉しい投稿を!

僕のブログIchigoJamで画像保存?お絵かきゲーム&イラスト保存プログラムを参考に、ねばーる君をつくってくれました。

活用してくれる方がいるということで、ブログを再開しようと思います。

f:id:hanadojo_sihan:20200828195456j:plain

Hana道場で人気のアクションゲーム『プロ飛行士をめざせ』

改造の余地も大きくとてもおすすめのプログラムです。

こちらの本でも収録されています。

『アニメーションとゲームをつくりながら学ぶ Hana道場式プログラミング』by 師範

 

【プログラム】

5 CLS:CLV:C=30
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:ヘリの自動移動用

5 CLS:CLV:C=30 ↑移動から開始(↑キーは30番)
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行目へ

 

<改造方法>

  1. 穴を広げる 
    40 LC X,Y:?CHR$(1-(Y=Z)-(Y=Z+1))
  2. クラッシュ演出をつける
    150 LC W,Z:?CHR$(244):BEEP50,80
  3. クリアしたら次のステージへ
    135 IF W=25 W=0:C=0:GOTO10
  4. 壁を増やす
    10 FOR X=10 TO        
  5. ステージ数を追加
  6. ステージをクリアする毎にスピードアップ
  7. 最終ステージ(第5ステージ)の演出

4〜7は自分でやってみて下さい!

『アニメーションとゲームをつくりながら学ぶ Hana道場式プログラミング』by 師範

に5〜7のプログラムが載っていますので、知りたい方はぜひお買い求めください^^

IF文や文字コードなども学ぶことができます!

CC BY shoichi1031da / @shoichi1031da

twitter.com

【VRAM書き換え】たった4行の『○○をさがせ!!ゲーム』for IchigoJam

f:id:hanadojo_sihan:20200203232052j:plain

たった4行のお手軽ゲームです。

一つだけ違うキャラを見つけたら指を指します。

一つの画面でみんなでやると楽しいです。

 

【プログラム】

10 POKE#900,249
20 COPY#901,#900,32*24-1
30 POKE RND(32*24)+#900,250
40 CONT

f:id:hanadojo_sihan:20200203232038j:plain

f:id:hanadojo_sihan:20200203232045j:plain



【改造プログラム】

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

twitter.com

【メモリの読み書きコピー】スネークゲーム風プログラム for IchigoJam

f:id:hanadojo_sihan:20200202173332j:plain

実行画面は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

f:id:hanadojo_sihan:20200202175546j:plain

30 COPY#920,#900,32*21

f:id:hanadojo_sihan:20200202175542j:plain

40 COPY#901,#900,31

f:id:hanadojo_sihan:20200202175534j:plain

50 COPY#BA1,#BA0,31

f:id:hanadojo_sihan:20200202175526j:plain

// いちごの出現位置をランダムに決定。いちごの出現位置になにかあればやりなおし
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

 

【ポイント】

  1. VRAMに直接書き込めば、処理も早くなり、変数もひとつ(今回でいう変数X)で済むようになります。
  2. 90行目がこのプログラムの最重要ポイント。猫の先頭の座標Xを配列に保存し、文字コード0で残像を消す作業をしています。たとえば、猫が3匹(S=3)のとき配列は[0]〜[2]の3つを使い回すことになります。

f:id:hanadojo_sihan:20200202190800j:plain

f:id:hanadojo_sihan:20200202191131j:plain



f:id:hanadojo_sihan:20200202190742j:plain

理屈的には↑のように増えていっています。

なので、配列は102個あるので102匹まで猫を増やすことができるはず!

 

メモリの読み書きコピーを使った時短術と、配列の節約術のご紹介でした!

CC BY shoichi1031da / @shoichi1031da

twitter.com

【人気ゲーム】2人対戦シューティングゲームでゲーム大会!? for IchigoJam

f:id:hanadojo_sihan:20200202002552j:plain


プロジェクターで画面を映し出して、トーナメント形式でシューティングゲーム大会をした様子はこちら↓

大盛り上がり!

 当時のプログラムはこちら↓

 

子どもたちから、攻守がどちらかわかりやすくして欲しいと要望を受けたので、改良版をつくりました。

 

【改良版プログラム】

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を多用しています。

 

<改造ポイント>

子どもたちにトーナメントをした時に、攻め側がなかなか発射しないことがありました。攻めには制限時間を設けて、画面に表示するのがいいと思います。

 

 【実行画面】

fukuno.jig.jp

 

CC BY Hana道場師範 / @shihan_hanadojo

【人気ゲーム】ver1.4でつくれる糸通し<Hana道場ver> for IchigoJam

f:id:hanadojo_sihan:20200125162027j:plain

 

三角関数糸通しみたいなアニメーションできた!と投稿した去年のツイート

 その後、すぐにPCN上田の斎藤さんが三角関数なしで実装してくれました。

十勇士パソコンクラブ - 糸通しゲーム

by Shiro SAITO

 

小学校でも作ったそうです↓

準備簡単、すぐ楽しい!初のIchigoDyhook、総合2コマ、鯖江のプログラミング教育の授業動画とスライド公開とIchigoJam新人気ゲーム紹介 - 鯖江東小学校小5/小6 #KidsIT #IchigoJam #sabae / 福野泰介の一日一創 / Create every day by Taisuke Fukuno

by  taisuke fukuno 

 

今回は、斎藤さんのプログラムを改良してつくった、Hana道場でも大人気の糸通し<Hana道場ver>を紹介していきます。

(去年にはできていましたが、ブログにするのを忘れていました...)

f:id:hanadojo_sihan:20201006151035j:plain

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) ハイスコアの表示

DRAW 数1,数2{,数3,数4}{,数5} 
数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

twitter.com

IchigoJamで画像保存?お絵かきゲーム&イラスト保存プログラム

f:id:hanadojo_sihan:20200125153559j:plain

実行画面はyoutubeからご確認できます。

youtu.be

 

お絵かきゲームの正規版は『アニメーションとゲームをつくりながら学ぶ 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

twitter.com