最高のコンピューティング環境とは?

2011-04-28

[][]javascriptを使わず、html + cssだけでクリックシューティングゲームを作ってみた

CSSで描かれたぐぬぬ画像などを見てたら、ふとhtml + CSSだけでアクションゲームが作れないかと思ったので作ってみました。

ページ移動すればいくらでも可能ですが、それだとつまらないので、1ページ内で作るという縛りもつけてます。

デモページ

http://ndruger.lolipop.jp//hatena/20110429/css_game/css_game.htm

Chrome / Safariの最新版で動きます。Firefox / IEだと動きません。

ソースコード

https://github.com/ndruger/css-game

技術的な説明

アニメーションCSS Animationを使うだけなので簡単ですが、問題は状態管理です。

アクションゲームを作るには、基本的に下記の要素が必要です。

  • 1. ユーザー入力に対する状態の変更
  • 2. 状態の保持
  • 3. 状態に応じて見た目を変更

これらをhtml + CSSで実現する方法を考えます。

"1. ユーザー入力に対する状態の変更"を実装するには、:hover, :activeなどが思い浮かびますが、それらでは"2. 状態の保持"ができません。

よって、疑似クラスの状態変化が継続する、:visited, :focus, :checkedなどが使えそうです。

最初は、aタグフラグメントジャンプ()を使って:visitedで状態を変えようとしたのですが、最近のブラウザは訪問履歴読み取り防止のため、:visitedで有効なプロパティがcolorなどに限られていて、ゲームに使うのは難しいと分かりました。

:focusは別な場所をクリックすると解除されるのであきらめました。

残ったのは:checkedですが、inputタグのtype=radio, checkboxならユーザー入力に応じて状態を記憶できるので、これを使います。


次に"3. 状態に応じて見た目を変更"の実現ですが、inputタグのtype=radio, checkboxを使った場合、その要素にどうやってキャラクター画像とマップさせるかが問題です。

  • CSSには親・祖先セレクタがないので、input:checkedの親要素でbackground-imageプロパティを適応できない
  • inputタグのtype=radio, checkboxはbackground-imageプロパティが反映されない
  • inputタグはDHTMLで無理矢理付けない限り子要素を持てない -> 子要素で画像を表示するなどのテクニックができない

この問題を解決するために、CSS3のappearanceプロパティを使います。

使っているコンテンツを今まで見たことがないのですが、このプロパティを"-moz-appearance: button;-webkit-appearance: button;"のように指定すると、background-imageプロパティが反映されるようになります。CSS3仕様ではこの挙動は明示されてません。


ここまでいけば後は簡単です。

アニメーションしている牛がクリックされて:checkedが有効になると、牛の取得アイコンとして適切なbackground-image, positionに変えてしまいます。

ついでにスコアを表示するため、type=radioの同じnameの要素を作って、ユーザークリックでそちらは:checkedが解除されるようにします。

そして、:checkedでレイアウトが変更され、スコアの画像がずれるようにすると、牛のクリックごとにスコアが上がるようにできます。

boaoaboaoa 2013/08/04 22:52 うーん、すばらしい…

スパム対策のためのダミーです。もし見えても何も入力しないでください
ゲスト


画像認証

トラックバック - http://d.hatena.ne.jp/ndruger/20110428/1304021590