html - 携帯電話のブラウザーでの html5 キャンバスのサポート

Question

シンプルな html5 ベースのゲームを開発しています。このゲームでは、左、右、上、下の矢印 (keydown イベント) の 4 つのコントロール キーがあります。ラップトップのブラウザでは問題なく動作しました。このゲームを携帯電話向けにカスタマイズするのが好きです。携帯電話(Android,IOS)での読み込み入力に適したイベントは何ですか? モバイルブラウザのキャンバスの標準寸法(高さと幅)は?

Answer 1

タイトルへの回答:
キャンバスは、iOS および Android フォンでグローバルにサポートされています。詳細については、caniuse.com を参照してください: http://caniuse.com/#feat=canvas

メッセージへの回答:
モバイルにはキーボードがありません。
ポインター イベント API (およびその polyfill ) を使用して仮想ジョイスティックを作成できるキーについては、このチュートリアルで詳細を確認してください: http://www.codeproject.com/Articles/594186/Create-a-Cross-browser-Touch-based -Joystick-with-Hand-js

Answer 2

コントロール

これは、創造性を発揮できる場所です。仮想キーパッドが機能するか、画面をセクションに分割する可能性があります。左のセクションは左、右のセクションは右など、ゲームの種類によって異なります。

仮想キーパッドの非常に優れたチュートリアルは、こちらにあります。デモをチェックしてください！

イベント

イベントの追加方法については、アップルのガイドをご覧ください。

基本的には次のとおりです。

element.addEventListener("touchstart", touchStart, false);
element.addEventListener("touchmove", touchMove, false);
element.addEventListener("touchend", touchEnd, false);
element.addEventListener("touchcancel", touchCancel, false);

または、 hammerJSのようなライブラリをお勧めします。タッチ イベントを処理し、ジェスチャを簡素化します。

画面サイズ

Appleは簡単です。320×480、640×960、640×1136があります

Android はもう少し複雑です。最良の答えは、Google が提供する次のページをチェックすることです: Screen size analytics .

それらは一般的に次のカテゴリに分類されます

特大画面は 960dp x 720dp 以上
大画面は 640dp x 480dp 以上
通常の画面は 470dp x 320dp 以上
小画面は 426dp x 320dp 以上