FreeCodeCamp - Simon Game
How do I make an freecodecamp - simon game?
What is a freecodecamp - simon game? How do you make a freecodecamp - simon game? This script and codes were developed by Veronika on 30 November 2022, Wednesday.
FreeCodeCamp - Simon Game Previews
FreeCodeCamp - Simon Game - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>FreeCodeCamp - Simon Game</title> <meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=VT323" rel="stylesheet"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="game" class="game"> <div class="game__button game_button--bulbasaur" id="bulbasaur"></div> <div class="game__button game_button--charmander" id="charmander"></div> <div class="game__button game_button--pikachu" id="pikachu"></div> <div class="game__button game_button--squirtle" id="squirtle"></div> <div class="game__controls"> <div id="counter" class="game__controls__counter">0</div> <button id="startButton" class="game__controls__button game__controls__start-button"></button> <button id ="strictModeButton" class="game__controls__button game__controls__strict-mode-button"></button> </div>
</div>
<footer>Icons made by <a href="http://www.flaticon.com/authors/roundicons-freebies" title="Roundicons Freebies">Roundicons Freebies</a> from <a href="http://www.flaticon.com" title="Flaticon">www.flaticon.com</a> is licensed by <a href="http://creativecommons.org/licenses/by/3.0/" title="Creative Commons BY 3.0" target="_blank">CC 3.0 BY</a></footer>
<audio id="pikachuAudio" src="https://s3.amazonaws.com/freecodecamp/simonSound1.mp3" ></audio>
<audio id="squirtleAudio" src="https://s3.amazonaws.com/freecodecamp/simonSound2.mp3"</audio>
<audio id="charmanderAudio" src="https://s3.amazonaws.com/freecodecamp/simonSound3.mp3"></audio>
<audio id="bulbasaurAudio" src="https://s3.amazonaws.com/freecodecamp/simonSound4.mp3"></audio>
<audio id="victoryAudio" src="http://66.90.93.122/ost/pokemon-gameboy-sound-collection/csqodhnibz/108-victory-vs-wild-pokemon-.mp3"></audio> <script src="js/index.js"></script>
</body>
</html>FreeCodeCamp - Simon Game - Script Codes CSS Codes
.game { width: 400px; height: 400px; border-radius: 50%; margin: 4% auto; position: relative; background-color: transparent; overflow: hidden; color: white; -webkit-transition: -webkit-transform 30s linear; transition: -webkit-transform 30s linear; transition: transform 30s linear; transition: transform 30s linear, -webkit-transform 30s linear;
}
.game--shake { -webkit-animation: shake 1s cubic-bezier(0.36, 0.07, 0.19, 0.97) both; animation: shake 1s cubic-bezier(0.36, 0.07, 0.19, 0.97) both; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-perspective: 1000px; perspective: 1000px;
}
@-webkit-keyframes shake { 10%, 90% { -webkit-transform: translate3d(-1px, 0, 0); transform: translate3d(-1px, 0, 0); } 20%, 80% { -webkit-transform: translate3d(2px, 0, 0); transform: translate3d(2px, 0, 0); } 30%, 50%, 70% { -webkit-transform: translate3d(-4px, 0, 0); transform: translate3d(-4px, 0, 0); } 40%, 60% { -webkit-transform: translate3d(4px, 0, 0); transform: translate3d(4px, 0, 0); }
}
@keyframes shake { 10%, 90% { -webkit-transform: translate3d(-1px, 0, 0); transform: translate3d(-1px, 0, 0); } 20%, 80% { -webkit-transform: translate3d(2px, 0, 0); transform: translate3d(2px, 0, 0); } 30%, 50%, 70% { -webkit-transform: translate3d(-4px, 0, 0); transform: translate3d(-4px, 0, 0); } 40%, 60% { -webkit-transform: translate3d(4px, 0, 0); transform: translate3d(4px, 0, 0); }
}
.game--rotate { -webkit-transform: rotate(1080deg); transform: rotate(1080deg);
}
.game__controls { width: 184px; height: 184px; border-radius: 50%; border: 6px solid #faffeb; position: absolute; top: 50%; left: 50%; margin-left: -92px; margin-top: -92px; background-color: #faffeb; text-align: center;
}
.game__controls__counter { font-size: 32px; font-family: 'Source Code Pro', monospace; color: #343638; position: relative; top: 36px;
}
.game__controls__button { border: 0; border-radius: 20%; height: 10px; width: 35px; font-family: 'VT323', monospace; font-size: 16px; position: relative; top: 60px; cursor: pointer; background-color: #646464; margin: 5px; color: #343638;
}
.game__controls__button::after { position: absolute; top: 15px; left: 1px;
}
.game__controls__button::before { content: ''; position: absolute; top: -14px; left: 13px; height: 6px; width: 6px; border-radius: 50%; border: 1px solid black;
}
.game__controls__button:focus { outline: none;
}
.game__controls__start-button::after { content: 'START';
}
.game__controls__start-button::before { background-color: darkgreen;
}
.game__controls__start-button--active::before { background-color: #28ff28; border: 1px solid #00c800; box-shadow: 0px 0px 3px 1px #32ff32;
}
.game__controls__strict-mode-button::after { content: 'STRICT'; left: -1px;
}
.game__controls__strict-mode-button::before { background-color: #c80000;
}
.game__controls__strict-mode-button--active::before { background-color: #ff2828; border: 1px solid #960000; box-shadow: 0px 0px 5px 1px #ff3232;
}
.game__button { height: 50%; width: 50%; position: absolute; cursor: pointer; pointer-events: none; color: #faffeb;
}
.game__button--inactive { -webkit-filter: grayscale(40%); filter: grayscale(40%);
}
.game_button--bulbasaur { background: #006600 url("http://image.flaticon.com/icons/svg/188/188989.svg"); background-repeat: no-repeat; background-position: center; background-size: 70px;
}
.game_button--bulbasaur.game__button--active { background-color: #4cde4e;
}
.game_button--charmander { background: #b91000 url("http://image.flaticon.com/icons/svg/188/188990.svg") no-repeat center; background-size: 70px; left: 50%; border-left: 6px solid;
}
.game_button--charmander.game__button--active { background-color: #f53824;
}
.game_button--pikachu { background: #e1da00 url("http://image.flaticon.com/icons/svg/188/188987.svg") no-repeat center; background-size: 70px; top: 50%; border-top: 6px solid;
}
.game_button--pikachu.game__button--active { background-color: #ffff46;
}
.game_button--squirtle { background: #0c65ae url("http://image.flaticon.com/icons/svg/188/188988.svg") no-repeat center; background-size: 70px; top: 50%; left: 50%; border-left: 6px solid; border-top: 6px solid;
}
.game_button--squirtle.game__button--active { background-color: #48abf4;
}
footer { font-family: 'Source Code Pro', monospace; font-size: 12px; text-align: center; margin-top: 140px; color: #343638;
}
footer a { color: #343638;
}
body { background-color: #faffeb;
}
@media (max-width: 400px) { .game { width: 300px; height: 300px; } .game__controls { width: 140px; height: 140px; margin-left: -70px; margin-top: -70px; } .game__controls__button { top: 50px; } .game_button--bulbasaur, .game_button--squirtle, .game_button--charmander, .game_button--pikachu { background-size: 50px; }
}
FreeCodeCamp - Simon Game - Script Codes JS Codes
'use strict';
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
var Pokemon = function () { function Pokemon(audioId, elementId) { _classCallCheck(this, Pokemon); this.id = elementId; this.audio = document.getElementById(audioId); this.element = document.getElementById(elementId); this.element.addEventListener('click', this.onClick.bind(this)); } Pokemon.prototype.getId = function getId() { return this.id; }; Pokemon.prototype.onClick = function onClick() { this.iChooseYou(); UserPokemons.addPokemon(this.id); var correct = isUserInputCorrect(); if (correct) { if (UserPokemons.numberOfPokemons() === ComputerPokemons.numberOfPokemons()) { if (UserPokemons.numberOfPokemons() === 20) { victory(); } else { usersTurnOver(correct); } } } else { usersTurnOver(); } }; Pokemon.prototype.iChooseYou = function iChooseYou() { var _this = this; return new Promise(function (resolve, reject) { _this.playAudio(); _this.highlight(); setTimeout(function () { _this.clearHighlight(); setTimeout(resolve, 300); }, 500); }); }; Pokemon.prototype.getElement = function getElement() { return this.element; }; Pokemon.prototype.playAudio = function playAudio() { this.audio.play(); }; Pokemon.prototype.highlight = function highlight() { this.element.classList.add('game__button--active'); }; Pokemon.prototype.clearHighlight = function clearHighlight() { this.element.classList.remove('game__button--active'); }; return Pokemon;
}();
var PokemonList = function () { function PokemonList() { _classCallCheck(this, PokemonList); this.list = []; } PokemonList.prototype.addPokemon = function addPokemon(pokemon) { this.list.push(pokemon); }; PokemonList.prototype.addRandomPokemon = function addRandomPokemon() { this.list.push(this._getRandomPokemon()); }; PokemonList.prototype._getRandomPokemon = function _getRandomPokemon() { var randomIndex = Math.floor(Math.random() * 4); return pokemonMap[pokemonIds[randomIndex]].getId(); }; PokemonList.prototype.getList = function getList() { return this.list; }; PokemonList.prototype.getPokemonWithIndex = function getPokemonWithIndex(index) { return this.list[index]; }; PokemonList.prototype.clearList = function clearList() { this.list = []; }; PokemonList.prototype.numberOfPokemons = function numberOfPokemons() { return this.list.length; }; return PokemonList;
}();
var StrictModeButton = function () { function StrictModeButton() { _classCallCheck(this, StrictModeButton); this.strictModeOn = false; this.element = document.getElementById('strictModeButton'); this.element.addEventListener('click', this.toggleStrictMode.bind(this)); } StrictModeButton.prototype.toggleStrictMode = function toggleStrictMode() { if (this.strictModeOn) { this.strictModeOn = false; this.element.classList.remove('game__controls__strict-mode-button--active'); } else { this.strictModeOn = true; this.element.classList.add('game__controls__strict-mode-button--active'); } }; StrictModeButton.prototype.isOn = function isOn() { return this.strictModeOn; }; StrictModeButton.prototype.disable = function disable() { this.element.style['pointer-events'] = 'none'; }; StrictModeButton.prototype.enable = function enable() { this.element.style['pointer-events'] = 'auto'; }; return StrictModeButton;
}();
var StartButton = function () { function StartButton() { _classCallCheck(this, StartButton); this.gameOn = false; this.element = document.getElementById('startButton'); this.element.addEventListener('click', this.toggleGameOn.bind(this)); } StartButton.prototype.toggleGameOn = function toggleGameOn() { if (this.gameOn) { this.gameOn = false; this.element.classList.remove('game__controls__start-button--active'); greyScaleAllButtons(); Counter.hide(); resetGame(); } else { this.gameOn = true; colorizeAllButtons(); Counter.show(); this.element.classList.add('game__controls__start-button--active'); setTimeout(startGame, 600); } }; StartButton.prototype.disable = function disable() { this.element.style['pointer-events'] = 'none'; }; StartButton.prototype.enable = function enable() { this.element.style['pointer-events'] = 'auto'; }; return StartButton;
}();
var CounterModel = function () { function CounterModel() { _classCallCheck(this, CounterModel); this.element = document.getElementById('counter'); } CounterModel.prototype.update = function update() { this.element.textContent = ComputerPokemons.numberOfPokemons(); }; CounterModel.prototype.setWarningText = function setWarningText() { this.element.textContent = "!!"; }; CounterModel.prototype.setVictoryText = function setVictoryText() { this.element.textContent = "VICTORY!"; }; CounterModel.prototype.hide = function hide() { this.element.style.visibility = "hidden"; }; CounterModel.prototype.show = function show() { this.element.style.visibility = "visible"; }; CounterModel.prototype.reset = function reset() { this.element.textContent = '0'; }; return CounterModel;
}();
var Pikachu = new Pokemon('pikachuAudio', 'pikachu');
var Squirtle = new Pokemon('squirtleAudio', 'squirtle');
var Charmander = new Pokemon('charmanderAudio', 'charmander');
var Bulbasaur = new Pokemon('bulbasaurAudio', 'bulbasaur');
var pokemonIds = ['pikachu', 'squirtle', 'charmander', 'bulbasaur'];
var pokemonMap = { 'pikachu': Pikachu, 'squirtle': Squirtle, 'charmander': Charmander, 'bulbasaur': Bulbasaur
};
var UserPokemons = new PokemonList();
var ComputerPokemons = new PokemonList();
var StrictMode = new StrictModeButton();
var Start = new StartButton();
var Counter = new CounterModel();
var gameElement = document.getElementById('game');
var victoryAudio = document.getElementById('victoryAudio');
function unBlockClickEvents() { var elements = document.getElementsByClassName('game__button'); Array.prototype.forEach.call(elements, function (element) { element.style['pointer-events'] = 'auto'; });
}
function blockClickEvents() { var elements = document.getElementsByClassName('game__button'); Array.prototype.forEach.call(elements, function (element) { element.style['pointer-events'] = 'none'; });
}
function greyScaleAllButtons() { var elements = document.getElementsByClassName('game__button'); Array.prototype.forEach.call(elements, function (element) { element.classList.add('game__button--inactive'); });
}
function colorizeAllButtons() { var elements = document.getElementsByClassName('game__button'); Array.prototype.forEach.call(elements, function (element) { element.classList.remove('game__button--inactive'); });
}
function usersTurnOver(correctUserInput) { if (correctUserInput) { ComputerPokemons.addRandomPokemon(); startNewTurn(1500); } else { onIncorrectInput().then(function () { if (StrictMode.isOn()) { ComputerPokemons.clearList(); ComputerPokemons.addRandomPokemon(); startNewTurn(1000); } else { startNewTurn(1000); } }); }
}
function victory() { blockClickEvents(); Start.disable(); StrictMode.disable(); gameElement.classList.add('game--rotate'); Counter.setVictoryText(); victoryAudio.play(); setTimeout(function () { Start.toggleGameOn(); Start.enable(); StrictMode.enable(); }, 30000);
}
function startNewTurn(inSeconds) { blockClickEvents(); UserPokemons.clearList(); setTimeout(function () { playSequence(ComputerPokemons.numberOfPokemons()); Counter.update(); }, inSeconds);
}
function onIncorrectInput() { return new Promise(function (resolve, reject) { Counter.setWarningText(); gameElement.classList.add('game--shake'); setTimeout(function () { Counter.show(); gameElement.classList.remove('game--shake'); resolve(); }, 1200); });
}
function isUserInputCorrect() { var numberOfUserInputs = UserPokemons.numberOfPokemons(); var computerPokemonsToCheckAgainst = ComputerPokemons.getList().slice(0, numberOfUserInputs); var isEqual = computerPokemonsToCheckAgainst.every(function (computerPokemon, index) { return computerPokemon === UserPokemons.getPokemonWithIndex(index); }); if (isEqual) { return true; } return false;
}
function computersTurnOver() { unBlockClickEvents();
}
function playSequence(numberOfPokemons) { if (numberOfPokemons === 0) { computersTurnOver(); } else { var index = ComputerPokemons.numberOfPokemons() - numberOfPokemons; numberOfPokemons--; var pokemon = pokemonMap[ComputerPokemons.getPokemonWithIndex(index)]; pokemon.iChooseYou().then(function () { return playSequence(numberOfPokemons); }); }
}
function resetGame() { UserPokemons.clearList(); ComputerPokemons.clearList(); Counter.reset();
}
function startGame() { ComputerPokemons.addRandomPokemon(); Counter.update(); playSequence(ComputerPokemons.numberOfPokemons());
}
(function initialize() { greyScaleAllButtons(); Counter.hide();
})();
| Developer | Veronika |
| Username | ivhed |
| Uploaded | November 30, 2022 |
| Rating | 3 |
| Size | 8,481 Kb |
| Views | 38,456 |
Do you need developer help for FreeCodeCamp - Simon Game?
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Veronika (ivhed) Script Codes
| Name | Size |
| CSS Course - Build-a-Kitty Workshop | 3,183 Kb |
| FreeCodeCamp - Tic Tac Toe Game | 4,469 Kb |
| CSS Course - Fixed layout | 2,721 Kb |
| SVG Snowflakes | 2,929 Kb |
| CSS Course - Fluid layout | 2,740 Kb |
| CSS Baby | 1,923 Kb |
| FreeCodeCamp - Tribute Page | 2,599 Kb |
| FreeCodeCamp - Wikipedia Viewer | 3,722 Kb |
| React Pagination | 5,354 Kb |
| CSS Filter Blur | 1,923 Kb |
Create amazing video scripts with AI!
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Similar Scripts & Codes
| Name | Username | Size |
| DNA Double Helix | Hugo | 5,112 Kb |
| Button shaking | SusanneLundblad | 2,227 Kb |
| A Pen by Mike Otis | Mikeotis | 3,185 Kb |
| Simple Login Form Template | Banunn | 3,571 Kb |
| Toggling Divs with jQuery | Yying6 | 1,967 Kb |
| Reading Grid | Tappily | 4,306 Kb |
| Replace url via jquery | Serluk | 1,429 Kb |
| CSS Bot Confusion | Jpod | 3,456 Kb |
| Simple checkbox style | Vncnz | 2,628 Kb |
| Mondrian | Chrisarmstrong | 2,787 Kb |
Do you want hide your ip address?
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!