zenojumby/QyjgNr.markdown

## index.html
<body>
  <div id="scoreboard">
    <img id="avatar" src="http://fc02.deviantart.net/fs71/f/2013/135/9/8/master_chef_by_dekanuva-d65eu3d.png">
    <div id="name">
      <p>Name: Jwann (Master Chef)</p>
    </div>
    <div id="score">
      <p>Score: <span id="score-value">0</span></p>
    </div>
  </div>

  <table>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>
        <div class="flag"></div>
        <img id="Oa" class="planet" src="http://static1.squarespace.com/static/536a6e5fe4b0bed465fb87bd/55df7b70e4b0f5babe78b98b/55df9e36e4b0b7e71c4af947/1440718391073/greenplanet.png">
      </td>
      <td>6</td>
      <td>7</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
      <td>6</td>
      <td>7</td>
    </tr>
    <tr>
      <td>1</td>
      <td>
        <div class="flag"></div>
        <img id="Skaro" class="planet" src="http://img08.deviantart.net/1cda/i/2012/229/a/4/stock_planet_techno_fractal_by_svetlanaivanova-d5bg82w.png">
      </td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
      <td>6</td>
      <td>7</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>
        <div class="flag"></div>
        <img id="sun" class="planet" src="http://orig12.deviantart.net/c7d3/f/2013/292/7/5/sun_transparent_background_sun_world_by_royalblueiv-d6r3ze7.png" alt="sun">
      </td>
      <td>5</td>
      <td>6</td>
      <td>7</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
      <td>6</td>
      <td>7</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>
        <div class="flag"></div>
        <img id="LosVergas" class="planet" src="http://static.tumblr.com/98317b708b20d219ce8d37a96b2b59c4/58bfg8s/8Ewnipxig/tumblr_static_ijm3p7h5m7cogs0s0woook8k.png">
      </td>
      <td>4</td>
      <td>5</td>
      <td>6</td>
      <td>7</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
      <td>
        <div class="flag"></div>
        <img id="Apokolips" class="planet" src="http://vignette3.wikia.nocookie.net/astroempires/images/4/40/Astro_Volcanic_medium.png/revision/latest?cb=20110617211950">
      </td>
      <td>7</td>
    </tr>
  </table>
  <div id="gamecontainer"></div>
  <div id="intro">

    <div id="intro1">
      Click to explore the universe
    </div>
    <img id="intro2" src="https://christopherwelldon.files.wordpress.com/2015/04/aj3gdwy.gif">
    <div id="intro3">
      What's going on? The universe have is underattack! There's no time to explain, but you need to follow these directions. We are trying to conquer and save the galaxy! Hurry up! Gain as many stars as you can! We must win this battle for our people.
      <button>
        Start
      </button>
    </div>
  </div>
</body>

## QyjgNr.markdown

      
    Raw
  

              QyjgNr.markdown
            
          
    QyjgNr

A Pen by Zenobia Bholai on CodePen.
License.

  
## script.js
/*
updateScore
	When the player beats a level, update score next to their name.

Parameters:
  marshmallows (integer): represents the number of stars won
  whichPlanet (string): id of the planet
  didTheyWin (boolean)
*/
var links = [
  'https://jsfiddle.net/naomij/zkpvbms7/14/embedded/result/',
  'http://jsfiddle.net/p1f0nLzh/48/'
]

var updateScore = function(marshmallows, whichPlanet, didTheyWin) {
  if (didTheyWin) {
    // Updates the score on the scoreboard
    var currentScore = parseInt($("#score-value").text());
    $("#score-value").text(marshmallows + currentScore);

    // Mark the planet as conquered
    $("#" + whichPlanet).siblings(".flag").show();
  }
};

$(".planet").click(function() {
  var index = Math.floor(Math.random() * links.length);
  window.location = links[index];
});

$("#intro").click(function() {
  $("#intro1").fadeOut(400, function() {
  $("#intro2").fadeIn().css('display','block').delay(1000).fadeOut(400, function () {
    $("#intro3").fadeIn();
    });
  });
});

$('#intro button').click(function() {
  $("#intro").fadeOut();
})

## scripts
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

## style.css
body {
  background-image: url("http://weknowyourdreams.com/images/space/space-09.jpg");
  background-size: cover;
}

h1 {
  color: white;
  display: inline-block;
}

