2021-04-17
小中学生の実装力を鍛える、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