先日リリースされた「HTML5杯」は、なんとも不思議なウェブコンテンツです。「100m連打」と銘打たれたゲームをはじめ9つのミニゲームを楽しめます。
タイトルを見ればHTML5を活用していることが分かります。ドット絵が動き回るのも、見ていて郷愁を誘います。ただ、ひとつの想いがふつふつと胸に湧き上がります。
なんなんだ、これは。分からないことは抱え込まずに人に聞きなさいという言葉もあります。そこで、先人の教えを守り、直接聞いてみることにしました。問い合わせたのは、開発を手掛けたカヤック。質問に対しすぐさま返ってきた答えは熱く、熱く、熱い開発者の想いでした。
以下、それぞれのゲームに対するコメントです。
■キーボードを連打してライバルと競う「100m連打」には、漢（おとこ）のロマンがあるらしい
終わった後に息切れしてしまう。そんな競技となることを目指して、ライバル走者のレベル調整を何度も繰り返しました。そう、競技なんですよ。我々が作ったのは競技です。
■ブラウザのウィンドウの大きさで飛距離を競う「解像度砲丸投」には、パラパラアニメの魂が込められているらしい走者の自然な走りを実現させるために、divタグで構成された各パーツを細かく指定しています。CSSアニメーションと融合したその姿はまさに陸上選手そのもの。狙ってもらいたいのはもちろん「人類最速」の称号です。
CSSで描いた絵を、あえてトランジションを使わずにパラパラマンガでアニメーションさせています。
大量のdivタグとCSSと向き合いながら、ひとコマひとコマ別々に書いています。CSSファイルはキャラクターを数コマ書くだけで1000行を軽く超えています。
■ネット環境の回線速度で競う「ファイル重量挙げ」には、描写へのストイックな追求があるらしいブラウザサイズでスコアが決まってしまう理不尽さとシュールさが肝心なコンテンツなので、音にこだわり、鉄球が落ちるときに土が盛り上がったりする細かいギミックにももちろん気を配っています。
この競技はだれもが気になる回線速度で勝負する画期的な種目です。合計数メガ～数十メガバイトの画像ファイルを制限時間内に持ち上げられるか？ ただし、ユーザーは見守ることしかできません。
■スクロールする速さで競う「スクロール競歩」は、10000ピクセルの壮絶な競技らしい選手はもちろんダンベルも画像は一切使わずCSSで描画しています。画像を使うなどという甘い考えは到底許されません。もちろん描画に使うタグも男らしく＜div＞だけです。＜section＞や＜article＞なんてハイカラなタグは必要ありません。
CSSアニメとdivの組み合わせで再現しています。
■キーボードを叩くリズムで競う「リズム馬術」のドット絵では、格調の高さを追求したらしい無駄にシビアな判定と、ライバルの意外な速さがユーザーに競争心を煽ります。スクロールバーを丁寧に操り、長距離10000ピクセルのサバイバルを最速で歩き抜けてください。
■着地のタイミングでクリックする「ウィンドウが大車輪」では、1ピクセルごとに手動で調整したらしい馬術は馬に乗ってその動きの正確さや美しさを競う競技。競技に望む際、選手は正装を着用し、愛馬精神をもって望む格調高いスポーツです。その美しさと厳しいルールをあわせもつ馬術を、CSSの美しいアニメーションとゲームの難易度によって表現してみました。
CSSアニメーションをふんだんに用いて体操選手の動きを再現しています。ツールには頼らず1ピクセルずつ手動で表示位置を調整しました。タイミングの同期ももちろん手動で同期しています。
■チェックボックスを的に見立てた「チェックボックス射撃」では、絶対配置を使わずに構築したらしいゲームを始めればあなたは体操選手です。世界の中心まであなたを導きます。世界はあなたを中心に回り出すのです。
目標をセンターに入れてクリック。
角丸＋絶対配置＋マスクという条件下で見られることを前提とした景色は絶対配置を使わずに構築し、その上で外界との整合性をとっています。
キーボードの連打が「競技」ってなんだよとか、「砲丸投げ」じゃなくて「ハンマー投げ」だろうとか、格調高さを目指した「馬術」もやっぱりドット絵なのかとか、そういった突っ込みは野暮というもの。ものは試しのたとえもありますが、一度下記リンクをチェックしてみてください。
ちなみに、HTML5杯はChromeにのみ対応しています。
（年吉聡太）
