IchigoJam BASICや、Scrtachからのステップアップにイチオシはプログラミング言語は、JavaScript。
- 創った作品を簡単に公開でき、パソコンでもスマホでも動く
- 機械学習(AI)を気軽に使える（Tensorflow.jsはじめのいっぽ）
- サーバーサイドでも使える（Denoはじめのいっぽ）
- オープンソース共有サイト GitHub で最も使われているプログラミング言語（GitHut考察）
とはいえ、最新の言語は変化も激しいので、陳腐化してしまった古い教材が多いのが問題です。
ということで、小中学生のプログラミング言語ステップアップ用に新たなゲームライブラリ整備計画をスタート！
小中学生憧れのスマホ、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勉強会＆会社説明会 ～募集のお知らせ～」
祝！福井高専、ディープラーニングコンテスト、優勝！
「福井高専がディープラーニングコンテスト優勝しました！」
Fri Night
