Twitterのタイムライン上で動くブラウザゲームをJSで作りました

TL; DR

  • JavaScriptでブラウザゲームを作りました。
  • UFOを操作して動物を誘拐するゲームです。
  • TwitterのOGPを設定すると、ツイートに埋め込むことができます。

ss1.png

『Alien Abduction』

こちらからプレイできます。
https://alien.laineus.com/

画面をタップするだけのミニゲーム的なやつです。

ss2.png

ツイートに埋め込む

なんとツイートに埋め込むことができました!

(ぜひリツイートお願いします!)

TwitterのOGPのカードタイプに、playerというものがあり、オリジナルの音声・動画プレイヤーを埋め込むことができます。
これを使ってツイートすると、ツイート内にiframeでマウントされるため、canvasのコンテンツもそのまま動くようです。

playerカードは、他のカードタイプとは異なり、事前の審査に通過する必要があります。
詳しくは下記記事を参考に。

Twitterがしゃべる!?Playerカードの作成方法 - Voicy Tech Blog
http://voicetech.hatenablog.com/entry/2017/05/14/133539

ただし、Twitterのカードのポリシー的にOKなのか怪しいので、削除されたりするかもしれません。
試す際は自己責任でおねがいします。

ゲーム開発用JSライブラリ「Phina.js」

ゲームの開発に使ったライブラリを紹介します。

公式サイト
http://phinajs.com/

JavaScriptでCanvasのゲームを作るための和製ライブラリです。

ゲーム進行や描画まわりの管理といった基盤となる部分や、当たり判定などさまざまなゲームに汎用的に使える機能などが提供されます。

ソースコード

GitHub
https://github.com/laineus/alien

BGM

BGMは、こちらのブラウザで動作する作曲ソフトでさくっと作りました。

http://www.audiosauna.com/

ほんとはCubaseというWindows用のちゃんとした作曲ソフトを持っているんですが、最近Linux以外のOSを使いたくなさすぎて↑を使いました。

2contribution

これは面白いですね。
ゲームのプロモーションとか事前登録促進とかに使えそうです。

ちなみに事前審査はゲームそのものを提出したのでしょうか、
それともダミーでしょうか。
※裏っぽい話ですみません。

591contribution

@YuK1Game
ありがとうございます!

詳しくは分からないのですが、ogpに設定されたURLについてドメイン単位でチェックされ、コンテンツはこちらからは指定しませんでした。
審査に出したときも、ogpの設定が間違っていて正常に動かなかったにもかかわらず審査に通ったので、コンテンツをチェックしている感じはありませんでした。
また、ドメイン単位なので、一度審査に通ればこのドメイン上で他のコンテンツを審査なしで配信できそうです。

一応コンテンツについて、ウィンドウサイズにフィットしなければいけない、音が出る場合最初は消音でなければいけない、のようなルールはあるようです。

ちなみに、審査から3日後に承認されました。

Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account log in.