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

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

今日のレッスンの前半は、なんとゲームで遊ぶこと!簡単操作だけどなかなか難しいこのゲームで何点とれるか?競い合ってみましょう。レッスン後半では、JSFiddleというプログラミング練習画面を使って、さっそくプログラムの「入力」をやってみます。トリが表示できれば成功です。画面上での位置を表す「座標」についても学びます。次のレッスンにもつながる大事な基礎を習得しましょう。


「ほぼ完成版」フラッピーバード風ゲーム

さっそくですが「ほぼ完成版」フラッピーバード風ゲームはこちら。※画面が止まっている場合は左上の「Result」ボタンを押すと最初からスタートします。

操作方法&ルール

  • 放って置くとトリはどんどん落下していきます
  • 画面のどこでもよいのでクリックするたびにトリが少し上に浮き上がります
  • クリックでトリの高さを調節しながら土管をよけて進んでいきます
  • 土管にぶつかったり、地面に落ちたらゲームオーバー(特に表示はされません、止まるだけ)



このゲームを作っているプログラミング言語は?

このゲームは、javascriptというプログラミング言語を使って作られています。javascriptはウェブサイトやウェブアプリの制作に欠かせない言語です。また、比較的初心者にも学びやすい言語です。これからのレッスンでは、このjavascriptを使って今遊んでみたゲームをゼロから作り上げていきます。


最初のコード(HTML)を入力してみよう!

今後レッスンの中で入力するコードは基本的にjavascriptばかりですが、最初だけ以下のHTMLコードを1行だけ入力します。

HTML



どこに入力するのか?

コードを書いて実行するには通常それなりの準備が必要ですが、オンラインで簡単にそれができるJSFiddelという無料の便利なサービスがあるので、このレッスンではJSFiddleを学習の場とします。以下のURLにアクセスしてください。

JSFiddleの画面

左上のHTML入力フィールドにさっそく今回の1行を入力してみましょう。ゆっくりでよいので正確に。

コードを入力する際の注意点

  • 原則すべて「半角英数字・半角記号」で入力する
  • 「スペース」も半角を使う。全角スペースが入るとエラーになることがある(発見しづらいミスの一つです!)
  • 大文字小文字は区別する
  • 文の終わりには、セミコロン(;)を付ける
  • 文字の色はエディタによって様々なので気にしなくてOK



javascriptを入力する

HTMLの入力が完了したら、次はいよいよjavascriptです。少し長くなりますが、がんばって入力してください。入力する場所はJSFiddleの左下のjavascript入力フィールドです。プログラミングをする上でタイピングは大切で、避けて通れません。じっくり取り組みましょう。

javascript

ちなみに、コード中グレーの文字で「//画像パーツの読み込み」のようにスラッシュ2つ(//)から始まる日本語の部分は、「コメント」と言ってjavascriptの動き自体には影響を与えません。自分用のメモ的に文章を記入している部分です。ですので、ここは入力しなくてもよいし、違うことを書いてしまってもOKです。そのかわり、javascriptコードの部分は1文字たりとも間違いのないように正確に入力してください。半角英数字・半角記号のみで書くという注意点はHTMLと同じです。


Run(実行)してみよう!

入力おつかれさまでした。では、ここまでの成果を見て見ましょう。JSFiddleの上部メニューの一番左にある「Run(実行)」というボタンを押してみましょう。これでプログラムが実行され、結果が右下の「Result(結果)」フィールドに表示されます。入力が正しくできていれば次のようなに真っ白な画面に黄色いトリがぽつんと表示されている画面になっているはずです。ならなかった場合はHTMLかjavascriptの入力内容を確認しましょう。※まれに正しく入力されていてもトリが表示されない場合があります、そのときは何度かRunしてみてください。

トリが表示された。※表示されない場合は何度かRunしてみてください。



コードの解説(とても簡単に!)

HTML

幅670px、高さ350pxの「canvas(キャンバス)」を画面上に作る、という意味です。

canvasはjavascriptを使ってその上に図を描いたり画像を配置したり動かしたりできる土台のようなもので、ゲームを作るためには不可欠です。今回のゲーム作りでは、HTMLは最後までこの1行のみ。ゲーム自体はjavascriptでどんどん作っていくことになります。

javascript

① canvasを使うための「お約束」的な記述です。
② toriという変数を作って、画像として使うよ、という意味です。
③ そのtoriの画像素材としてURLにある画像を取り込んで、という意味です。
④ ①で準備したctx(キャンバスに何か描いたりするときに使う)にtoriをx座標200、y座標30の位置に表示して、という意味です。

いきなり色々なコードがでてきましたが、今注目してほしいのは④だけです。①〜③は今の段階ではとりあえず「お約束」のコードと思っておけばOKです。


④の「座標」を少し変えてみると…

プログラミングは、出会ったコードをいろいろいじってみて、実行結果がどう変化するかを体験していくことで上達します。さっそくですが、④の部分をいじってみましょう。例えば、x座標の200を500に、y座標の30を300に変えて、Runしてみましょう。

どうですか?トリの表示位置が右下の方にずれたと思います。ここからわかることはなんでしょうか?そう、javascriptプログラミングでは、左上が(0,0)つまり、x座標0でy座標も0であり、右へ行くほどx座標が増える、下へ行くほどy座標が増えるのです。算数では左下が(0,0)であることが多いと思うので、少しとまどうかもしれませんが、早く慣れてしまいましょう。

座標については、別連載の【第3話】x座標とy座標を書き換えてドクロの表示位置をコントロールするでも詳しく解説していますので補助教材としてご活用ください。



ここまでをsave(保存)しておこう

教材#01はここまでです。入力したコードを保存しておきましょう。JSFiddleのメニューのRunの右の「Save」を押せばコードがサーバ上に保存されます。ただし、再びこの画面を呼び出すためには今のページのURL(例:https://jsfiddle.net/dokubara/xxxxxxxx/xx)が必要になるので、必ずブックマーク(お気に入り)またはURLをメモしておきましょう。

もし学校や児童生徒のご家庭上問題がなければ、無料のアカウント登録をしておけば、URLを保管していなくても、ログインすることで自分が保存したコードをすべて一覧することができるので便利です。



Google Ad

Google Ad

Recommend

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

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

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

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

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

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

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

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

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

【JavaScript ハノン】必修パターン①

とりあえずHTML(pタグだけ) See the Pen 最初のHTML by programmingbird (@programmingbird) on CodePen. javascriptは基本 …

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

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

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

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