2048リモートコントローラー

2048ゲームがちょっと流行ったところで、

http://gabrielecirulli.github.io/2048/

今更ながらソルバーを作ったりするのも芸がないので、オリジナルのサイトのコンテンツをよそからリモートコントロールできるようにしてみました。

http://lively-web.org/users/ohshima/lively-2-webpage.html

を開け、Generate connect codeのボタンを押した後でdrag this to your bookmark barのリンクをブックマークバーにドラッグします。その後http://gabrielecirulli.github.io/2048/を別のタブで開き、そのタブが表示されているところで先ほどブックマークに登録したブックマークレットを押します。これでLivelyの方に戻るとしばらくして右にあるラベルが"connected"に変わるので、open remote workspaceのボタンを押します。

後は左上の"2"を押すたびに、ゲームの画面が更新されるようになる、はずです。少なくともChromeであれば。

LivelyはSmalltalkみたいな環境なので、リモートコントローラ側の機能をどんどん拡張していけるところが面白いところですし、Robert Krahnの作ったlively2livelyという仕組みがあるので、複数のウェブサイトを自由につないで遊ぶ、ということができるわけなのです。

難しかったところは、KeyboardEventを作った後でそのフィールドに正しい値をセットするところでした。whichプロパティなどはリードオンリーなので、簡単には変えられません。結局のところsetterとgetterを定義してかわす、というのが定番のようで、私のコードは

(function() {var v = document.createEvent("KeyboardEvent"); Object.defineProperty(v, "keyCode", {get: function() {return parseInt(this.keyIdentityfer.slice(2), 16)}}); Object.defineProperty(v, "which", {get: function() {return parseInt(this.keyIdentifier.slice(2), 16)}}); v.initKeyboardEvent("keydown", true, true, window, ' + k + ', 0); document.getElementsByClassName("container")[0].dispatchEvent(v)})()

みたいになっています。おそろしや。