前回は「初めてのenchant.js 007ちょっとごちゃってきたのでリファクタリング[JavaScript]」と題しリファクタリングしました。
今回はイベントの基礎をやっていきたいと思います。
今回は趣向をかえましてノンプログラミングですすめます。
イベントって?
イベントとは普通の現実社会だと、
「本日のメインイベントー」とか、イベントカレンダーとかゆうとりますが、
JavaScriptで言うところのイベントは、
「マウスでクリックされましたで〜」とか、
「画像がロード完了しましたぜ。」とか
「キーボード(上)がおされましたよ。」など、
何かがあったときにプログラムが教えてくれる事をいいます。
イベントのハンドリング
基本ユーザインタラクてぃぶな、ゲームとかを作ろうとするとイベントハンドリングが付いてきます。
「上」キーが押された。→プレイヤーキャラを上に移動させる。
「A」ボタンが押された。→プレイヤーからミサイルを発射する。
画像の読込を開始して、ローディング画面が表示されているとき、
画像の読込が完了した。→ゲームを開始する。
といった感じで何がおこったら、この動作。
これがあったら、この操作。
と設定していくことを、イベントハンドリングとかいいます。
addEventListener:耳を傾けよう。
最初にも言いましたが、プログラム(JavaScript)はイベントが発生すると、
「マウスでクリックされましたで〜」
「画像がロード完了しましたぜ。」
「キーボード(上)がおされましたよ。」
と、イベントを通知してくれます。
その声に耳をかたむけるのが、「addEventListener()」という関数です。
例えば以下のコードだと、
「タッチがはじまったよー(touchstart)」
とプログラムが通知することに対して、耳を傾けている状態で、
実際に通知があると(タッチが開始されると)関数「onTouch()」が実行されます。
bear.addEventListener('touchstart',onTouch); function onTouch(e){ //ここにタッチされた時の処理をかく。 }
次回は「初めてのenchant.js 009イベント(touchその1)[JavaScript]」です。
初めてのenchant.js 一覧
- 初めてのenchant.js 001 基本的なこと[JavaScript]
- 初めてのenchant.js 002 基本セッティング[JavaScript]
- 初めてのenchant.js 003シーンの表示[JavaScript]
- 初めてのenchant.js 004画像の表示[JavaScript]
- 初めてのenchant.js 005文字の表示[JavaScript]
- 初めてのenchant.js 006音を鳴らす[JavaScript]
- 初めてのenchant.js 007ちょっとごちゃってきたのでリファクタリング[JavaScript]
- 初めてのenchant.js 008イベント(基本編)[JavaScript]
- 初めてのenchant.js 009イベント(touchその1)[JavaScript]
- 初めてのenchant.js 010イベント(touchその2)[JavaScript]
- 初めてのenchant.js 011イベント(ENTER_FRAME)[JavaScript]
- 初めてのenchant.js 012イベント(キーボード)[JavaScript]
- 初めてのenchant.js 013当たり判定[JavaScript]
- 初めてのenchant.js 014オブジェクトの拡張[JavaScript]
- 初めてのenchant.js 015簡単なミニゲーム作成[JavaScript]
こちらもオススメ(別サイト)
enchant.js 怒涛の 100 tips
phiさんの怒涛のTips集:なんとなくenchant.js分かってきたーって人はここのTipsを修行僧の用にストイックにこなせばennchant.jsある程度できます。と言えるようになるはず。
ドットインストール:enchant.jsの基礎
こちらは、逆にうーん説明見てもよくわからんなぁーって人向け、登録は必要だけど、ビデオをみながら説明が入るのでチョー分かりやすい&enchant.js以外にも様々なレッスンビデオがやばいくらいいっぱい。しかも無料ときたもんだ。
コメントを残す