感動的に短いテトロミノ落ち物パズルゲームの知恵、IchigoJamでのゲームづくりに応用してみましょう。

まずは、下記JavaScriptで作られたテトロミノを生成部をIchigoJam BASICの配列を使って再現してみます。 B=[[-7,-20,6,h=17,-9,3,3][t=++t%7]-4,0,1,t-6?-A:2] IchigoJam BASICで書くとこんな感じです

10 W=32:LET[4],-W+1,-W*2,2,W+1,-W-1,-1,-1 20 T=0 30 LET[0],0,1,[4+T],(2+W)*(T=6)-W 40 CLS:FORI=0TO3:POKE#A2C+[I],1:NEXT 50 WAIT30 60 T=(T+1)%7:GOTO30

全7パターンのテトロミノが表示できました!(RUN on IchigoJam web)

使いやすいようにサブルーチンとしてまとめます

100 @INIT 110 W=32:LET[4],-W+1,-W*2,2,W+1,-W-1,-1,-1:RTN 120 @SET:'T 130 LET[0],0,1,[4+T],(2+W)*(T=6)-W:RTN 140 @PUT:'X,Y 150 FORI=0TO3:POKE#900+X+Y*W+[I],T%4+1:NEXT:RTN

このサブルーチンを使った単純表示するプログラムはこちら

10 CLS:GSB@INIT 20 T=0:X=15:Y=10 30 GSB@SET:CLS:GSB@PUT:WAIT30 40 T=(T+1)%7:GOTO30

回転する機能を追加します(2つの条件処理がいまいちですが・・・)

160 @ROT 170 FORI=0TO3:A=[I]%W:A=A+2*A*(A>15):[I]=A*W-[I]/W 180 IF[I]=-992[I]=33 190 IF[I]=2976[I]=-33 200 NEXT:RTN

回転を加えた表示プログラム差分

30 GSB@SET:FORR=0TO3:CLS:GSB@PUT:WAIT30:GSB@ROT:NEXT

何か作れそうな気がしてきましたね!

ひとまずテトロミノをランダム表示するスクリーンセイバーを作ってみました。

10 CLS:GSB@INIT 20 T=0:GSB@SET 30 X=RND(28)+2:Y=RND(19)+2:GSB@PUT 40 IF RND(4) T=(T+1)%7:GSB@SET ELSE GSB@ROT 50 GOTO30


重なり判定があればパズルゲームなどにできそうですね!
腕だめしに実装してみましょう!

数学的美しさを感じる弾幕シューティングゲーム。 「crisp-game-lib」の作者、ABAさんによる、弾幕を記述するXML「BulletML」と弾幕オープンデータ「弾幕やさん」を発見。

JavaScript実装である「bulletml.js」をESモジュール化した「bulletml.js-es」を作って、 ABA Gamesさんのオープンソースからシューティングゲームっぽい「smilyangry」を改造してドラッグで動く版「smilyangry-d」を作って、 弾幕やさんのデータ一覧をCSV化して、CORS対応のGitHub Pagesに「danmakuya」として設置して、下ごしらえ完了。

これらを使って作った、弾幕シューティングゲーム風、15秒でたくさんスマイルを集めようゲームがこちら。

smily15s」(src on GitHub)
弾幕データにはうまく動かないものが混ざっているため、ひとまずいくつかピックアップして使用しています。

レトロ調だけど多数のオブジェクトがあっても処理落ちせず滑らか動く様子を伝えるのに動画化は必須ですね。 「gif-capture-canvas」が使われていたところを、似たインターフェイスでmp4で記録できる「mp4-capture-canvas」を作成。

TypeScriptと外部モジュールで開発されているcrisp-game-libを、ESモジュール化するにあたって、外部モジュールのESモジュール化。 元ソースを少し調整し、TypeScriptからJavaScriptへの変換とimportのマッピングの変更を行うスクリプト「makees.sh」を作成。 HTML内にimport文ひとつですっきり記述できるようになりました。
→「crisp-game-lib ES module ver.


新しいサンプル「tilted-easy (forked from tilted)」を合わせてご覧ください。
もっとシンプルなものがよければ「kawakudari」をどうぞ。

