FreeCodeCamp and JavaScript: Build a Simon Game: The CSS

So, we’ve already looked at the HTML for the Simon game.  Today, let’s have a look at the CSS.

We start with the body, which will be brown.  I could have gotten fancy and used a wooden background or something to look like a table, but I decided to keep it simple.

body {

  background-color: saddlebrown;

}

Next, we draw the circle.  The circle sits in the middle of a Bootstrap column.  I don’t want any writing on it to stick out past the end of the circle, so I set overflow to hidden. This circle contains the buttons and the inner circle with the other game controls.

.circle {

  margin: 33px;
  border: 10px solid #333;
  background-color: #333;
  border-radius: 50%;
  height: 500px;
  width: 500px;
  padding: 30px;
  overflow: hidden;
  position: relative;

}

Inner circle sits inside the outer circle, obviously.  All of the stuff for controlling the game (except the buttons) will be contained in it.

#innerCircle {

  margin: 84px;
  background-color: white;
  border-radius: 50%;
  height: 250px;
  width: 250px;
  padding: 30px;
  overflow: hidden;
  position: relative;
  border: 10px solid #333;

}

I used a Google font for the name Simon.

#gameName {

  font-family: 'Bevan', cursive;
  font-weight: bold;
  color: black;
  font-size: 42px;

}

The scorebox font is a digital looking one.It has a border, and then the screen is a dark reddish with bright red letters.  Old school game!

#scoreBox {

  font-family: 'Digital-7 Mono', arial;
  font-weight: bold;
  font-size: 24px;
  height: 40px;
  width: 65px;
  border: 3px solid #333333;
  border-radius: 10px;
  color: red;
  background-color: rgb(67,7,16);
  margin-top: 21px;
  margin-left: 20px;
  margin-right: 20px;

}

The start button is red with a black border (to simulate the plastic ring it’s in on the real Simon).  I didn’t do anything for when it is pressed; I could have used a pseudo-class for that.

#startBtn {

  padding-left: 5px;
  height: 30px;
  width: 30px;
  border: 5px solid #333333;
  background-color: red;
  border-radius: 50%;
  margin-right: 20px;
  margin-top: 26px;

 }

The Bootstrap grid is a little complicated here.  #twoThings are the “cells” holding the lights and buttons for Start and Strict.

#twoThings {

  margin-top: 5px;
  width: 40px;
  height: 65px;

}

#light {

  height: 20px;
  width: 50px;

}

The lights are small and are black when they are off.

.onLight {

  padding-top: 10px;
  margin-left: 10px;
  padding-left: 7px;
  padding-right: 2px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid #333333;
  background-color: black;

}

The Strict Button is similar to the Start button.

#strictBtn {

  padding-left: 5px;
  height: 30px;
  width: 30px;
  min-height: 20px;
  border: 5px solid #333333;
  background-color: yellow;
  border-radius: 50%;
  display: block;
  margin-top: 1px;

}

#controls {

  height: 75px;

}

This is the box holding the on switch.

#onSwitch {

  display: inline-block;
  width: 40px;
  height: 20px;
  background-color: black;
  margin-top: 10px;
  margin-left: 10px;
  border-radius: 3px;

}

This is the On-Off Switch itself.  Float changes (using jQuery) based on whether it’s on or off.  The default is off.

#onOffSwitch {

  margin-top: 2px;
  width: 15px;
  height: 15px;
  background-color: LightBlue;
  margin-left: 0px;
  padding-left: 0px;
  border-left: 0px;
  float: left;
  border-radius: 2px;

}

These are the “cells” holding the words “on” and “off”.

#onOff {

  height: 45px;
  font-weight: bold;
  font-family: 'Open Sans Condensed', sans-serif;

}

The next few items format the words “on” and “off” and the other words on the gameboard.

#onText {

  padding-right: 0px;
  margin-left: 10px;
  padding-top: 10px;
  width: 30%;

}

#offText {

  padding-left: 8px;
  border: 0px;
  padding-top: 10px;
  width: 30%;

}

#ctrlLabls {

  margin-top: 0%;
  padding-top: 0%;
  border-top: 0px;
  font-family: 'Open Sans Condensed', sans-serif;
  font-weight: bold;

}

#labels {

  margin-top: 0%;
  padding-top: 0%;
  border-top: 0px;
  margin-left: 20px;
  color: black;

}

#labels1 {

  margin-top: 0%;
  margin-left: 30px;
  color: black;

}

#labels2 {

  margin-left: 20px;
  color: black;

}

The next four items create the buttons on the board using CSS.  The margins that are set give them their funky shapes.

.quad1 {

  position: absolute;
  background-color: red;
  width: 50%;
  height: 45%;
  left: 55%;
  right: 0%;
  bottom: 50%;
  top: 0%;

}

.quad2 {

  position: absolute;
  background-color: green;
  width: 45%;
  height: 45%;
  left: 0%;
  right: 45%;
  bottom: 50%;
  top: 0%;

}

.quad3 {

  position: absolute;
  background-color: yellow;
  width: 45%;
  height: 50%;
  left: 0;
  right: 50%;
  bottom: 0%;
  top: 55%;

}

.quad4 {

  position: absolute;
  background-color: blue;
  width: 50%;
  height: 50%;
  left: 55%;
  right: 0%;
  bottom: 0%;
  top: 55%;

}

When a button is pressed, or the computer plays its sound, it lights up and becomes active.

.active {

  padding-top: 10px;
  margin-left: 10px;
  padding-left: 7px;
  padding-right: 2px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid #333333;
  background-color: red;

}

.quad1active {

  position: absolute;
  background-color: DarkRed;
  width: 50%;
  height: 45%;
  left: 55%;
  right: 0%;
  bottom: 50%;
  top: 0%;

}

.quad2active {

  position: absolute;
  background-color: DarkGreen;
  width: 45%;
  height: 45%;
  left: 0%;
  right: 45%;
  bottom: 50%;
  top: 0%;

}

.quad3active {

  position: absolute;
  background-color: #CCCC00;
  width: 45%;
  height: 50%;
  left: 0;
  right: 50%;
  bottom: 0%;
  top: 55%;

}

.quad4active {

  position: absolute;
  background-color: DarkBlue;
  width: 50%;
  height: 50%;
  left: 55%;
  right: 0%;
  bottom: 0%;
  top: 55%;

}

And there you are, the CSS for Simon!  It’s not that complicated, although there’s quite a bit of it.  As always, I can answer any questions in the comments.  Next, we’ll start looking at the JavaScript code that makes the whole thing work!

Advertisements

One thought on “FreeCodeCamp and JavaScript: Build a Simon Game: The CSS

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s