Memory Game

by Sam Fereday

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/chance/1.0.4/chance.min.js"></script>
<div id="shape-container">
  <div id="shape"></div>
  <button id="top-region" class="top"></button>
  <button id="right-region" class="right"></button>
  <button id="bottom-region" class="bottom"></button>
  <button id="left-region" class="left"></button>
</div>
<!--<a href="#" id="start">Start</a>-->

CSS

body {
  padding-top: 6em;
  background: azure;
  text-align: center;
  font: 75%/1.4em arial;
}

.wrong button, .wrong #shape {
  background: #EE0000;
}

.correct button, .correct #shape {
  background: #00EE00;
}

#start {
  width: 4em;
  display: block;
  padding: 1em;
  margin-top: 1em;
  background: coral;
  margin: 0 auto;
  margin-top: 4em;
  border-radius: 12px;
  color: #fff;
  font-weight: bold;
  text-decoration: none;
  transition: all 0.2s ease;
}

#start:hover {
  background: #333;
}

#shape {
  position: absolute !important;
  top: calc(50% - 40px);
  left: calc(50% - 40px);
  width: 80px;
  height: 80px;
  background-color: coral;
  transition: all 0.2s ease;
  // animation: transformieren 2s infinite alternate;
}

.blank {
  border-radius: 0 0 0 0;
  background: coral;
  transform: rotate(0deg);
}

.top {
  border-radius: 50% 0 0 0;
  background: darksalmon;
  transform: rotate(45deg);
}

.right {
  border-radius: 50% 50% 0 0;
  background: indianred;
  transform: rotate(90deg);
}

.bottom {
  border-radius: 50% 50% 50% 0;
  background: lightcoral;
  transform: rotate(135deg);
}

.left {
  border-radius: 50%;
  background: darksalmon;
  transform: rotate(180deg);
}

#shape-container {
  position: relative;
  width: 256px;
  height: 256px;
  margin: 0 auto;
}

button {
  position: absolute;
  width: 32px;
  height: 32px;
  border: 0;
  transition: all 0.2s ease;
  cursor: pointer;
  outline: 0;
}

button:hover {
  background: #333;
  color: #fff;
}

#top-region {
  left: 50%;
  top: 0;
  margin-left: -16px;
}

#right-region {
  right: 0;
  top: 50%;
  margin-top: -16px;
}

#bottom-region {
  bottom: 0;
  left: 50%;
  margin-left: -16px;
}

#left-region {
  left: 0;
  top: 50%;
  margin-top: -16px;
}

JavaScript

var chance = new Chance();

var ShapeClick = function() {

  var self = this;

  // Top, Right, Bottom, Left
  this.combos = [1, 2, 4, 8];
  // An array to hold the right combination
  this.memoryQueue = [];
  // The current level
  this.level = 1;
  // The complexity level, for testing we'll keep it by level number
  this.complexity = this.level;
  // Time given between shape changes (changes with complexity if needed)
  this.timeGiven = 500;
  // Element stuff
  this.mainShape = null;
  this.currentShapeIndex = 0;
  this.toggle = -1;
  this.userMode = false;
  this.animInProgress = false;

  document.getElementById("top-region").addEventListener("click", function() {
    self.onUserInput(1, 0);
  });

  document.getElementById("right-region").addEventListener("click", function() {
    self.onUserInput(2, 1);
  });

  document.getElementById("bottom-region").addEventListener("click", function() {
    self.onUserInput(4, 2);
  });

  document.getElementById("left-region").addEventListener("click", function() {
    self.onUserInput(8, 3);
  });

  return this;

};

ShapeClick.prototype.onUserInput = function(type, idx) {

  if (!this.userMode)
    return;

  var self = this;
  var selectedShapeType = this.combos[idx];
  var correctShapeType = this.memoryQueue[this.currentShapeIndex];

  // Apply the class to visualize
  switch (selectedShapeType) {
    case 1:
      this.mainShape.className = "top";
      break;
    case 2:
      this.mainShape.className = "right";
      break;
    case 4:
      this.mainShape.className = "bottom";
      break;
    case 8:
      this.mainShape.className = "left";
      break;
    default:
    	console.warn("No eligible shape found.");
    	return;
  }

	if(this.animInProgress)
  	return;

  // Since it's only one, it shouldn't be too much of a hit
  this.animInProgress = true;
  setTimeout(function() {
    self.mainShape.className = "blank";
    self.checkIfRight(selectedShapeType, correctShapeType);
    self.animInProgress =...