htsign's blog

ノンジャンルで書くつもりだけど技術系が多いんじゃないかと思います

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

CSSで乱数って作れないかなーと思って「CSS 乱数」でググってたら引っかかったTwitterのツイートから知ったGithubのプロジェクト(d:id:ndruger:20110428:1304021590)があったけど、動作環境がWebkitだけなのも寂しかったのでForkしてIE10以上にも対応させてみた。
htsign/css-game-modified · GitHub


本当はFirefoxにも対応させたかったけど、ラジオボタンを非表示にする上手い方法が浮かばなかったので放置することに。
(参考: 605985 – -moz-appearance:none doesn't completely work on checkboxes and radios
そりゃ大改造すればできるんだろうけどそこまでのモチベーションが湧かなかった。


IEではF5リロードしてもチェックボックスラジオボタンなどのフォーム状態がリセットされないことが多いので、そこだけはやむなくJavaScriptに頼ってしまった。


CSSappearanceIEでは対応していないので、これではラジオボタンを消せない。
代替手段として、Windows Storeアプリ拡張のCSS擬似要素が用意されていたのでこれを用いた。
クイックスタート: コントロールのスタイル (JavaScript と HTML を使った Windows ストア アプリ) (Windows)

具体的には

.enemy::-ms-check {
    display: none;
}

とすればいい。
-ms-checkの部分が、IEが描画するコントロールに該当するようだ。

あとはCSSのコード全体から-webkit-を消していけば終わり。



ちなみに肝心のCSSで乱数については実現不可能で、擬似的にやるにしてもかなり特殊な場面でしかできないみたい…。