p {
  color: white;
}

#avatar {
  height: 100px;
  width: 200px;
}

#scoreboard {
  background-color: red;
  height: 100px;
  width: 200px;
  display: inline-block;
}

#name p,
#score p {
  color: black;
}

table {
  width: 100%;
}

td {
  position: relative;
}

#sun {
  height: 400px;
  width: 400px;
}

#Skaro {
  height: 200px;
  width: 260px;
  -webkit-filter: drop-shadow(0 0 2px white);
  filter: url(shadow.svg#drop-shadow);
}

#Oa {
  height: 150px;
  width: 150px;
}

#LosVergas {
  height: 100px;
  width: 100px;
}

#Apokolips {
  height: 140px;
  width: 140px;
}

.flag {
  display: none;
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  margin-left: -128px;
  margin-top: -96px;
  width: 256px;
  height: 192px;
  background-image: url('http://img.freeflagicons.com/thumb/flag_pin/haiti/haiti_256.png');
}

#gamecontainer {
  display: none;
}

.planet:hover {
  cursor: pointer;
}

#intro {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-size: cover;
  background-image: url('https://media.giphy.com/media/TZf4ZyXb0lXXi/giphy.gif');
  height: 100%;
}

#intro div {
  width: 75%;
  margin: 0 auto;
  text-align: center;
  color: white;
  font-family: Helvetica;
  /* Center it vertically */
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
}

#intro1 {
  font-size: 48px;
  text-transform: uppercase;
  font-weight: bold;
}

#intro2 {
  /* Center it vertically */
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  margin: 0 auto;
  display: none;
}

