2024-10-16

福井県立武生商工高校工業キャンパス2年生向け、ミニITブートキャンプのDay2のテーマは、ウェブアプリづくり!(参考、Day1、進化する鯖江モデル、武生商工高校でのミニITブートキャンプと教材研究会


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


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


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


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


「プログラミングの楽しさを知っていますか?」

人気の日本のステキ風景に加えて、OpenAIの画像生成AI、DALL-Eを使った画像生成機能を追加! オリジナルゲームづくりの幅がぐっと広がりました。(以前作ったtxt2imgを使ったサービスimg-makerを作成してデプロイしています)


「ランダムな画像」

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

2024-10-15

「ARさばやき」
src on GitHub
AR水族館をベースに、ARさばやき水族館ができました。


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


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


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


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

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

2024-10-14

東京都の企画でこども電子工作&プログラミングIchigoJamイベント!
(参考、江戸川区|とうきょうこどもクリエイティブラボ「IchigoJam」でオルゴールをつくる! 江戸川区 子ども未来館


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


「オルゴール風作曲プログラム 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

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

2024-10-13
こどもの頃の思い出。お買い物について行く楽しみ、ゲームコーナーのメダルゲーム。メダルを入れて「ジャンケン」「ポン」「フィーバー」としゃべるゲームが好きでした。


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

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

Tweet
クリエイティブ・コモンズ・ライセンス
本ブログの記事や写真は「Creative Commons — CC BY 4.0」の下に提供します。記事内で紹介するプログラムや作品は、それぞれに記載されたライセンスを参照ください。
CC BY / @taisukef / アイコン画像 / プロフィール画像 / 「一日一創」画像 / RSS