敵が破壊される(CSS Sprite)
CSS Spriteというものがあることを知ったので、画像差し替えの方法を変えてみる。
これだと、オープンアプリでSpriteクラスを使うのとだいぶ近い。
比較検討が面倒なので、先頭の方法1をベースにする。
スタイル
.sprite{ overflow:hidden; position:absolute; width:32px; height:32px; } .sprite img{ position:absolute; top:-32px; left:-32px; }
スプライト
<div class='sprite' id='div1'><img src='../img/enemy.png' alt='' id='imd1'/></div>
画像差し替え(オフセット変更)
$("#div1").css("top", -オフセットy); $("#div1").css("left", -オフセットx);