福野泰介の一日一創

JavaScriptでオリジナルゲームをウェブアプリとして作って、自分のスマホで動かす体験！ES-Jamを使ってサクッと全員作成できた！

ウェブアプリの基本、HTML（エイチ・ティー・エム・エル）を使ってウェブサイトづくり体験。

HTMLにJavaScriptを加えればウェブアプリ！JavaScriptというプログラミング言語は、1行加えるだけで世界中のライブラリを活用可能になること。

作ったアプリを楽しく見せあってもらいました。

「プログラミングの楽しさを知っていますか？」
人気の日本のステキ風景に加えて、OpenAIの画像生成AI、DALL-Eを使った画像生成機能を追加！ オリジナルゲームづくりの幅がぐっと広がりました。（以前作ったtxt2imgを使ったサービスimg-makerを作成してデプロイしています）

「ランダムな画像」
await bg("ランダムな画像"); で、表示されるステキ画像！
しばらく、無保証、無償で運用します。

「ARさばやき」

鯖江商工会議所、SCCに月火に出店している「Nihiki TEA TO GO」て購入した、くるみが美味しいサバの形をしたたいやき風、鯖江の新名物「さばやき」を3Dスキャンし、オープンソースな3Dツール、Blenderで加工！

かわいいメガネ焼きも別途切り出して保存！

スキャンした片面をモディファイアのミラーで反転させてマージし、メガネを合体！

3Dプリンタ用にSTLデータも合わせて公開！
出力してみるのが楽しみです！

links
- さばやき Nihiki TEA TO GO(@nihiki_teatime) • Instagram写真と動画

会場は、江戸川区の子ども未来館。はんだづけ、プログラミング、電子工作まで、たっぷり楽しんでくれました！

「オルゴール風作曲プログラム on IchigoJam web」
今回のワークショップのテーマ、オルゴールに触発されて作ってみました、オルゴール風作曲プログラム！カーソル上下で動かし、スペースキーで音を配置し、エンターキーでループ再生します。何かキーを押したら作曲モードに戻ります。

プログラムは1画面に収まる手頃な長さ。

10 S=">C'>D'>E'>F'>G'>A'>B'C''D''E''F''G''A''B''<C'<D'<E'<F'<G'<A'<B'" 20 CLS:FORI=0TO41:?"････････････････";:NEXT 25 FORI=0TO31:IF[I]LCI,[I]-1:?CHR$(238);:NEXT ELSE NEXT 30 LCX,Y,1:K=INKEY() 35 X=X-(K=28)*(X>0)+(K=29)*(X<31):Y=Y-(K=30)*(Y>0)+(K=31)*(Y<20) 36 IF K=32 IF SCR()=238 ?"･";:[X]=0 ELSE ?CHR$(238);:LCX,[X]-1:?"･";:[X]=Y+1:PLAY S+(20-Y)*3:TEMPO1000 37 IF K=10 GSB50 40 GOTO30 50 X=0 51 IF[X]LCX,[X]-1:PLAYS+(20-[X]+1)*3 52 X=(X+1)&31:IF INKEY() RTN 60 WAIT20:GOTO51

文字列Sを3文字単位で21コに区切って、音の高さに合わせてPLAY文で鳴らしています。配列の0から31を使って高さを記憶。一度止めても配列に合わせて復元する機能付き（25行）
まるでハンダ！ツマグロヒョウモンのさなぎ！

日本での発見例がたった3例という超激レア、ワタゲクラゲの動体展示！
（参考、超激レアの「ワタゲクラゲ」が江戸川放水路にいた！　直径15ミリ、児童施設職員が網ですくって発見：東京新聞 TOKYO Web）

発泡スチロールと結束バンドと手頃な材料でとってもリアル、手作り昆虫お面！

なんと、ダンボールで組み立て＆持ち運び自在の手作りプラネタリウム！

惑星の位置関係が分かる、地球暦も飾ってありました！
（参考、太陽系時空間地図 地球暦 HELIO COMPASS）

宇宙、生物、工作、法学、プログラミングも！
東京都江戸川区、なんともステキな環境です！

今回は雰囲気から入ろうとドット絵で、ぐー、ちょき、ぱーを作成。

10 POKE#700,0,0,0,124,170,129,66,60 20 POKE#708,108,84,84,84,130,129,66,60 30 POKE#710,60,34,225,161,129,129,66,60 40 ?CHR$(224),CHR$(225),CHR$(226)

表示してみました。なかなかかわいくできました。8x8のドット絵、下3行、129,66,60は全部共通です。

まずはシンプルにジャンケンゲームにします。作成したパターンに続けます。

40 INPUT"JANKEN(0-2)?",Y 50 C=RND(3) 60 ?"PON! YOU:";CHR$(224+Y),"COM:";CHR$(224+C) 70 IF Y=C INPUT"AIKODE(0-2)?",Y:GOTO50 80 IF (Y-C+3)%3=2 ?"WON!" ELSE ?"LOST..."

0、1、2でジャンケンの手を決めて勝負！

続いて、所持コインを10枚から初めて、買ったら倍になるゲームに改造してみます。

35 M=10 36 ?:?"COIN:";M 37 INPUT"BET?",N:IF N=0 OR N>M CONT ELSE M=M-N 80 IF (Y-C+3)%3=2 ?"WON!":M=M+N*2 ELSE ?"LOST..." 90 IF M=0 ?"GAMEOVER":END ELSE GOTO 36

変数Mが所持コイン数。80行の勝ったとき処理がポイントです！

懐かしい！音声合成ボードを加えて、しゃべるような改造も良いですね！

更に続いて、買ったら、フィーバーモードになって、0倍から3倍にランダムになるゲームに改造！

80 IF (Y-C+3)%3=2 ?"WON!":GSB100 ELSE ?"LOST..." 100 ?"FEVER! ...";:WAIT30 110 R=RND(4):?R 120 ?N*R;" COIN GET!":M=M+N*R 130 RTN

ややこしい処理を追加するときには、GOSOB(ゴーサブ、短縮形GSB)/RETURN(リターン、短縮形RTN)が便利です。

今回はプログラムでズルをしていません。どうすると楽しくなるか、いろいろ試行錯誤してみるのも楽しいですよ！

じゃんけんゲーム、全プログラム

10 POKE#700,0,0,0,124,170,129,66,60 20 POKE#708,108,84,84,84,130,129,66,60 30 POKE#710,60,34,225,161,129,129,66,60 35 M=10 36 ?:?"COIN:";M 37 INPUT"BET?",N:IF N=0 OR N>M CONT ELSE M=M-N 40 INPUT"JANKEN(0-2)?",Y 50 C=RND(3) 60 ?"PON! YOU:";CHR$(224+Y),"COM:";CHR$(224+C) 70 IF Y=C INPUT"AIKODE(0-2)?",Y:GOTO50 80 IF (Y-C+3)%3=2 ?"WON!":GSB100 ELSE ?"LOST..." 90 IF M=0 ?"GAMEOVER":END ELSE GOTO 36 100 ?"FEVER! ...";:WAIT30 110 R=RND(4):?R 120 ?N*R;" COIN GET!":M=M+N*R 130 RTN