HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug.
In CodePen, whatever you write in the HTML editor is what goes within the <body>
tags in a basic HTML5 template. So you don't have access to higher-up elements like the <html>
tag. If you want to add classes there that can affect the whole document, this is the place to do it.
In CodePen, whatever you write in the HTML editor is what goes within the <body>
tags in a basic HTML5 template. If you need things in the <head>
of the document, put that code here.
The resource you are linking to is using the 'http' protocol, which may not work when the browser is using https.
CSS preprocessors help make authoring CSS easier. All of them offer things like variables and mixins to provide convenient abstractions.
It's a common practice to apply CSS to a page that styles elements such that they are consistent across all browsers. We offer two of the most popular choices: normalize.css and a reset. Or, choose Neither and nothing will be applied.
To get the best cross-browser support, it is a common practice to apply vendor prefixes to CSS properties and values that require them to work. For instance -webkit-
or -moz-
.
We offer two popular choices: Autoprefixer (which processes your CSS server-side) and -prefix-free (which applies prefixes via a script, client-side).
Any URL's added here will be added as <link>
s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.
You can apply CSS to your Pen from any stylesheet on the web. Just put a URL to it here and we'll apply it, in the order you have them, before the CSS in the Pen itself.
If the stylesheet you link to has the file extension of a preprocessor, we'll attempt to process it before applying.
You can also link to another Pen here, and we'll pull the CSS from that Pen and include it. If it's using a matching preprocessor, we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
JavaScript preprocessors can help make authoring JavaScript easier and more convenient.
Babel includes JSX processing.
Any URL's added here will be added as <script>
s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.
You can apply a script from anywhere on the web to your Pen. Just put a URL to it here and we'll add it, in the order you have them, before the JavaScript in the Pen itself.
If the script you link to has the file extension of a preprocessor, we'll attempt to process it before applying.
You can also link to another Pen here, and we'll pull the JavaScript from that Pen and include it. If it's using a matching preprocessor, we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
Search for and use JavaScript packages from npm here. By selecting a package, an import
statement will be added to the top of the JavaScript editor for this package.
Using packages here is powered by Skypack, which makes packages from npm not only available on a CDN, but prepares them for native JavaScript ES6 import
usage.
All packages are different, so refer to their docs for how they work.
If you're using React / ReactDOM, make sure to turn on Babel for the JSX processing.
If active, Pens will autosave every 30 seconds after being saved once.
If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.
If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.
Visit your global Editor Settings.
<div class="container">
<div class="col-xs-12 col-md-6 col-md-offset-3 col-lg-4 col-lg-offset-4 text-center">
<h1 class="text-center">Simon Machine</h1>
<div class="panel pre-game">
<div class="panel-body">
<h3>How to Play</h3>
<p>In the following screen you will be presented with colored tiles. Remember the pattern they light up in and then repeat it back.</p>
<p>Get 20 in a row and you'll win the game!</p>
<!-- Game Mode -->
<div class="col-xs-12">
<div class="row">
<hr />
<p>Choose <span class="text-highlight">regular</span> mode if you want to keep playing on an incorrect move, otherwise choose <span class="text-highlight">strict </span>and the game will end if an incorrect move is made.</p>
<div class="col-xs-6 mt1">
<label class="radio-inline"><input type="radio" name="game-mode" value="regular" checked>Regular</label>
</div>
<div class="col-xs-6 mt1">
<label class="radio-inline"><input type="radio" name="game-mode" value="strict" >Strict</label>
</div>
</div>
<div class="row">
<hr />
<!-- Start Game Button -->
<button class="start-game btn btn-start btn-block">Start Game</button>
</div>
</div>
</div>
</div>
<div class="panel game-board hidden animated rubberBand">
<div class="panel-body">
<div class="row count-wrapper">
<div class="count-title">My Score</div>
<div class="col-xs-3"><hr></div>
<div class="col-xs-6">
<div class="count-box"><span class="count">0</span> / 20</div>
</div>
<div class="col-xs-3"><hr></div>
</div>
<div class="row game-board-content">
<!-- Red Block -->
<div class="col-xs-6 block">
<div class="game-tab red" data-color="red"></div>
</div>
<!-- Green Block -->
<div class="col-xs-6 block">
<div class="game-tab green" data-color="green"></div>
</div>
<!-- Blue Block -->
<div class="col-xs-6 block">
<div class="game-tab blue" data-color="blue"></div>
</div>
<!-- Yellow Block -->
<div class="col-xs-6 block">
<div class="game-tab yellow" data-color="yellow"></div>
</div>
</div>
<div class="row">
<div class="col-xs-12 loser-text hidden">
<span>You Lose!</span>
</div>
<div class="col-xs-12 winner-text hidden">
<span>You Win!</span>
</div>
</div>
</div>
<div class="panel-footer">
<button class="reset-game btn btn-default btn-block">Reset Game</button>
<button class="end-game btn btn-default btn-block">End Game</button
</div>
</div>
</div>
</div>
@import url('https://fonts.googleapis.com/css?family=Bitter');
$background-color: #8bc34a;
$text-color: #343435;
$text-light-color: #afafaf;
$border-color: #ccc;
// Button colors
$red: #e91e63;
$green: #4caf50;
$blue: #03a9f4;
$yellow: #ffc107;
body {
font-family: 'Bitter', serif;
min-height: 100vh;
color: white;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
background: $background-color;
}
a:hover {
text-decoration: none;
}
.panel {
@extend .box-shadow;
color: $text-color;
border: 1px solid transparent;
}
.btn.btn-start {
background: $background-color;
color: white;
border: none;
&:hover,
&:active,
&:focus {
color: white;
background: darken($background-color, 10%);
}
}
.text-highlight {
color: $background-color;
font-weight: 600;
}
// Score
.count-wrapper{
padding: 0 0 20px 0;
}
.count-title {
margin-bottom: 10px;
}
.count-box {
font-size: 18px;
line-height: 50px;
height: 50px;
width: 140px;
border: 1px solid $border-color;
margin: 0 auto;
border-radius: 40px;
}
// Colored buttons
.block {
&:nth-child(1),
&:nth-child(3){
padding-right: 7.5px;
}
&:nth-child(2),
&:nth-child(4){
padding-left: 7.5px;
}
&:nth-child(1),
&:nth-child(2) {
margin-bottom: 15px;
}
}
.game-tab {
border-radius: 4px;
height: 140px;
width: 100%;
color: white;
}
.game-tab.red {
background: $red;
&.highlight{
background: darken($red, 20%)
}
&:active,
&:focus {
background: lighten($red, 20%)
}
}
.game-tab.green {
background: $green;
&.highlight {
background: darken($green, 20%);
}
&:active,
&:focus {
background: lighten($green, 20%);
}
}
.game-tab.blue {
background: $blue;
&.highlight {
background: darken($blue, 20%);
}
&:active,
&:focus {
background: lighten($blue, 20%);
}
}
.game-tab.yellow {
background: $yellow;
&.highlight {
background: darken($yellow, 20%);
}
&:active,
&:focus {
background: lighten($yellow, 20%);
}
}
.loser-text {
font-size: 30px;
color: $red;
margin: 26px 0 40px 0;
}
.winner-text {
font-size: 30px;
color: $background-color;
margin: 26px 0 40px 0;
}
// Helpers
.mt1 {
margin-top: 10px;
}
.mt2 {
margin-top: 20px;
}
.mt3 {
margin-top: 30px;
}
.box-shadow {
-webkit-box-shadow: 0px 5px 20px 10px rgba(0,0,0,0.1);
-moz-box-shadow: 0px 5px 20px 10px rgba(0,0,0,0.1);
box-shadow: 0px 5px 20px 10px rgba(0,0,0,0.1);
}
/*-- GLOBAL GAME OBJECT --*/
// Declare a game object and initialize on game start
var GAME = {
gameOptions: {
'red': "https://s3.amazonaws.com/freecodecamp/simonSound1.mp3",
'green': "https://s3.amazonaws.com/freecodecamp/simonSound2.mp3",
'blue': 'https://s3.amazonaws.com/freecodecamp/simonSound3.mp3',
'yellow': 'https://s3.amazonaws.com/freecodecamp/simonSound4.mp3',
'fail': 'https://notificationsounds.com/soundfiles/b534ba68236ba543ae44b22bd110a1d6/file-sounds-875-surprise-on-a-spring.mp3',
'win': 'https://notificationsounds.com/soundfiles/a516a87cfcaef229b342c437fe2b95f7/file-sounds-1068-the-calling.mp3'
},
score: 0,
winScore: 20,
initializeGame: function(gameMode) {
this.clicks = 0;
this.moves = [];
this.playback = false;
this.mode = gameMode;
// Set the first color to begin the game
setNewColor();
}
}
/*-- GAME LOGIC -- */
// Play a sound
function playSound(option){
if(option) {
var audio = new Audio(GAME.gameOptions[option]);
audio.play();
}
}
// Show the moves for the user using an interval timer
// Some assistanc here from: https://codeplanet.io/building-simon-says-javascript/
function displayMoves(){
var moves = GAME.moves;
var i = 0;
GAME.playback = true;
var interval = setInterval(function() {
highlightTab(moves[i]);
playSound(moves[i]);
i++;
if (i >= moves.length) {
clearInterval(interval);
GAME.playback = false;
}
}, 700);
}
// Highlight the tile so the user can see the highlighted tile
// After timeout remove the highlight class
function highlightTab(tab) {
var tab = $('[data-color=' + tab + ']').addClass('highlight');
window.setTimeout(function() {
tab.removeClass('highlight');
}, 350);
}
// Call this to set next color
function setNewColor(){
var number = randomNumber(0, 3);
GAME.moves.push(Object.keys(GAME.gameOptions)[number]);
// As soon as the number of moves is more than the win score, the user wins
// Play through the colors for the user to see & then repeat
displayMoves();
}
// Generates a random number in a range
function randomNumber(max, min) {
return slot = Math.round(Math.random() * (max - min) + min);
}
// Check if the inputted move was correct
function checkMove(color){
if(color === GAME.moves[GAME.clicks - 1]){
return true;
}
return false;
}
// Check if the computer should pick a new color
function checkToProceed(){
// If the user has clicked through all the required colors
if(GAME.clicks === GAME.moves.length){
// Increase the users count score
$('.count').text(GAME.clicks);
// Reset the number of clicks
GAME.clicks = 0;
// Set the new color into the moves array
setNewColor();
}
}
function checkWinner(){
// If the number of clicks is equal to the win score, then the user has won
if (GAME.clicks === GAME.winScore){
return true;
}
return false;
}
// Fun animation if the user clicks something they shouldn't
function doAnimate(classToAnimate, animation){
// Add the class
$('.' + classToAnimate).addClass("animated " + animation);
// Then remove it
setTimeout(function(){
$('.' + classToAnimate).removeClass("animated " + animation);
}, 500);
}
// Animation when the user wins
function winSequence(){
playSound('win');
$('.count').text(GAME.clicks);
$('.game-board-content').addClass('hidden');
$('.winner-text').removeClass('hidden');
$('.reset-game').text('Play Again?');
}
/*-- CLICK OPTIONS -- */
// Let the user choose the type of player he wants to be!
$(".start-game").click(function(){
$('.pre-game').addClass('hidden');
$('.game-board').removeClass('hidden');
// Set the game mode and initialize the game
var mode = $('input[name=game-mode]:checked').val();
GAME.initializeGame(mode);
});
// Allow the user to reset the game
$(".reset-game").click(function(){
$('.count').text(0);
$('.game-board-content').removeClass('hidden');
$('.loser-text').addClass('hidden');
$('.winner-text').addClass('hidden');
$('.reset-game').text('Reset Game');
GAME.initializeGame(GAME.mode);
});
// All the user to end the game
$(".end-game").click(function(){
history.go(0);
});
$(".game-tab").click(function() {
// Block the user if the game is currently playing back
if(!GAME.playback){
// Increase the number of clicks by 1
GAME.clicks += 1;
// Check if the user has click enough times
var color = $(this).data('color');
// Check if the user selected the correct color
if(!checkMove(color)) {
// Animate the board with a shake
doAnimate("game-board", "shake");
// If in strict mode, then you lose the game
if(GAME.mode === "strict") {
playSound('fail');
$('.game-board-content').addClass('hidden');
$('.loser-text').removeClass('hidden');
$('.reset-game').text('Play Again?');
// Otherwise, the user can try again
} else if (GAME.mode === "regular") {
GAME.clicks = 0; // We must reset the clicks
playSound('fail');
displayMoves(); // We show the moves again
}
} else {
// Play the corresponding sound to the button
playSound(color);
// Check if the user won, otherwise continue as expected
if(checkWinner()){
//If the user has one, perfom the win sequence
winSequence();
} else {
// Check if the computer should pick a new color
checkToProceed();
}
}
}
});
Also see: Tab Triggers