フリーランスのためのネットビジネス専門学校 ネットで独立開業を目指す人を応援
フリーランスのためのネットビジネス専門学校 ネットで独立開業を目指す人を応援

[js]リズムゲームで連打したとき音を重ねて出したい

概要

クロスブラウザ対応について調べていたところ、JavaScriptの面倒なところをjQueryが吸収してるんだなーとしみじみと思ったので本記事を書きました
キーコードの取得方法周辺のお話を書いています
※ あまりJavaScriptに詳しくないので、なにかご指摘あれば教えていただければと思います

(通常の)JavaScript

Eventオブジェクトの取得方法

IE8以下ではwindow.eventにイベント情報が含まれているため、以下取得が主流?

 var e = e || window.event;

イベント発生要素

イベントが発生したElementを返す
微妙に全ブラウザ対応のプロパティが無い・・・

プロパティ 説明
e.target イベント発生要素を返す(IE8以下非対応)
e.srcElement イベント発生要素を返す(FireFoxは61以下非対応)

キーボードイベント

  • 概要
    The KeyboardEvent
    onkeypress,onkeydown,onkeyupのキーボードイベントで取得可能なプロパティについて説明します

  • 各イベント

イベント 説明  取得対象キー
onkeypress pressing = キーボードの押下中 画面上表示可能なキー
onkeydown presses = キーを押下した時 機能キー(F5, enter等)
onkeyup releases = キーを離した時 機能キー(F5, enter等)
  • 各プロパティ
プロパティ 説明 onkeypress URL
e.key 入力値そのものを取得(IE8以下非対応) 対応 KeyboardEvent key Property
e.code unicode値を返す(ブラウザ依存 ※ IE非対応、キーボード依存) 対応 KeyboardEvent code Property
e.charCode unicode値を返す(ブラウザ依存) onkeypress時のみ KeyboardEvent charCode Property
e.keyCode ASCII値(onkeypress時)、unicode値を返す(FireFox非対応) 対応 KeyboardEvent keyCode Property
e.which ASCII値(onkeypress時)、unicode値を返す(IE8以下非対応) 対応 KeyboardEvent which Property

jQuery

上のJavaScript仕様をJQueryのイベントオブジェクトがまとめてくれています笑
マルチブラウザのことしっかり書いていますね

jQuery(jquery.com/) より以下抜粋

It makes things like HTML document traversal and manipulation,
event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers.

Eventオブジェクトの取得方法

全く気にしなくて大丈夫です
通常のJavaScriptとObjectが違いますので、そこだけ注意かと思います
Event Object | jQuery API Documentation

$("document").on("keydown", function(e) {
    // e自体がjQueryのEventオブジェクト
});

イベント発生要素

イベントが発生したElementを返す
srcElementの考慮が不要になっています
表にしていますが、JavaScriptと比べるためです
event.target | jQuery API Documentation

プロパティ 説明
e.target イベント発生要素を返す(全ブラウザ対応)

キーボードイベント

  • 各メソッド

このあたりはあまり変わらない
Keyboard Events | jQuery APIDocumentation

イベント 説明
keypress JavaScriptのonkeypress
keydown JavaScriptのonkeydown
keyup JavaScriptのonkeyup
  • 各プロパティ

いろいろまとめてくれています
表にしていますが、JavaScriptと比べるためです

プロパティ 説明 URL
e.which JavaScriptのkeyCode、charCodeを標準化したもので、unicode値を返す event.which jQuery API Documentation
  • 使い方

結局jQueryでやるとすごい簡単にできるという

$("document").on("keydown", function(e) {
    var keyCode = e.which;
})

その他

ShiftやCtrlと他キーの同時押し等の判定は以下のようなプロパティもあるので、チャットのメッセージ入力欄等でも使えそうです(通常のJavaScriptも)

プロパティ 説明
e.shiftKey Shiftキーを押した状態か
e.ctrlKey Ctrlキーを押した状態か

結論

クロスブラウザ対応はjQuery等のライブラリにお任せしましょう
JavaScriptの記事がありすぎて、混乱してました・・・

[紹介元] jQueryタグが付けられた新着投稿 – Qiita リズムゲームで連打したとき音を重ねて出したい

コメント

記事に戻る

コメントを残す