敵が破壊される(CSS Sprite)

CSS Spriteというものがあることを知ったので、画像差し替えの方法を変えてみる。
これだと、オープンアプリでSpriteクラスを使うのとだいぶ近い。

参考→CSS 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);