jsdo.it WebSocket Controller をいますぐためしてみよう!

コントローラーをためしてみよう!

スマートフォンのブラウザとPCのブラウザをWebSocketで
接続するコントローラーです。
jsdo.itならWebSocketを用いたゲームをいますぐ作成できます。

お手持ちのスマートフォンで、右のQRコードを読み取るか、
--
にアクセスしてください。

(接続が切断された場合は、ページを再読み込みしてください。)

対象ブラウザ:

  • Chrome
  • Safari
  • Firefox

Google Chrome, Safari, Firefox(各ブラウザ最新版)

スマートフォン対応状況:

  • iPhoneiOS 4.2 -(Mobile Safari)
  • Google PlayAndroidではFirefox、Google Chromeを用いてアクセスしてください.

サンプルコードをForkしてつくろう!

「Fork」ボタンを押すと、サンプルコードを元にしてコード作成を開始できます。

コントローラーを扱うためのjsdoitController.jsの詳しい使い方はページ下で解説しています。

jsdo.it WebSocket Controller を使ったコードを書く

「+」ボタンから読み込みます。

コード編集画面のJavaScriptタブにある「+」ボタンから jsdoitController.js を読み込みます。

以下のメソッドで jsdoitController.js を初期化することで、jsdo.it WebSocket Controller を使えるようになります。

jsdoitController.initialize();

jsdoitController.js の使い方

jsdoitController.js を読み込むと独自のイベントが発火するようになります。

window.addEventListener("Abuttondown", function(event){

    // Aボタンが押された時の処理

}, false);

window.addEventListener("Abuttonup", function(event){

    // Aボタンが離された時の処理

}, false);

以下がjsdoitController.jsで発火するようになるイベントの一覧です。

Abuttondown, AbuttonupAボタンが押されたとき、離されたとき
Bbuttondown, BbuttonupBボタンが押されたとき、離されたとき
startbuttondown, startbuttonupスタートボタンが押されたとき、離されたとき
topbuttondown, topbuttonup上ボタンが押されたとき、離されたとき(スティックの角度が70以下、290以上のとき)
bottombuttondown, bottombuttonup下ボタンが押されたとき、離されたとき(スティックの角度が110 ~ 250 のとき)
leftbuttondown, leftbuttonup左ボタンが押されたとき、離されたとき(スティックの角度が200 ~ 340 のとき)
rightbuttondown, rightbuttonup右ボタンが押されたとき、離されたとき(スティックの角度が20 ~ 160 のとき)
movebuttondown押されている方向ボタンが1つ以上になったとき、スティックを動かし始めたとき
movebuttonup方向ボタンが全て離されたとき、スティックを動かし終えたとき
stickstartスティックを動かし始めたとき
stickendスティックを動かし終えたとき
stickmoveスティックを動かしているとき

また、各ボタンの状態や、スティックの値を以下のようにして取得できます。

var AbuttonState = jsdoitController.buttonState.Abutton;

console.log(AbuttonState); // example -> true

var stickPower = jsdoitController.stickState.power;

console.log(stickPower); // example -> 70

以下がjsdoitController.jsで取得できるようになる値の一覧です。

jsdoitController.buttonState.AbuttonAボタンが押されているか (true / false)
jsdoitController.buttonState.BbuttonBボタンが押されているか (true / false)
jsdoitController.buttonState.startbuttonSTARTボタンが押されているか (true / false)
jsdoitController.buttonState.topbutton上ボタンが押されているか (true / false)
jsdoitController.buttonState.bottombutton下ボタンが押されているか (true / false)
jsdoitController.buttonState.leftbutton左ボタンが押されているか (true / false)
jsdoitController.buttonState.rightbutton右ボタンが押されているか (true / false)
jsdoitController.stickState.useスティックが動かされているか (true / false)
jsdoitController.stickState.degスティックの角度(0 ~ 360)
jsdoitController.stickState.powerスティックの傾きの強さ(1 ~ 100)
jsdoitController.stickState.powerXスティックのX方向の強さ(-100 ~ 100)
jsdoitController.stickState.powerYスティックのY方向の強さ(-100 ~ 100)

以下のように引数でオプションを追加すると、コントローラー接続後に実行されるcallback関数を持たせることができます。

jsdoitController.initialize({

    callback : function() {
        // コントローラー接続完了後に実行したい処理
    }

});

開発時には以下のようなオプションを追加すると、WebSocketでのイベントがオフになり、
キーボードで発生するイベントのみになります。

jsdoitController.initialize({

    webSocketEvent : false

});

キーボードのボタンわりあては以下のようになっています。

j, EnterAボタン
k, escBボタン
n, spaceSTARTボタン
w, 方向キー上上ボタン
s, 方向キー下下ボタン
a, 方向キー左左ボタン
d, 方向キー右右ボタン

Recommendations

Facebook page