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 03 February 2022, Thursday.

How do I make an freecodecamp - simon game?
  1. FreeCodeCamp - Simon Game Previews
  2. FreeCodeCamp - Simon Game HTML Codes
  3. FreeCodeCamp - Simon Game CSS Codes
  4. FreeCodeCamp - Simon Game JS Codes
FreeCodeCamp - Simon Game Previews

FreeCodeCamp - Simon Game 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 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 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();
})();
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.