開発者のABAさんもMSX出身と判明!
個人サイトをリニューアルして自作ゲーム一覧を作ったら250個くらいあった - ABAの日誌

ESモジュールというシンプルでグローバルな抽象化、便利ですね!
いろいろ作りたい高専生や学生向け、jigインターンもエントリー受付中!

ゲームの好みは人それぞれ。グラフィックがシンプルでゲーム性で攻める方法が好きです。

IchigoJam BASIC で、人気のかわくだりゲームをシンプルでかわいいゲームフレームワーク「crisp-game-lib」を使って作ってみました。

kawakudari」(src on GitHub)
crisp-game-libには、いい感じのドット絵フォントがプリセットされていて、設定1つでかわいいBGMが付き、命令1つでBGMのリズムに自然に合わせてクオンタイズして鳴る効果音、PCからスマホまで入出力もいい感じに対応済み。

HTML内にJavaScriptのESモジュール表記する形で実装したので、何もインストールしなくても、HTMLを編集するだけでゲームづくりが楽しめます!メインのコードはこんな感じ。IchigoJam BASICの経験者や、プログラミング初級者の人でも比較的チャレンジしやすそう。

let y = 20; let x = 50; const enemy = []; const dhit = 3; window.update = () => { // canvas size 100x100 if (!ticks) { // init enemy.length = 0; } if (input.isJustPressed) { play("select"); } if (input.isPressed) { x++; } else { x--; } x = (x + 100) % 100; text("O", x, y); enemy.forEach(e => { text("*", e.x, e.y); e.y--; if (Math.abs(e.y - y) < dhit && Math.abs(e.x - x) < dhit) { end(); play("explosion") }; }); if (ticks % 10 == 0) { enemy.push(vec(rnd(100), 100)) addScore(1); } remove(enemy, (e) => e.y < -10); };

GitHubの index.html をダウンロードするか、コピペして、自分のPC上で開いてみましょう!


optionのthemaをcrtに設定すると、ブラウン管風エフェクトがかかって、雰囲気チェンジ!

seedを変更すれば自動生成されるBGMや効果音セットもいろいろ変えられて楽しいので、まずは数値をいじるところからはじめましょう。


crisp-game-lib by ABA Games
開発者のABA Gamesさん、シンプルでステキなオープンソースなゲームなど100本、ライブラリと共に多量公開!(残りゲーム制作体力10%な人のためのずぼらゲームライブラリcrisp-game-lib - ABAの日誌


ミニゲームに物語性を加えることで得られるコク - ABAの日誌
大長編もあれば俳句もある。ゲームも然り。

1日1個、11日で11個のミニゲームを作る - ABAの日誌
今年50のゲームを作って分かった面白いゲームを作る方法 - ABAの日誌
数作るって大事ですね!

たのしいづくり、はじめましょう!

JavaScriptでいろいろ作りたい高専生や学生向け、jigインターンもエントリー受付中!

6/16、MSXという規格が誕生した日!
西さんVS 孫さん!? MSXの誕生秘話をちょっと語るぞ!:MSX30周年 - 週刊アスキー

MSX30周年記念がきっかけで誕生したIchigoJam。図書館で本を借りたり、カセットを買ったり、雑誌を見て打ち込んだりのあの感覚、だいぶ再現できてきました。

IchigoDake&IchigoDyhookで学べる タイピング・算数・英語学習セット | ...
カセット差し込み即起動、余計な時間はかかりません! IchigoDyhookの開発元、I-O DATAさんのご協力による新製品!学校のちょっとした時間に、算数、英語、タイピングが自学できます。 (三種のカセットを動かすロング版動画 on YouTube)


ハコの中身はプログラムが書かれた紙・・・ではなく、書き込み禁止ファームを使ったプログラム入りIchigoDake! プログラムを止めて、LISTを見て、いろいろいたずらできますが、保存はできない安心仕様。


KAZUATE.md
プログラミングに少し慣れたこどもには、プログラミングを使った学習をオススメします。 IchigoJamプリント、もっと作りやすくMarkdownで書いてみるテスト第一弾です。CSSを加えてIchigoJamプリント化や、PDF出力など発展させたい。


1行1行、入力して、プログラムを組んでいく感じを体験できます。オンライン学習にも使える「IchigoJam web」と合わせてお試しください。

いい具合にこどもたちに伝えていきたいです、ネットで無限に学習できる現代。
インターネットが無い頃、TAKERUでソフトが買えたのはありがたかった!

おめでとう&ありがとう、MSX38周年

子供の安全を守る、越前市国高地区の地域安全マップづくりで協力、シビックテック!

越前市 国高地区 地域安全マップ」(src on GitHub)
危険箇所が一目瞭然!メイキングをご紹介します。


まずは、国高地区内の各町の方から提案された紙をデジタル化!


ひとまずシンプルにCSV(コンマ区切りデータ)としてGitHubに各町ごとのファイルを作って、データ化します。


GitHubのアカウントがあれば、どなたでも自分のものとしてコピーして編集して使えます(Fork)。編集は鉛筆アイコン!いい感じになったら、ぜひ本プロジェクトへ変更提案(プルリク)お送りください。 ご質問は「Issue」へお気軽にどうぞ!


場所情報は、緯度経度地図からGeo3x3をコピーしてください。わからなければ空欄でもOKですが、地図上のアイコンには載りません。


横断歩道が欲しいという箇所、ドローンによる空撮写真で見てみました。確かにここを歩くのであればほしいですね。


勝山市の教育アドバイザーにも就任した、松田さんところでは、中学校の先生が集まり、JavaScriptでオリジナルWeb教材づくり勉強会。さすが教育先進県、福井の先生!
情報通信技術を教育現場に活用 勝山市で教育アドバイザー委嘱|NHK 福井県のニュース
中高生の授業でプログラミングをするなら、すぐに社会に役立つ感を合わせて伝えたいですね!JavaScriptとHTMLは歴史が長く、古くてまどろっこしい教材が多いので注意したいところ。

JavaScript、こんな教材は古い!
- document.write を使っている(不推奨です。console.log / alert / textContentなどで)
- document.getElementById を使っている(idはそのままでOK。減らそう無駄タイプ)
- 変数宣言に var を使っている(const / let を使いましょう。varは巻き上げがバグの元)
- <script> を使っている(<script type=module> importで構造的に作りましょう)
- 抽象化に prototype を使っている(現代JavaScriptにはちゃんと class があります)
- function を多用している(「=>」を使った方がタイプ量が少なく、巻き上げもなく安全)
- then を多用している(async / await を使って分かりやすく書きましょう)
- HTMLが <!DOCTYPE html> で始まっていない(HTML Living Standard で必須です)
- JavaScriptやCSSがインデントしていない(みやすさ大事です)
- 演算子の前後などに空白がない、あったりなかったりする(気持ちよさ大事です)


Hana道場では、IchigoJamとJavaScriptのプログラミング!


いきなり実践に取り組む、IchigoJamをマスターした中学生。
キーボードで打って動かすIchigoJam BASICのテキストプログラミングで順番に実行、分岐、繰り返し、変数、抽象化の基本を学んだら、JavaScriptへサラッと移行できますよ。

プログラミング、まずは気軽に楽しく始めましょう!

上記動画を見ながらIchigoJam実機か「IchigoJam web」でゲームづくりと改造を体験したら、「IchigoJamプリント」であれこれ遊んで感覚を掴んでからのJavaScriptチャレンジがオススメです。 → 古くない、JavaScript教材の例「JSはじめのいっぽ

高校の情報Iのプログラミング教材をJavaScriptで実装したものがこちら。
2022年高校「情報I」プログラミング教材JavaScript版へコントリビュート
教科書が正しいとは限らないと学ぶための教材としていいかも?

コンパクトなオープンソースを改造するのもおすすめです。

読み上げてくれる英単語タイピングゲーム「TypingGame
JavaScriptのプログラムもシンプルなので、改造も簡単!(index.html on GitHub

自分で簡単に検証できる手段、それがコンピューターとプログラミングの醍醐味です。

日本語字幕で学べるコンピューターサイエンス、ハーバード大学の講座 CS50.jp が公開!
CS50 2020 - Lecture 0 - Scratch (日本語字幕付き) - YouTube
プログラミングは問題解決手段。文字や画像、音声などをデジタル化することで社会とコンピューターをつなぎます。コンピューターの力を紹介していないのがちょっともったいない。


電話帳から自分の名前を探すことを例に、アルゴリズムの解説。運動会のプログラムと同様、ステップに番号を振るのは一般社会でも使いますね。

1. 電話帳を開く
2. 電話帳の真ん中を開く
3. ページを見る
4. もし(IF)目的の人が載っていたら
5.   電話する
6. でなければ(ELSE)、もし(IF)五十音順でもっと前なら
7.   前半分の中の真ん中を開く
8.   3へ戻る(GOTO 3)
9. でなければ(ELSE)、もし(IF)五十音順でもっと後ろなら
10.  後半分の中の真ん中を開く
11.  3へ戻る(GOTO 3)

探し方は上の方法だけではありません。次の方法とどう違うでしょう?

1. 電話帳を開く
2. 電話帳の最初のページを開く
3. ページを見る
4. もし(IF)目的の人が載っていたら
5.   電話する
6. でなければ(ELSE)
7.   次のページを開く
8.   3へ戻る(GOTO 3)

行番号を付けての解説、この流れでBASIC!?


と思ったら、最初に登場したプログラミング言語は「C言語」(ただし、return 0; が抜けているイマイチなコード)
よく使われるプログラミング言語だけでも数十はある中、はじめてプログラミングをする学生に対して、わざわざややこしいC言語を比較対象にするのはフェアではないですね。


いろいろなプログラミング言語で hello, world 比較。ScratchはたしかにC言語より複雑ですが、CS50の6週目にやる予定のPythonより複雑です。

アニメーションづくりを目指すならともかく、テキストコーディングにすぐ進むなら、BASICがいいでしょう。

1 LED1 2 WAIT 60 3 LED 0 4 WAIT 60 5 GOTO 1

IchigoJam BASICで作った、信号機のように繰り返し点滅するプログラム。社会に組み込まれたコンピューターを体感しましょう。


こちら、1兆台のコンピューターがネットワークでつながる、IoT/マルチコア時代に注目される関数型プログラミング言語のひとつ、Clojureとそのファミリーです。

ClojureはJavaと同じ環境で動くJava言語で書かれたプログラミング言語。Java言語を知っている人はClojureの改良作業に加われるでしょう。 そのClojureを使って、ブラウザなどJavaScriptで動かせるClojureScriptが生まれ、インスパイアされてネイティブ環境で動きC言語で実装されたJanet、PHPで実装されPHPで動くPhelが誕生しました。

この表には抜けがたくさんあります。C言語で実装したJavaScriptで動くもの、JavaScriptで実装したJavaScriptで動くもの、Java言語で実装したネイティブで動くものなどが欲しいところですがありません。 そう、なければ創ればいいのです。Clojureファミリーはすべてオープンソースなので、近いものを使って改良し、新たな名前を付ける。こうして、新しいプログラミング言語は誕生します。


Janetの影響で誕生したPhelGeo3x3を実装してみました。文法はClojure、使える関数が違うので、少しの手直しをしてできあがり!(src on GitHub)

(ns geo3x3\geo3x3) (defn- encode_fn [code level i lat lng unit] (if (>= i level) code (encode_fn (str code (+ 1 (php/floor (/ lng unit)) (* (php/floor (/ lat unit)) 3))) level (+ i 1) (- lat (* (php/floor (/ lat unit)) unit)) (- lng (* (php/floor (/ lng unit)) unit)) (/ unit 3.0) ) ) ) (defn encode [lat lng level] (if (< level 1) nil (encode_fn (if (>= lng 0.0) "E" "W") level 1 (+ lat 90.0) (if (>= lng 0.0) lng (+ lng 180.0)) (/ 180.0 3.0) ) ) )

php/floor など、PHPの関数を使うのでPHPに慣れている人に便利そうですね!
78のプログラミング言語に対応したジオコードシステム「Geo3x3

座学より、つくって学ぼう、プログラミング!


プログラミング教材「IchigoJam(イチゴジャム)」の使い方とデモンストレーション(教師、大人向け) - YouTube
英語字幕もいれよう!

小学校で昨年度から必修化されたプログラミング。興味を持ったこどもたちがチャレンジする場のひとつ。越前がにロボコン、今年も越前蟹解禁日の2021年11月7日、開催決定です!

広く福井県内のこどもたちにチャンスを届けるためにはまだまだ大人の協力が欠かせません。企業版地域ICTクラブである「こどもプログラミング実業団」の説明会を開催しました。
こどもプログラミング実業団 募集! - 福井県こどもプログラミング協議会
こどもプログラミング協議会、越前がにロボコン実行委員が集まって、応援してくれている福井県庁の方と共にナチュラルスタイル社からのオンライン開催。

越前がにロボコンとは、小中学生が自分で作ったロボットとプログラミングで、地球を飛び出し惑星に子孫を残し、レアメタルをゲットして返ってくるまでの自律コントロールを競う大会です。 デジタル技術を使った競技なので、実質eスポーツ!

こちら、福井県こどもプログラミング協議会長、松田さんによるデモ走行! 使っているのは、こどもプログラミング実業団のはじめのいっぽにオススメ、PCN三重発のやさしいロボキット。


さばえカニロボを含む、ロボット達!


1996年に経団連が発表した「創造的な人材の育成に向けて


すばらしい提案から25年、個別最適化された学び「GIGAスクール」として教育DXが始まってます!


こどもプログラミング実業団の3つのメリット
こどもへのIT教育貢献、社員のDX人材化、応援する社員も含めた一体感(前回実業団参加したアフレル社長小林さん談)

そうはいっても難しそう?大丈夫です!スイッチを入れたら前進して、センサーが反応したら止まるロボットプログラムはわずか3行!

1 OUT 33 2 IF ANA(2)<500 CONT 3 OUT 0

1. OUTでモーター制御して前進
2. IF(もし)とIN2につないだアナログ(ANA)センサーの値が500より小さければ、もういっかい(CONT)
3. OUTでモーター制御して停止

まずは見様見真似でOKです。プログラムの通り動くロボットを目の当たりにすると、大人も感動できるんです。 こればっかりはテキストでも動画でもVRでも伝わらないので、ぜひ一度、ご体験ください!


こどもプログラミング実業団 募集!説明会動画 - 福井県こどもプログラミング協議会
個人での応募ももちろん歓迎です。未来と社内のDX人材育成にご興味ある企業や学校、自治体など組織の方、お気軽にご相談ください!

福井県こどもプログラミング協議会へメールする → fkpc@kani-robocon.com>

コンピューター言語」を使ってコンピューターとはなそう!
キーボードが気に入った1歳児でも使えるBASICよりも更に優しく、音のフィードバックが楽しい MML(エムエムエル)がオススメです。

10 CLS 20 INPUT S 30 PLAY #901 40 IF SOUND() CONT ELSE RUN RUN

IchigoJam BASICで4行プログラムして、実行。入力待ちとなるので、CDE と入力してエンター。ドレミと鳴ります!(RUN on IchigoJam web)

CDE2CDE2GEDCDED2

チューリップ(基本は4分音符、数字を付けると長さが変わる)

T200CDE

テンポ200で速く!(標準はT120)

CDE>CDE<CDE

オクターブアップとオクターブダウン
IchigoJamで音楽づくり PSG単音での音遊びから、MIDIキーボード&MIDI音源をつないだ本格DTMまで

MMLは解釈できない文字で停止するので、デタラメ入れても壊れにくいので安心。おもちゃにどうぞ!


IchigoJam BASIC 1.5b07 ファームウェア (RISC-V版 IchigoJam R用)
- IchigoJam 1.5β7
シリアル通信のポートをプルアップに変更
(書き換えには IJUtilities が便利です)

ゲームライブラリ整備計画、egcanvas.js に続き、サンプルゲーム用のステキ素材を発見!

egcharmaker
ぴぽや倉庫さんのモンタージュ合成可能なキャラクターを使ったwebアプリを作り始めました。 まだまだ荒削りですが、パーツを選んで、いろんなキャラクターを作れます!(ちゃんと作成するには、chracter.xmlのorderに従った並び順の調整が必要ですが、未対応)

ドット絵ならではのかわいさがありますね!

営利利用も加工もOK、素材としての販売だけは禁止という、オープンデータに近いライセンス体系。 参考に新たなキャラクターを描くのも楽しいかもしれませんね! (素材利用規約 - ぴぽやblog

ディレクトリ(フォルダ)構造の素材データをjson化するDeno用ライブラリ dir2json.js を使った makejson.js によって作成する res.json を使ったwebアプリ。 RPGを作りたい小中学生向けに協力したい方、大募集!(src on GitHub

小中学生の実装力を鍛える、PCNこどもプロコン2021のふりかえりと次の計画ミーティング。 今回もたくさんのステキな作品あつまりました。

IchigoJam BASICや、Scrtachからのステップアップにイチオシはプログラミング言語は、JavaScript。
- 創った作品を簡単に公開でき、パソコンでもスマホでも動く
- 機械学習(AI)を気軽に使える(Tensorflow.jsはじめのいっぽ
- サーバーサイドでも使える(Denoはじめのいっぽ
- オープンソース共有サイト GitHub で最も使われているプログラミング言語(GitHut考察

とはいえ、最新の言語は変化も激しいので、陳腐化してしまった古い教材が多いのが問題です。
ということで、小中学生のプログラミング言語ステップアップ用に新たなゲームライブラリ整備計画をスタート!


egcanvas demo 1 - touch

小中学生憧れのスマホ、PCゲームづくり。まずはスタンダードな2Dゲームをサクッと作成できるライブラリ egcanvas.js として公開。 ダウンロードして、HTMLを開くだけでブラウザで動き、改造し、試せます。
egcanvas.js 1.0.0(200KB)」

はじめのいっぽ、文字を真ん中に出すプログラム

<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width"> <title>egcanvas.js demo</title> </head> <body> <script type="module"> import { createEgCanvas } from "https://js.sabae.cc/egcanvas.js"; const c = createEgCanvas(); c.draw = (g, cw, ch) => { // cw ch は画面の幅高さ、gを使って描画 // 線を引く g.setColor(255, 0, 0); g.drawLine(0, 0, cw, ch); // 画面中央に文字 g.setFontSize(cw / 20); g.setColorHSL(90, .6, 0.5); g.fillTextCenter("hello egcanvas.js", cw / 2, ch / 2); }; // ひとまず最初に描く c.redraw(); </script> </body> </html>

import / export を使った、ピュアなJavaScriptのESモジュールを使っているので、ライブラリを辿るのも簡単です。

import { createFullCanvas } from "./createFullCanvas.js"; import { extendGraphics } from "./extendGraphics.js"; import { extendUI } from "./extendUI.js"; const createEgCanvas = () => { const c = createFullCanvas(); extendGraphics(c.g); extendUI(c); return c; } export { createEgCanvas };

フルスクリーンのCanvasを作成して、CanvasAPIベースのグラフィックとUIを拡張しています。extendGraphics.js を見ると、どんな描画ができるか確認できます。

何かステキな名前をつけて、コンパクトで優しく楽しく学べるプログラミング環境を作っていきます!


egcanvas.js on GitHub
どなたでもお気軽にコントリビュートください!

これを機にwebアプリにチャレンジしたい、高専生、オンライン勉強会やりますよ!
【オンライン開催】jig.jp勉強会&会社説明会 ~募集のお知らせ~

祝!福井高専、ディープラーニングコンテスト、優勝!
福井高専がディープラーニングコンテスト優勝しました!

Tweet
クリエイティブ・コモンズ・ライセンス
この作品は「Creative Commons — CC BY 4.0」の下に提供されています。
CC BY / @taisukef / アイコン画像 / プロフィール画像 / RSS