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

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


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


クリックに反応させたい

クリックのようなユーザーによる操作はプログラムを作る側からすれば「いつ発生するかわからない」できごとです。これに対応するためには、常時クリックがされていないかを監視(リスニング)する必要があります。javascriptではこの監視機能を「イベントリスナー」と呼びます。クリックを検知したい対象(今回であればゲームの土台となるcanvasですね)にイベントリスナーを設置しておき、クリックが発生したらどんな処理を呼び出すかを設定しておくことで、「クリックしたらトリを浮上させる」が実現できます。具体的には次のようなコードを追加します。


javascript(教材3-1)

※前半のコードを少し省略して掲載しています。

追加したコードを解説します。

① イベントリスナーを追加、’mousedown’(クリック)が発生したら、mouseDownという名前の処理を実行せよ、という意味です
② mouseDownという名前の処理(function)を新しく追加、処理内容は、toriYを25減らす、という意味です

①②をあわせて、クリックされたらトリのy座標を25減らす、つまり座標25分だけトリを「上へ」移動させようというわけです。では、さっそくRunしてみましょう。


実行結果

キャンバスのどこでもクリックすると、トリがピクっと上に浮かび上がるのが確認できたでしょうか。ひとまず成功です。


今回の教材のまとめ

少し短いですが、きりがいいので今回の教材はここまでにします。イベントリスナーというjavascriptの中でも比較的特殊なパターンを学習しました。よくあるプログラミング解説本などでは初心者向けにはなかなか取り上げない内容ですが、ゲームをはじめ、ユーザーの操作に対応するプログラムを作るためには不可欠なコードです。今回は「クリック」への対応を学習しましたが、他にもキータッチやブラウザサイズの変更、スマホやタブレットの操作など多くの「イベント」への対応ができますので、興味があったら「javascript イベントリスナー」などで検索して情報収集してみましょう。



Google Ad

Google Ad

Recommend

no image

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

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

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

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

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

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

【プログラミング教材#02】トリを落下させよう

前回はゲームで遊んだあと(笑)コードを書いてトリを表示させるところまでやってみました。ついでに「座標」の数字を変えるとトリの位置を変えられることも学びました。今回はこのゲームのポイントでもある「放って …

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

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

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

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

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

forを使ってループ See the Pen for by programmingbird (@programmingbird) on CodePen. まず本題ではないがlet str=&#8221 …

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