「ブラウザ」タグアーカイブ

映画のワンシーンのような画像解析ごっこができるブラウザゲーム Enhance.computer

ENHANCE.COMPUTERは、ウェブブラウザで遊べるシンプルなゲーム。

“Begin Investigation”をクリックして調査を開始すると、ノイズが載った画像が右側に表示されます。

この画像のどこかに隠されたコードを、カウントダウンされる時間内に探し出すのがゲームの目的です。

コードを探すには、”Zoom in”/”Zoom out”で拡大縮小、”Move”で上下左右に画像を動かし、「コードはここだ」と思ったら”Enhance”。ただ、この指示はボタンを押したりコマンドを入力したりではなく、画面(マイク)に向かって叫ぶことで行います。

こちらのツイートは、作者によるプレイイメージ。

https://twitter.com/nicolehe/status/1029721756049666048

元ネタは映画

多数の映画の中に、このような、誰へともなく指示すると画像から何かが見つかる、というシーケンスがあり、そのようなシーンをまとめた動画(Let’s Enhance)もあります。主人公が”Enhance”といえば、たいていの画像から手掛かりは見つかってしまいます。

このENHANCE.COMPUTERを使うことで、こういった映画の主人公の行動を、自宅や会社でも再現できる、というわけですね。

via The Next Web

World Cup Calendar Blocker – ワールドカップの試合時間にフェイクの予定を入れるため(だけ)のサイト

World Cup Calendar Blockerは、サッカーの試合の予定時間に、適当に作られたそれっぽい用事を追加するためだけに用意されたウェブページです。

6月18日 19:00 イングランド対チュニジアの試合時間にあわせた「バザーでデイブの手伝い」というスケジュールを、ワンクリックで Apple, Google, Outlook, Yahoo のカレンダーアプリに登録することができます。(クリック先でどう登録するかは、各アプリ依存です)

これを使って自分の公開カレンダーに予定をいれておけば、ワールドカップ観戦を誰かに邪魔される心配はなくなりますね。

この時期だけに絞った、しかし意外と需要はありそうな、手軽で便利なサービスではないでしょうか。

ただし、このサイトはイングランド代表専用となっています。列挙されている試合はすべてイングランド代表の試合と、決勝までの(作者がイングランド代表の試合に違いないと思っているだろう)試合のみ。

CSSスクロールで(マリオ風)横スクロール、(マリオカート風)キャラクター操作

CSSだけで(JavaScript無しで)動くページを作る、というお題でこんなもの

“A”キーと”D”キーで車が左右に動いています。

こちらが作者のステファン・クックさん(Stephen Cook)による解説ページで、13行のhtml以外はすべてCSS、画像ファイルも使っていないということです。

CSS内に定義したデータから絵を描くのは、グラデーションとbox-shadow を使っています。1ピクセルごとに色を指定しているんですね。

キー入力の方はというと、こちらのCSSだけで検索エンジンを作るという記事(デモはこちら)にあるように、inputフィールドの value 属性に反応させればと思ったそうですが、ユーザーの入力に応じて value の値がアップデートされるということは無く、こちらの検索デモでは1行のJavaScriptを使っていることがわかりました。

クックさんは数週間前に間違ってブラウザのJavaScriptをオフにしてしまい、未だに戻す方法を見つけられていないということで、JavaScript を使わない方法を探さざるを得なかったよう。たいへんですね。

疑似セレクタ :valid, :invalid で、フォームフィールド内のタイプ内容がaを含むかどうかを場合分けし、さらにフォームフィールドにプレースホルダーを表示してるかどうかの :placeholder-shown と併せて、キー入力に応じて3値を見分けることにしたそうです。

レースゲームとして背景が動くところは、アルシデス・ケイロスさん(Alcides Queiroz)が公開していたマリオ風横スクロールにヒントを得たということです。

See the Pen Mario made only with CSS gradients – no JS, no embedded images/data URIs, no external images and using a micro HTML =) by Alcides Queiroz (@alcidesqueiroz) on CodePen.

こちらの解説では、CSSグラデーションで各ピクセルを時間に応じて変化させるというのを全ピクセルに対して行うことで、CSSだけでの横スクロール表示を実現しているようです。ソースコードを見ると、Stylus で描画するスプライトのデータをひたすら大量のCSSコードに展開しているのがわかります。生成後のCSSを見るとすごいことになってます。

via TheNextWeb

AutoMute – ブラウザの音声再生を全部デフォルトオフにできるChrome拡張

AutoMute は、Chrome ブラウザからとにかく音が出ないようにできるブラウザ拡張です。

インストール直後の設定は、あらゆるサイトでの音声がオフになっています。すべてのタブにミュートのマークが表示され、マークをクリックしたり、拡張アイコンのメニューから選択したりすることで、個別に再生を許可することもできます。

