• GIZMODO
  • FUZE
  • DIGIDAY
  • gene
  • gene
  • cafeglobe
  • MYLOHAS
  • Glitty
  • roomie
  • machi-ya
  • GIZMODO
  • DIGIDAY
  • gene
  • cafeglobe
  • MYLOHAS
  • Glitty
  • machi-ya
  • roomie

ライフハッカー編集部  - ,,  06:00 PM

謎のゲーム「HTML5杯」にかける開発者の想いが熱すぎる

謎のゲーム「HTML5杯」にかける開発者の想いが熱すぎる

120709-html01.jpg


先日リリースされた「HTML5杯」は、なんとも不思議なウェブコンテンツです。「100m連打」と銘打たれたゲームをはじめ9つのミニゲームを楽しめます。

タイトルを見ればHTML5を活用していることが分かります。ドット絵が動き回るのも、見ていて郷愁を誘います。ただ、ひとつの想いがふつふつと胸に湧き上がります。

なんなんだ、これは。

分からないことは抱え込まずに人に聞きなさいという言葉もあります。そこで、先人の教えを守り、直接聞いてみることにしました。問い合わせたのは、開発を手掛けたカヤック。質問に対しすぐさま返ってきた答えは熱く、熱く、熱い開発者の想いでした

以下、それぞれのゲームに対するコメントです。

 


■キーボードを連打してライバルと競う「100m連打」には、漢(おとこ)のロマンがあるらしい

120711html-100m.jpg

終わった後に息切れしてしまう。そんな競技となることを目指して、ライバル走者のレベル調整を何度も繰り返しました。そう、競技なんですよ。我々が作ったのは競技です
走者の自然な走りを実現させるために、divタグで構成された各パーツを細かく指定しています。CSSアニメーションと融合したその姿はまさに陸上選手そのもの。狙ってもらいたいのはもちろん「人類最速」の称号です


■ブラウザのウィンドウの大きさで飛距離を競う「解像度砲丸投」には、パラパラアニメの魂が込められているらしい

120711html-hogan.jpg

CSSで描いた絵を、あえてトランジションを使わずにパラパラマンガでアニメーションさせています。 大量のdivタグとCSSと向き合いながら、ひとコマひとコマ別々に書いています。CSSファイルはキャラクターを数コマ書くだけで1000行を軽く超えています。
ブラウザサイズでスコアが決まってしまう理不尽さとシュールさが肝心なコンテンツなので、音にこだわり、鉄球が落ちるときに土が盛り上がったりする細かいギミックにももちろん気を配っています。


■ネット環境の回線速度で競う「ファイル重量挙げ」には、描写へのストイックな追求があるらしい

120711html-juryo.jpg

この競技はだれもが気になる回線速度で勝負する画期的な種目です。合計数メガ~数十メガバイトの画像ファイルを制限時間内に持ち上げられるか? ただし、ユーザーは見守ることしかできません
選手はもちろんダンベルも画像は一切使わずCSSで描画しています。画像を使うなどという甘い考えは到底許されません。もちろん描画に使うタグも男らしく<div>だけです。<section>や<article>なんてハイカラなタグは必要ありません。


■スクロールする速さで競う「スクロール競歩」は、10000ピクセルの壮絶な競技らしい

120711html-kyoho.jpg

CSSアニメとdivの組み合わせで再現しています。
無駄にシビアな判定と、ライバルの意外な速さがユーザーに競争心を煽ります。スクロールバーを丁寧に操り、長距離10000ピクセルのサバイバルを最速で歩き抜けてください。


■キーボードを叩くリズムで競う「リズム馬術」のドット絵では、格調の高さを追求したらしい

120711html-joba.jpg

馬術は馬に乗ってその動きの正確さや美しさを競う競技。競技に望む際、選手は正装を着用し、愛馬精神をもって望む格調高いスポーツです。その美しさと厳しいルールをあわせもつ馬術を、CSSの美しいアニメーションとゲームの難易度によって表現してみました。


■着地のタイミングでクリックする「ウィンドウが大車輪」では、1ピクセルごとに手動で調整したらしい

120711html-daisharin.jpg

CSSアニメーションをふんだんに用いて体操選手の動きを再現しています。ツールには頼らず1ピクセルずつ手動で表示位置を調整しました。タイミングの同期ももちろん手動で同期しています。
ゲームを始めればあなたは体操選手です。世界の中心まであなたを導きます。世界はあなたを中心に回り出すのです


■チェックボックスを的に見立てた「チェックボックス射撃」では、絶対配置を使わずに構築したらしい

120711html-shageki.jpg

目標をセンターに入れてクリック
角丸+絶対配置+マスクという条件下で見られることを前提とした景色は絶対配置を使わずに構築し、その上で外界との整合性をとっています。


キーボードの連打が「競技」ってなんだよとか、「砲丸投げ」じゃなくて「ハンマー投げ」だろうとか、格調高さを目指した「馬術」もやっぱりドット絵なのかとか、そういった突っ込みは野暮というもの。ものは試しのたとえもありますが、一度下記リンクをチェックしてみてください。

ちなみに、HTML5杯はChromeにのみ対応しています。


HTML5杯

(年吉聡太)

 

  • ,,,,, - By

    香川博人

    LIKE

    2020年に向けて進むキャッシュレス化。 企業にとっての「電子決済」のメリットとは?

    Sponsored

    2020年に向けて進むキャッシュレス化。 企業にとっての「電子決済」のメリットとは?

    2020年に向けて進むキャッシュレス化。 企業にとっての「電子決済」のメリットとは?

    先日、政府は2017年度から公共料金や備品経費の支払いを全面的に電子決済にすることで、30億円の人件費削減が期待できるという発表をしました。 電子マネーやクレジットカード、ネットバンキングの普及により、私たちは現金だけではなく、時間と手間のかからない電子決済を活用する機会が増えていますが、それは企業や法人にとっても大きなメリットがあるようです。 そこで今回、現金決済から電子決済へとキャッシュレス  05:00 PM

MORE FROM LIFEHACKER

powered by
    
    
    
  

Kotaku

Recommended

© mediagene Inc.