「子供向けブロックプログラミング学習ツール」進化しました!

エンジニアの tatenosystem です。

今回の記事は「私が個人的に作成しているサービス」の紹介です。

 

前々回の2013年09月ブログ  で

 

ビジネスチャンス キタコレ!!!

 

ということで 子供向けプログラム学習ゲーム「たてのブロックサービスを個人的に作成してみました。

開発理由などは 前々回ブログ を見てください。

 

ブロックを配置することでプログラムを作り、キャラクタを動かしてゲームをクリアするゲームです。

 

その後、 文部科学省の「小学校でのプログラミング教育必修化」などの話題があったり、子供向けプログラム教室のリリースを多数見かけたり、子供向けプログラムがビジネス誌の表紙で取り上げられたり、

 

f:id:vg-k-tateno:20170622124515p:plain

 
ここ数年、子供向けプログラミング市場が盛り上がってきてました。

 

しかし「たてのブロック」は全く流行っていない。。。

 

これはもう、サービス名が悪いんじゃないかな。。。

 

そんなわけでサービス名を改名しました。

 

「たてのブロック」改め「コードゲーム」

 

コードゲーム (CODE GAME) - プログラム学習ゲーム

 f:id:vg-k-tateno:20170622130719p:plain


サービス名だけでなく、内容も進化しました。

 

■ 素晴らしい素材画像を見つけたのでキャラ、背景画像の変更

 enchant.js に添付されていた「クマ」画像から、キャラ、背景画像を変更

 

■ プログラム状態を含めて「URL」を生成

「たてのブロック」では URL にマップ情報を保持してましたが、それに加えて作成したユーザーが作成したプログラムも URL に保持しました。


これで URL を送れば、作成したプログラムを他人に見せることができます。

ぐるぐる回るサンプルプログラム

 ■ WordPress から markdown 自作の CMS へ

 

WordPress でサイトを作成してたのですが、度重なるバージョンアップ対応に心が折れたので、簡易な MarkDown 形式の CMS を作成しました。こんな感じで更新しています。

 

f:id:vg-k-tateno:20170622125016p:plain

 

■ 「城」の追加

f:id:vg-k-tateno:20170622130634p:plain

いままでは全ての「宝箱」を取ればクリアでしたが、もし画面内に「城」がある場合は、すべての「宝箱」を取った後に「城」に行くとクリアになりました。

 

 

サービス紹介がてら下記ゲームをクリアしていきましょう


下の画像クリックでゲームがスタートします。

f:id:vg-k-tateno:20170622131343p:plain

 

「中央にあるブロック」を「ドラッグ&ドロップ」で「左のプログラムエリア」に配置します。

f:id:vg-k-tateno:20170622131431p:plain

 

配置したブロックは プログラムエリア外に「ドラッグ&ドロップ」すると消えます。


配置したブロックを「クリック」すると向きや状態が変わります。

f:id:vg-k-tateno:20170622131459g:plain

 

背景が「黄色」、「白」のブロックは向きや状態をクリックで変えることができます。

 

実行ボタン でプログラム動作し「主人公」が動きます。

f:id:vg-k-tateno:20170622131523j:plain

 


「プログラムの作り方」はこのページに書かれています。


使用できる「プログラムブロック」はこのページに書かれています。


紹介のため、今回紹介したゲームの「クリア動画」を作成しました。

 

 

今後も「コードゲーム」は進化していきます!

ゲーム作成機能 もあります。是非「コードゲーム」で遊んでださい。