Am I beautiful?

| コメント(2) | トラックバック(0)
cm.png きれいなお姉さんを蚊の襲撃から守りぬけ!!
迫りくる蚊をクリックでつぶし、できるだけお姉さんが刺されないように守ってください。

Javascriptを一切使用せず、HTML5とCSS3でクリックゲームを作りました。
以前CSSでイライラ棒ゲーム「宝島」(リンク)を作りましたが、HTML5やCSS3の登場でもっとゲームらしいものができるのではと思い、勉強を兼ねて挑戦。
思った以上にゲームらしくなっていると思います。

ポイントはinputタグとCSS3アニメーションの組み合わせですね。
inputタグで状態遷移やユーザー入力を処理、CSS3アニメーションでオブジェクトの動作を制御しています。

ss1.png

まあ、今回は勉強と遊びを兼ねてJavascriptを使用しないで作りましたが、正直めんどいです。
実用的にはJavascriptも組み合わせて使うことをお勧めします(^^
せっかくなので画像を使用せずSVGにしようと思ったのですが、SVG重すぎ!!、あきらめました(涙
技術的にはHTMLとの相性も良いし好きなのですが、もう少し高速に描画できるようにならないと複雑な絵は厳しそうです。

ss0.png
Play

2013/02/11 追記
未対応ブラウザにはその旨を表示するようにしました。

トラックバック(0)

トラックバックURL: http://murakya.net/mt/mt-tb.cgi/47

コメント(2)

街を歩くお姉さんの絵が表示されているだけで、蚊なんて出てこないんですが…。
BGMは流れているので、特にPCが重くて処理落ちしている、などではないようです。何かゲームを開始するための操作があるんでしょうか?

コメントする

オリジナルゲーム

オンラインツール