Slack上でインタラクティブに倉庫番を遊べるhubot-slack-soukobanを作った - MANA-DOT
Slack 上でリアクションを操作ボタンとして利用して倉庫番を遊べる、 hubot-slack-soukoban を作りました。 その昔、 Hubot-slack で絵文字でアニメーションする8パズルゲームができるbotを作った という記事を書きました。 この記事では、Slackの編集をbotに叩かせまくり、Slack上で動くパズルゲームを作ったことを紹介しました。 しかしこのパズルゲームには謎のコマンド列をタイプしてbotとやり取りしなければ遊べないという弱点がありました。 そこで今回、Slackのリアクション機能で配置されるボタンを操作ボタンとして利用することで、よりプレイヤーが直感的に遊べるゲームをSlack上に実現しました。 soukoban という文字列に反応してbotがランダムに選ばれた倉庫番のマップと、操作するためのリアクションボタンを表示します。 操作法は上記画像のままです
JavaScriptで変な形のクリック領域を作るとき、svgが便利 - MANA-DOT
昨日のVieraのリモコン、リモコンを作りたかったのもあるけど、svgとJavaScriptを組み合わせた簡単なプログラムを試しに書いてみたかったというのがあります。 html5ではsvgをhtml中に埋め込んで、更にそのsvgにcssでスタイルを当てたり、JavaScriptでいろいろやったり出来ます。 この時、要素のクリック領域は要素の形そのままなので、昨日のリモコンのような変な形のクリック領域を簡単に作ることが出来ます。 以下の画像の色のついた箇所にマウスを乗せたりクリックをしたりしてみてください。 100km 画像はWikipediaより。 上記の画像は、クリックできる箇所に .svg-area というクラス名と、data-name属性に市町村の文字列が入っており、以下の様なcss/jsによって動作を実現しています。 path.svg-area { cursor: pointer;
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
