On August 21st we had our fourth Thursday night minihackathon. The goal for this minihackathon was to create a Tower Defense game with as few lines of code as possible. External libraries and CSS were not included in the line count.

I had used jQuery and D3.js for animation in previous projects, and for a while now I wanted to learn more about CSS animations, so I decided to do the game with only CSS. I knew I wasn’t going to be able to implement a real game with only CSS, but I wanted to see just how far I could go with only CSS. Plus, the irony of doing a project in only CSS without a lick of Javascript at a coding bootcamp that teaches only Javascript and not a lick of CSS kinda amused me. Here’s a demo of CSS Defense.

css_defense

    Challenges/Things I’ve learned

  • Hardest part of this project was figuring out how to make the towers appear and fire bullets after you click on the screen.

    Early on I decided to use a grid of links to make the towers “magically” appear when you click on the board. The boards starts with white links on a white background so the towers aren’t visible. When users click the board, a link changes to the visited state, turns black, and a tower appears. That was the semi-easy part.

    The hard part was making the moving bullets appear after the towers appear. Since the only css rules you can apply to visited links are color and animation, I had to create a second grid of clickable links for the bullets, and position the two grids on top each other.

    Each cell on one board has a unique url. The corresponding cells on the two boards share the same url so when you click a cell on the towers board, the corresponding cell on the bullet board will also appear.

  • Using formulas in the :nth-child() selector is pretty nifty way to get finer control over which elements to apply styles to.

    This code applies different rotation rules to every fourth tower. Tower 1 rotates to the right in 1 second, tower 2 rotates to the left in 2 seconds, etc.

    #board_towers a:nth-child(4n+1) {
    animation: 1s towers_right infinite ;
    }
    #board_towers a:nth-child(4n+2) {
    animation: 2s towers_left infinite ;
    }
    #board_towers a:nth-child(4n+3) {
    animation: 3s towers_right infinite ;
    }
    #board_towers a:nth-child(4n+4) {
    animation: 4s towers_left infinite ;
    }
  • Using a multiple keyframes in a animation can allow for some complicated movements. Here’s the code to move the three shapes along the path.
    @keyframes slide in {
    0% {
    transform:translate(0px,0px);
    }
    20% {
    transform:translate(0px,200px);
    }
    60% {
    transform:translate(400px,200px);
    }
    80% {
    transform:translate(400px,400px);
    }
    100% {
    transform:translate(650px,400px);
    }
  • Before the hackathon, I didn’t get much of a chance to use absolute/relative positioning, so I always got those rules confused. I had to use positioning a few times in this project which greatly helped my understanding of positioning. A little bit of practice can go a long a way.
  • Before the hackathon, I was not aware that the only css rules you can apply to visited links were color and animation. I originally hoped to use a:visited:after {content} to make the towers and bullets appear after the click. Because of the limitations of visited links, I had to do some major hacky creativity to find a workable solution for the towers/bullets.
  • After the hackathon, I found examples of fully functional games that only use CSS. Pong, Space ship, Minesweeper, CSS Panic, and car game.
  • “Programming” in a language that isn’t meant for programming was more challenging and more fun than I had anticipated. Who would’ve thunk that doing things the hard way to produce a non-functional app could be so entertaining?