WWW Watch

エレベーターアクションを CSS で再現

JamGraffiti さんの 「画像の使用を極力控えてかっこいいCSSデザインをやってみよう大会」 に 2つめの作品投稿をしてみました。前回は 「画像を一切使...

JamGraffiti さんの 「画像の使用を極力控えてかっこいいCSSデザインをやってみよう大会」 に 2つめの作品投稿をしてみました。前回は 「画像を一切使用しない部門」 で応募しましたが、今回は 「画像を極力控える部門」。

画像使って、同じようなデザインを作っても面白くないので、今回は遊んでみました。たまたま昔ハマったゲーム、「エレベーターアクション」 (歳がバレる......) を思い出したので、その画面を再現する作品にしてみました。

Elevator style

題して 「Elevator style」 前回同様 IE だとちょっと見た目が違います (汗

今回のキモは下記の点。

  1. ファミコン版エレベーターアクションの画面をベースに
  2. とにかくエレベーターを作る
  3. 見やすさとか使いやすさとかは二の次
  4. 古いブラウザとか知らない
  5. IE って何?

「画像を極力控える部門」 で使用できる画像は、50px × 50px 以内の画像を 5つまでなので、画像をどこに使うかが問題。結局、主人公のスパイ、ドアとガードマンのセットを 2種類、電灯とエレベーターのシャフトで計 5つになりました。

本当は、一番下に脱出用の車を配置したかったけど諦めた。エレベーターシャフトを画像以外でなんとかできないかなと色々考えてみたけど、面倒なので結局画像にした結果です。

Firefox とか、Opera の最新のやつで見ていただければ、画面のスクロールに合わせてエレベーターが動きます。IE7 だと、機密書類のある赤い扉がでないのでクリア不能(謎。IE6?何それ。

エレベーターの中のメニューがコントラスト的に見にくいと思いますが、そこはあえて。各画像は実際のゲーム画面を参考に作ったので、著作権とか大丈夫なのか分かりませんが、エレベーターアクションリスペクトなのでタイトーさんも許してくれるよきっと。

しかし、エレベーターアクションを知らない人にはまったく意味わからん作品ですね。

Recent Entry

全ての記事一覧を見る

Hot Entry

逆引きおすすめエントリー