初めてのenchant.js 008イベント(基本編)[JavaScript]

前回は「初めての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 怒涛の 100 tips
phiさんの怒涛のTips集:なんとなくenchant.js分かってきたーって人はここのTipsを修行僧の用にストイックにこなせばennchant.jsある程度できます。と言えるようになるはず。

ドットインストール:enchant.jsの基礎
こちらは、逆にうーん説明見てもよくわからんなぁーって人向け、登録は必要だけど、ビデオをみながら説明が入るのでチョー分かりやすい&enchant.js以外にも様々なレッスンビデオがやばいくらいいっぱい。しかも無料ときたもんだ。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です