@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

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

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

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

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

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

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

【プログラミング教材#04】土管を表示して動かしてみよう

前回までの教材でトリについては一通り必要なコードを書くことができました。今回からもう一つの主役である障害物「土管」を表示させたり動かしたりしてみます。表示や動きの考え方はトリと同じですが、土管は複数同 …

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

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

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

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

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

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

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