Question

Let me preface this question by saying that I’d like to avoid using javascript to solve this problem. If possible (it may not be) I’d like to keep all of this “logic” in CSS.

I am creating a board game (Khet) for fun in javascript. The board pieces can have multiple states, such as:

• Color (which player owns the piece)
• What type of piece it is (pyramid, sphinx, blank tile, etc)
• What direction the piece is facing (pieces may be rotated as well as moved)
• If the piece is reflecting a laser
• If the piece is damaged by a laser

That being said, I have one sprite.png file containing all of the possible combinations for every piece and I would like to be able to use CSS classes to move the pieces through their states.

For example, imagine the red player has a pyramid piece on the board and it is facing northeast. This piece would have the classes .red, .pyramid, and .northeast. If the piece is struck by a laser and reflects it, all I would have to do is add a .laser class to the piece and CSS background-position classes would kick in and change the piece to have the proper image.

This leads to a few questions:

1. Is this even possible to do in pure CSS?
2. How would you arrange the images in sprite.png such that these background-position classes would work?
3. What would the classes look like (this probably depends on #2)?
4. Do I need to break the image apart? Like placing all red pieces in one sprite_red.png and blue in sprite_blue.png?

I’ve put this on the back burner while I work on some of the other portions of the game. Any help would be appreciated!

Answer 1

You can definitely accomplish this all in one sprite. It’s just a matter of how large of an image you want to work with.

|      SPHINX         |        Pyramid       |
Red  |  Blue  | Oran  |  Red  |  Blue  | Oran
 N       N       N        N       N       N
 NE      NE      NE       NE      NE      NE
 E       E       E        E       E       E
 SE      SE      SE       SE      SE      SE
 S       S       S        S       S       S
 SW      SW      SW       SW      SW      SW
 W       W       W        W       W       W
 NW      NW      NW       NW      NW      NW
|               DAMAGE                       |
 N       N       N        N       N       N
 NE      NE      NE       NE      NE      NE
 E       E       E        E       E       E
 SE      SE      SE       SE      SE      SE
 S       S       S        S       S       S
 SW      SW      SW       SW      SW      SW
 W       W       W        W       W       W
 NW      NW      NW       NW      NW      NW
 ....etc....

From there, CSS like

.piece { background:url('giant-sprint.png') no-repeat 0 0 }

.piece.sphinx.red.n { background-position:0px 0px }
.piece.sphinx.red.n.damage { background-position:0px 108px }

.piece.sphinx.red.s.damage { background-position:0px 156px }
.piece.pyramid.blue.s.damage { background-position:60px 156px }

.piece.pyramid.blue.sw { background-position:60px 72px }
.piece.sphinx.blue.sw.damage { background-position:60px 168px }

It won’t be that long, and you’ll memorize the column’s left and top positions and which piece they represent just from the pattern established.

I’d definitely limit the pieces to a single container (at least for v1.0). One sprite for normal state, and one for damaged pieces…maybe… may make your life easier from a maintenance POV. As the game matures, the proper method should become more obvious to you.