#intro3 {
  font-size: 18px;
  display: none;
}
	<body>
	<div id="scoreboard">
	<img id="avatar" src="http://fc02.deviantart.net/fs71/f/2013/135/9/8/master_chef_by_dekanuva-d65eu3d.png">
	<div id="name">
	<p>Name: Jwann (Master Chef)</p>
	</div>
	<div id="score">
	<p>Score: <span id="score-value">0</span></p>
	</div>
	</div>

	<table>
	<tr>
	<td>1</td>
	<td>2</td>
	<td>3</td>
	<td>4</td>
	<td>
	<div class="flag"></div>
	<img id="Oa" class="planet" src="http://static1.squarespace.com/static/536a6e5fe4b0bed465fb87bd/55df7b70e4b0f5babe78b98b/55df9e36e4b0b7e71c4af947/1440718391073/greenplanet.png">
	</td>
	<td>6</td>
	<td>7</td>
	</tr>
	<tr>
	<td>1</td>
	<td>2</td>
	<td>3</td>
	<td>4</td>
	<td>5</td>
	<td>6</td>
	<td>7</td>
	</tr>
	<tr>
	<td>1</td>
	<td>
	<div class="flag"></div>
	<img id="Skaro" class="planet" src="http://img08.deviantart.net/1cda/i/2012/229/a/4/stock_planet_techno_fractal_by_svetlanaivanova-d5bg82w.png">
	</td>
	<td>3</td>
	<td>4</td>
	<td>5</td>
	<td>6</td>
	<td>7</td>
	</tr>
	<tr>
	<td>1</td>
	<td>2</td>
	<td>3</td>
	<td>
	<div class="flag"></div>
	<img id="sun" class="planet" src="http://orig12.deviantart.net/c7d3/f/2013/292/7/5/sun_transparent_background_sun_world_by_royalblueiv-d6r3ze7.png" alt="sun">
	</td>
	<td>5</td>
	<td>6</td>
	<td>7</td>
	</tr>
	<tr>
	<td>1</td>
	<td>2</td>
	<td>3</td>
	<td>4</td>
	<td>5</td>
	<td>6</td>
	<td>7</td>
	</tr>
	<tr>
	<td>1</td>
	<td>2</td>
	<td>
	<div class="flag"></div>
	<img id="LosVergas" class="planet" src="http://static.tumblr.com/98317b708b20d219ce8d37a96b2b59c4/58bfg8s/8Ewnipxig/tumblr_static_ijm3p7h5m7cogs0s0woook8k.png">
	</td>
	<td>4</td>
	<td>5</td>
	<td>6</td>
	<td>7</td>
	</tr>
	<tr>
	<td>1</td>
	<td>2</td>
	<td>3</td>
	<td>4</td>
	<td>5</td>
	<td>
	<div class="flag"></div>
	<img id="Apokolips" class="planet" src="http://vignette3.wikia.nocookie.net/astroempires/images/4/40/Astro_Volcanic_medium.png/revision/latest?cb=20110617211950">
	</td>
	<td>7</td>
	</tr>
	</table>
	<div id="gamecontainer"></div>
	<div id="intro">

	<div id="intro1">
	Click to explore the universe
	</div>
	<img id="intro2" src="https://christopherwelldon.files.wordpress.com/2015/04/aj3gdwy.gif">
	<div id="intro3">
	What's going on? The universe have is underattack! There's no time to explain, but you need to follow these directions. We are trying to conquer and save the galaxy! Hurry up! Gain as many stars as you can! We must win this battle for our people.
	<button>
	Start
	</button>
	</div>
	</div>
	</body>
	/*
	updateScore
	When the player beats a level, update score next to their name.

	Parameters:
	marshmallows (integer): represents the number of stars won
	whichPlanet (string): id of the planet
	didTheyWin (boolean)
	*/
	var links = [
	'https://jsfiddle.net/naomij/zkpvbms7/14/embedded/result/',
	'http://jsfiddle.net/p1f0nLzh/48/'
	]

	var updateScore = function(marshmallows, whichPlanet, didTheyWin) {
	if (didTheyWin) {
	// Updates the score on the scoreboard
	var currentScore = parseInt($("#score-value").text());
	$("#score-value").text(marshmallows + currentScore);

	// Mark the planet as conquered
	$("#" + whichPlanet).siblings(".flag").show();
	}
	};

	$(".planet").click(function() {
	var index = Math.floor(Math.random() * links.length);
	window.location = links[index];
	});

	$("#intro").click(function() {
	$("#intro1").fadeOut(400, function() {
	$("#intro2").fadeIn().css('display','block').delay(1000).fadeOut(400, function () {
	$("#intro3").fadeIn();
	});
	});
	});

	$('#intro button').click(function() {
	$("#intro").fadeOut();
	})
	body {
	background-image: url("http://weknowyourdreams.com/images/space/space-09.jpg");
	background-size: cover;
	}

	h1 {
	color: white;
	display: inline-block;
	}

	p {
	color: white;
	}

	#avatar {
	height: 100px;
	width: 200px;
	}

	#scoreboard {
	background-color: red;
	height: 100px;
	width: 200px;
	display: inline-block;
	}

	#name p,
	#score p {
	color: black;
	}

	table {
	width: 100%;
	}

	td {
	position: relative;
	}

	#sun {
	height: 400px;
	width: 400px;
	}

	#Skaro {
	height: 200px;
	width: 260px;
	-webkit-filter: drop-shadow(0 0 2px white);
	filter: url(shadow.svg#drop-shadow);
	}

	#Oa {
	height: 150px;
	width: 150px;
	}

	#LosVergas {
	height: 100px;
	width: 100px;
	}

	#Apokolips {
	height: 140px;
	width: 140px;
	}

	.flag {
	display: none;
	position: absolute;
	z-index: 2;
	left: 50%;
	top: 50%;
	margin-left: -128px;
	margin-top: -96px;
	width: 256px;
	height: 192px;
	background-image: url('http://img.freeflagicons.com/thumb/flag_pin/haiti/haiti_256.png');
	}

	#gamecontainer {
	display: none;
	}

	.planet:hover {
	cursor: pointer;
	}

	#intro {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	background-size: cover;
	background-image: url('https://media.giphy.com/media/TZf4ZyXb0lXXi/giphy.gif');
	height: 100%;
	}

	#intro div {
	width: 75%;
	margin: 0 auto;
	text-align: center;
	color: white;
	font-family: Helvetica;
	/* Center it vertically */
	position: relative;
	top: 50%;
	-webkit-transform: translateY(-50%);
	}

	#intro1 {
	font-size: 48px;
	text-transform: uppercase;
	font-weight: bold;
	}

	#intro2 {
	/* Center it vertically */
	position: relative;
	top: 50%;
	-webkit-transform: translateY(-50%);
	margin: 0 auto;
	display: none;
	}

	#intro3 {
	font-size: 18px;
	display: none;
	}