YouTube など、サイト側で用意しているミュート機能とは別のレイヤで止まっているため、場合によっては拡張でアンミュートして、動画側でのアンミュートして、としないと聴こえないこともあります。

音楽等が突然再生されたりすると非常に困る、といった職場で働いているような人たちは、保険のために入れるといいのかもしれませんね。絶対にどんな音も鳴らなくていい、ということなら、OSのドライバを止めるとかイヤホンジャックを埋めるとかもありですが、この拡張であれば、音がしても大丈夫なサイトだけ許可したり、どうしても音を聴かなければいけない時だけ設定を変えて聴いたりすることができます。

via LifeHacker via TheNextWeb

ウィキペディアが昔懐かしいテキスト・アドベンチャーに

ケヴァン・デービスさんが公開した Wikipedia: The Text Adventureは、ウィキペディアの情報を元に世界中を回れる1980年代風テキスト・アドベンチャーゲームです。

タイトルからWikipediaにある地名で検索すると、その場所がゲームの開始地点となります。”Tokyo”だとこんな感じ

英語版ウィキペディアのTokyoにある写真が、8bit風の荒い画像に変換されて場面表示されていますね。”Tokyo”の場合は、5枚の写真を組み合わせた画像なので、なんだかわからないことになっていますが。

ゲームプレイは、Zork などのテキストアドベンチャーでおなじみ、テキスト入力です。”go north”(北へ行く)とやると、東京から北の座標を持つ別のウィキペディアの項目に移動できます。なぜか「西新宿五丁目駅」

東西南北や斜め方向へ移動でき、新しい場所ではそのウィキペディアの項目を元に今の場所が説明されます。元の方向に戻ろうとしても必ずしも前いた場所には戻れなかったりする理不尽さもあります。

> examine tower

など、examine(詳しく調べる)コマンドを使うと、その場所にあるもの(もないもの)も調べられて、Wikipediaから引っ張ってきた情報を使って何かしら返してくれます。take コマンドで拾えますし、inventory コマンドで持ち物の一覧を見ることもできます。


(東京タワーを調査して拾ってみた)

focus コマンドで8bit化される前の元画像を表示したり、wiki コマンドでウィキペディアの元ページを開いたりもできます。このあたりは help で出来ることを調べられますが、そのあたりも昔のアドベンチャーゲームそのままですね。

share でツイッター共有のリンクが出てくるのは昔無かった今風の機能でしょう。

ゲーム内容はウィキペディアの膨大な項目データを使って機械的にその場で生成されているため、テキスト・アドベンチャーとしては史上最大の広がりを持っていると言えるでしょう。今はそこにストーリーもゴールもありませんが、もう少し技術が進歩すると、ちょうど良いトリックや謎、目的やゴールなどまで生成できるようになったりするのかもしれません。

via PC Gamer

Snakisms – ヘビゲームで哲学を表現

SNAKISMS は、古き良きテレビゲームの一つであるヘビゲームをベースに、様々な哲学論・主義(ism)をテーマとしたバリエーションをつけたブラウザゲームです。

最初に、どのイズムで遊ぶかを選ぶと、そのイズムを表現したヘビゲームが始まります。

メニューの種類は上から以下の通り

  • anthoropomorphism (擬人化) リンゴも動く
  • apocalypticism (黙示信仰) 突然の終わり
  • asceticism (修徳主義) 欲望は悪、食べないと点
  • capitalism (資本主義) リンゴだってタダじゃないんだ
  • casualism (偶然論) すべては偶然(?)
  • conservatism (保守主義) オリジナル
  • determinism (決定論) 未来はすべて決まっている
  • dualism (二元論) カーソルは蛇の体を操るが、蛇の心を操るのは心
  • existentialism (実存主義) Wikipedia見たけどわからない
  • holism (全体論) すべてが蛇と一緒に動く
  • idealism (観念論) ヘビゲームを遊んでいると思え
  • monism (一元論) ヘビが神
  • narcissism (自己中心主義) ゲーム終了で新タブが開く(?)
  • nihilism (虚無主義) 蛇もりんごも何もない。メニューに戻ることすらできない
  • optimism (楽観主義) 世界はりんごだらけ。食べても成長しないが
  • pessimism (厭世主義) 世界は閉じていて、りんごはどこか他所に
  • positivism (実証主義) 見えているものしか信じない
  • post-apocalypticism (終末後主義) 荒廃した世界
  • romanticism (ロマン主義) りんごを食べるたびになんか立派なことを言う
  • stoicism (禁欲主義) 壁で死なない(?)
  • utilitarianism (功利主義) トロッコ問題(5人助けるなら1人死ぬのは可)

Hacker NewsのコメントやWikipedia から、なんとなくそれぞれの主義がどういうものか、それが各ゲームのシステムにどう反映されているか、わかったようなわからないような。

via Hacker News