onSpaceStart game recreated in pure CSS and no JavaScript

This month’s Mozilla Dev Derby are all about “no JavaScript”, so the pure CSS game was my obvious choice. I thought it will be cool to take my existing game and recreate it, so I picked onSpaceStart (which was promoting onGameStart HTML5 conference in 2011) and created simple CSS version of it.

Source code

It’s really dead simple and it’s hard to call it a game, more of a demo. The three key points in the source code are: generated clouds, starting the game on hover and dealing with animations. The HTML5 structure of a cloud is very simple:

<p id="cloud_01" class="cloud"></p>

And here’s the CSS for a cloud:

.cloud {
  background: #fff;
  border-radius: 40px 40px 16px 16px;
  height: 20px;
  margin-right: 5px;
  margin-top: 15px;
  position: absolute;
  width: 30px;
  top: -50%;
  left: 0;
}

.cloud:before {
  background: #fff;
  border-radius: 80px 80px 16px 16px;
  content: "";
  height: 30px;
  margin-top: -10px;
  position: absolute;
  width: 50px;
}

.cloud:after {
  background: #fff;
  border-radius: 40px 40px 16px 16px;
  content: "";
  height: 15px;
  margin-left: 40px;
  margin-top: 5px;
  position: absolute;
  width: 20px;
}

There’s a lot of animation going under the hood:

.board:hover #cloud_01 {
  animation: animation1 6s 0s linear;
}
.board:hover #cloud_02 {
  animation: animation4 5s 2s linear;
}
.board:hover #cloud_03 {
  animation: animation2 3s 3s linear;
}
(...)

Every cloud have it’s own animation picked from the default ones:

@keyframes animation1 {
  0% { left: 260px; top: -10%; }
  100% { left: 260px; top: 100%; }
}
@keyframes animation2 {
  0% { left: 50px; top: -10%; }
  100% { left: 50px; top: 100%; }
}
@keyframes animation3 {
  0% { left: 150px; top: -10%; }
  100% { left: 200px; top: 100%; }
}
(...)

This appears on the screen in the exact given moments one after another. Thanks to this little trick it looks like the clouds are randomly generated, which is obvously not true as they are all hardcoded. The game was done quite quickly and it’s quite rough – if I had more time I could polish it a bit, but it was just a small experiment, so it have to stay that way.

How to play

If you hover your rocket-mouse over a cloud – you’re dead (yes, I know – spaceship able to go through atmosphere destroyed by the furious, deadly clouds…). There is a collision detection bug… no, feature! There is a collision detection feature helping user out – the rocket is bigger than the cursor itself, which is causing collisions, so if you touch the cloud with a wing it might not be counted as a hit – only the top of the rocket is collision-sensitive. When you’re dead you can hover out your mouse and start again. If you manage to survive 30 seconds and 50 clouds you will be awarded with the congratulations message.

Wrapping up

You can find this game on Mozilla Dev Derby demo page or on my own server. The source code can be found on GitHub. The full source code is just 12,4 kB small, so this could be a perfect entry for upcoming js13kGames competition.

Post scriptum

If you want to see some badass CSS game you should definitely check out pure CSS Duck Hunt by Zofia Korcz – I hope she will win this month’s Derby, because Duck Hunt with all the points and stuff in pure CSS? C’mon, vote for her right away! Besides, you should remember her from my last contest where she took the prize by surprise and beat everybody else to the ground.