読者です 読者をやめる 読者になる 読者になる

paiza開発日誌

paiza(https://paiza.jp)の開発者が開発の事、プログラミングネタ、ITエンジニアの転職などについて書いています。

コロコロコミックの人気キャラを使って小一時間でゲームが作れた話

プログラミング学習 プログラミング初心者 プログラミング教育

f:id:paiza:20150904124059p:plain
f:id:paiza:20140916135428p:plainこんにちは。谷口です。

ビジュアルプログラミングのサービスや子供向けプログラミング学習サイトが増えてきましたが、皆さんはあのコロコロコミックが「コロコロゲーム工作(クラフト)ブロック」というビジュアルプログラミングができるサイトを公開しているのをご存知でしょうか?

こちらはオープンソースのプロジェクトenchant.jsで作られたビジュアルプログラミング言語MOONBlock(前田ブロック)のコロコロ版と言うべく、MOONBlockと同様のブロックを組み合わせてコロコロコミックの人気キャラクターを動かしたりゲームを作ったりすることができます。

また組み合わせたブロックは、ボタン一つでJavaScriptソースコードに変換してみることもできます。

今回はこちらの、子供達のプログラミング教育の最初の一歩としても、また大人がやっても楽しいゲーム工作ブロックを実際にやってみました。

コロコロゲーム工作ブロック

www.corocoro.tv

■コロコロゲーム工作(クラフト)ブロックとは

コロコロゲーム工作(クラフト)ブロックでは、ブラウザ上でブロックを組み合わせるだけで、誰でも簡単にコロコロコミックのキャラクターを使ったゲームが作れてしまいます。
f:id:paiza:20150904124059p:plain

◆操作の仕方

まずは操作の仕方のPDFを見てみよう!
f:id:paiza:20150904125040p:plain


画面の見方やボタンの説明の後に、キャラクターを画面に出して動かすチュートリアル的な説明もあるよ!
f:id:paiza:20150904124643p:plain


これが読み解ければりっぱなプログラマーだ!
これが読み解ける人は……ビジュアルプログラミングで勉強する必要はないぞ!
f:id:paiza:20150904124821p:plain


■やってみようゲーム工作ブロック

◆サンプルで遊んでみよう

f:id:paiza:20150904125104p:plain

プログラム例で、サンプルゲームのブロックを見たり実際に遊んだりすることができるぞ!
f:id:paiza:20150904125256p:plain


RUNをクリックして遊んでみよう!!
f:id:paiza:20150904125447p:plain


あー!!小学生が大好きなモチーフ!!楽しい!!!!
f:id:paiza:20150904125633p:plain


◆オリジナルゲームを作ってみよう

操作方法が分かったら、ブロックを組み合わせて自分だけのオリジナルゲームを作ってみよう!!
f:id:paiza:20150908120215p:plain
コロコロコミックの人気漫画、でんぢゃらすじーさんとかムラ神さまとかケシカスくんとかのブロックが使えるよ!!


大きいお友達が好きなドッジ弾平とか超速スピナーのブロックはないよ!!ゲームセンターあらしもないよ!!あるわけないだろ!!!!
f:id:paiza:20150904133302p:plain


小一時間もかからずに、日蝕の日にでんぢゃらすじーさんが量産型ムラ神さまに出会うと世界が終わるという退廃的なゲームを作ることができたよ!!
f:id:paiza:20150904134014p:plain


もちろん実行してみながら改良を加えていくことができるし、組み合わせたブロックはJavaScriptに変換して確認することもできるから、大きいお友達はJavaScriptの勉強にも使えるよ!!
f:id:paiza:20150908121016p:plain


みんなもコロコロコミックのキャラクターを使ってオリジナルゲームを作ってみよう!!

コロコロゲーム工作ブロック

www.corocoro.tv

■まとめ

ビジュアルプログラミング学習サイトはたくさんありますが、「コロコロゲーム工作(クラフト)ブロック」は、自分でゲームを作って遊び、さらにそれをJavaScriptのコードに変換して確認ができるため、プログラミングの勉強をしてみたい子供から、JavaScriptを習得したい大人まで、幅広く使えるサイトだと思います。

プログラミング初心者の皆さん、ぜひオリジナルのゲームを作ってみてください!

また、「他のビジュアルプログラミング学習のサイトも触ってみたい!」という方や、「既にある程度のプログラミングはできるから、実際のコーディングを学びたい!」という方は、先日このブログで書きました記事を参考にしてみてください。ゲーム感覚で楽しく学べる15サイトをご紹介しております。


初心者も楽しく勉強できる!ゲーム感覚でプログラミングが学べる15サイト - paiza開発日誌

さらにコーディングの基礎が身についてきましたら、ぜひpaizaでご自分のスキルをはかってみてください!

paiza動画ラーニングについて

f:id:paiza:20160307113923p:plain
paizaには、オンラインでプログラミング学習ができるパイザ・ラーニングという無料学習コンテンツがございます!現在、PHPRubyPythonの入門編を学ぶことができますが、対応言語は今後もどんどん追加される予定となっています。

プログラミング未経験の方でも、「やさしく・楽しく・わかりやすい1本約3分のレッスン動画」 や 「ブラウザ上でコードを書いて実行できるオンライン実行環境」「複数の練習問題」で、未経験者でも無理なく学習を続けることができます。




paizaではITエンジニアとしてのスキルレベル測定(9言語に対応)や、プログラミング問題による学習コンテンツ(paiza Learning)を提供(こちらは21言語に対応)しています。テストの結果によりS・A・B・C・D・Eの6段階でランクが分かります。自分のプログラミングスキルを客観的に知りたいという方は是非チャレンジしてみてください。

また、paizaでスキルチェック問題を解くと、ステータスとしてランクが表示され、解いた問題に合わせてトロフィーやバッジが付与されます!是非チャレンジしてみてください!

http://paiza.jp

プログラミング入門講座|paizaラーニング

PHP入門編Ruby入門編Python入門編Java入門編JavaScript入門編C言語入門編C#入門編アルゴリズム入門編