@bigakubu アートとプログラミングがあればいい。

【序文】ゲーム作りは実用的スキルとプログラミング的思考を身につける絶好の教材!

プログラミングなんて自分もやったことないのに、児童生徒たちに教えなくてはいけなくなった。そんな先生へ提案です。プログラミング言語javascriptを使ってゲーム「Flappy Bird」を作ることを授業のテーマにしましょう。ゲームプログラミングは実用的なスキルプログラミング的思考を身につける絶好の教材です。いきなりゲーム作りなんて難しそう、と思うかもしれません。確かに簡単ではないですが、このサイトでは「教える人」の視点に立った詳しい解説や教材・教案準備に応用しやすいテキストや画像、そしてプログラムのサンプル素材を多く提供しますので安心して始めてみてください。

教材・カリキュラムの全体像

【第1回】まずは「ほぼ完成版」で遊んでみよう

  • ちゃんとプレイできる「ほぼ完成版」で遊んでみる
  • コード全体をざっと見てみる、意外と短いぞ
  • 少しだけコードをいじってみる、スピードや背景色などのわかりやすい変化を体験
  • これからこのゲームを自分たちで作れるんだ!というモチベーションの確立が大切

【第2回〜第6回】ゼロから段階的にゲームを作り上げていこう

  • 何もないところから始めて、鳥を表示させる(変数、座標の学習)
  • 鳥を落下させる(計算、タイマー処理の学習)
  • クリックに反応させる(イベント処理の学習)
  • 土管を表示し動かす(ロジックを考える、配列、条件分岐、反復処理の学習)
  • 衝突判定、ゲームオーバー(ロジックを考える、複雑な計算の学習)

【第7回〜第8回】オリジナル画像や演出を追加して自分だけのFlappy Birdを作ろう

  • 鳥や土管、背景などをオリジナル画像に変える
  • スタート、ゲームオーバー画面などの演出を追加
  • みんなに自慢したくなるような自分だけのゲームを完成させる
  • 自由な発想を大切にし、それをプログラミングで表現できることを学ぶ

「ほぼ完成版」はこんなゲーム



そもそもFlappy Birdとは?

javascriptとは?

ゲーム作るならScratchとか使ったほうが初心者にはやりやすいんじゃないの?






Google Ad

Google Ad

Recommend

【プログラミング教材#05】土管の高さをランダムにしよう

前回の教材でゲームの重要な要素である土管を次々と表示し動かすことができました。今回は土管一つ一つの高さをランダムに変化させることにより、ゲームにバリエーションを持たせてみましょう。ランダム性はプログラ …

プログラミング教材・指導案

【プログラミング教材#01】まず「ほぼ完成版」で遊んでみよう!

今日のレッスンの前半は、なんとゲームで遊ぶこと!簡単操作だけどなかなか難しいこのゲームで何点とれるか?競い合ってみましょう。レッスン後半では、JSFiddleというプログラミング練習画面を使って、さっ …

プログラミング教材・指導案
no image

【プログラミング超入門#1】

STEP#01 ブラウザでJSFiddleをひらく! 先生向けの解説 JSFiddelは、、、 STEP#02 HTMLを書く!(たった1行) See the Pen 最初のHTML by progr …

プログラミング教材・指導案

【プログラミング教材#06】背景表示と衝突判定をしよう

いよいよ完成間近です。今回は背景画像の表示をしたあと、ゲームの重要な要素である衝突判定を実装します。トリが土管や地面にぶつかったらゲームオーバー!その判定をコードでどう表現すればよいのか、じっくり考え …

プログラミング教材・指導案

【プログラミング教材#03】クリックでトリを浮上させよう

前回の教材では1/50秒ごとにトリのy座標を1ずつ増やすという処理を追加することにより、放って置くとトリが少しずつ下に落ちていくという仕組みを実現しました。このままではゲームにならないので、今回はクリ …

プログラミング教材・指導案