1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

【obniz】自分だけのコントローラで遊べるPvPブラウザゲームを作った

Posted at

はじめに

obnizを使えば,HTMLとJavaScriptでかんたんにマイコンを扱うことができてしまいます.さらにobnizはオンラインで書き込んで実行できるので,買ってきて即IoT!なんてことも可能です.
product_obnizboard.jpg
(https://obniz.io/ja/products)

とはいえ,アイデアのほうはそう簡単に出てこないものです(僕がそうでした:fearful:).

そこで,いろんな人がobnizを触るきっかけになればいいなと思い,obnizを使って遊べる簡単な対人ゲームを作ってみました!
obniz-park
この記事では,obniz IDによるログインの実装と,ゲームの楽しみ方について書きます.

obniz IDによるログイン

今回作ったゲームの対象ユーザーは「obniz boardを持っている人」なので,専用のログインフォームをつけてみました.
login.png
obniz boardをお持ちの方はご存知かと思いますが,obniz boardにはobniz IDという固有の数字がそれぞれに割り当てられています.また,アクセストークンを発行することで不正な利用を防ぐことも可能です.
これらを入れるだけでゲームは始められます.obniz boardが入場チケットになっているようなイメージで,発想次第ではもっと面白いことができそうな気がしています!
この仕組みは以下のような流れで作られています.

スクリーンショット 2019-07-29 11.54.16.png

今回のようにユーザの記録をデータベースに保存するなどの永続化をしない場合,obnizへの接続だけで本人確認が完了します.つまり,クライアント(JavaScript)だけでログインが作れてしまいます!
実際のコードは以下のようになっています:

login.js
obniz = new Obniz("<OBNIZ_ID>", {
    auto_connect: false,
    access_token: "<ACCESS_TOKEN>"
});
tryConnect(obniz);

// 接続判定をする関数
async function tryConnect(obniz) {
    let connected = await obniz.connectWait();
    if (connected) {
        // ログイン成功処理
    } else {
        alert("ログインに失敗しました。やり直してください。");
        // ログイン失敗処理
    }
}

公式ドキュメント(obniz connection)によると,new Obniz()時にauto_connectfalseにしておくことで,自動接続を切ることができます.
これに加え,obniz.connectWait()を使うことで,接続可能かどうかを真偽値で判断できます.今回はこれを利用して接続判定を行いました.

遊び方

obniz-park
遊ぶ時に必要なものは:

  • obniz
  • 使いたいセンサー
  • obnizとセンサーを繋げるために必要なコード片

だけです.
ログイン後のゲーム画面は以下のようになっています.パックマン:no_mouth:みたいなイメージです.
park.png
画面上部の灰色のエリアがゲーム画面で,水色の正方形が自機となっています.自機を動かして黄色いドットに触れていくことでスコアが上がっていきます.このスコアは同時に接続しているユーザと競うことができ,スコアとランクがゲーム画面下部に表示されます.
どうやって自機を操作するのかは,あなたの持っているセンサーと書くプログラム次第です.画面下部のエディタでプログラミングを行います.そんなに難しいことはなく,センサ値と上下左右の移動を結びつけるだけです.初期状態ではジョイスティックを接続した場合のプログラム例が記入されているので参考にしてみてください.エディタ上部のAPPLYボタンでプログラムを反映でき,RESETボタンで書き込んだプログラムを解除できます.
具体的なコード記述の説明はこちらのREADMEから読めます.
他にも,ジャイロセンサを使って傾けて動かすなど,面白そうなコントローラが作れそうです.GitHubにいくつかサンプルも公開しています.
重たい処理を書くとブラウザが止まってしまう恐れがあります.自己責任でお願いします:frowning2:

おわりに

obnizがインターネットに簡単に繋げる性質を使って,obnizユーザがオンラインで集まってワイワイできるようなものを作ってみたいという試みでした.
実際にやってみていただけるとわかりますが,PvPのためのWebSocket通信送受信による操作ラグが結構あってストレスフルです.もっとうまい実装ができればよかったのですが…要勉強です.
お読みくださりありがとうございました.指摘やアドバイスなどありましたらコメントなどよろしくお願いします.

1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?