code-boxx/0-JS-MEM-GAME.MD

## 0-JS-MEM-GAME.MD

      
    Raw
  

              0-JS-MEM-GAME.MD
            
          
    JAVASCRIPT MEMORY GAME

https://code-boxx.com/simple-memory-game-javascript/
IMAGES


LICENSE

Copyright by Code Boxx
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

  
## memory.css
/* (A) CONTAINER */
#mem-game {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 10px;
  max-width: 420px;
  margin: 0 auto;
}

/* (B) CARDS */
.mem-card {
  padding: 10px;
  cursor: pointer;
  background: #e5e5e5;
}
.mem-card.open { background: #fea; }
.mem-card.right { background: #b3ffc0; }
.mem-card.wrong { background: #ffb6b6; }

## memory.html
<!DOCTYPE html>
<html>
  <head>
    <title>Simple Memory Game</title>

    <!-- (A) CSS + JS -->
    <link rel="stylesheet" href="memory.css">
    <script src="memory.js"></script>
  </head>
  <body>
    <!-- (B) GAME CONTAINER -->
    <div id="mem-game"></div>
  </body>
</html>

## memory.js
var mem = {
  // (A) PROPERTIES
  // (A1) HTML ELEMENT
  hWrap : null, // html game wrapper
  // (A2) GAME SETTINGS & FLAGS
  url : "", // optional, url to images
  sets : 6, // number of sets to match
  grid : [], // current game grid
  moves : 0, // total number of moves
  matched : 0, // number of sets that have been matched
  last : null, // last opened card
  lock : null, // timer, lock game controls when showing mismatched cards
  hint : 1000, // how long to show mismatched cards

  // (B) PRELOAD
  preload : () => {
    // (B1) GET HTML GAME WRAPPER
    mem.hWrap = document.getElementById("mem-game");

    // (B2) PRELOAD IMAGES
    let img, loaded = -1;
    for (let i=0; i<=mem.sets; i++) {
      img = document.createElement("img");
      img.onload = () => {
        loaded++;
        if (loaded == mem.sets) { mem.reset(); }
      };
      img.src = `${mem.url}smiley-${i}.png`;
    }
  },

  // (C) RESET GAME
  reset : () => {
    // (C1) RESET ALL FLAGS
    clearTimeout(mem.lock); mem.lock = null;
    mem.moves = 0; mem.matched = 0;
    mem.last = null; mem.grid = [];
    for (let s=1; s<=mem.sets; s++) {
      mem.grid.push(s); mem.grid.push(s);
    }

    // (C2) RANDOM RESHUFFLE CARDS
    // credits : https://gomakethings.com/how-to-shuffle-an-array-with-vanilla-js/
    let current = mem.sets * 2, temp, random;
    while (0 !== current) {
      random = Math.floor(Math.random() * current);
      current -= 1;
      temp = mem.grid[current];
      mem.grid[current] = mem.grid[random];
      mem.grid[random] = temp;
    }
    // console.log(mem.grid); // CHEAT

    // (C3) CREATE HTML CARDS
    mem.hWrap.innerHTML = "";
    for (let id in mem.grid) {
      let card = document.createElement("img");
      card.className = "mem-card";
      card.src = `${mem.url}smiley-0.png`;
      card.onclick = () => mem.open(card);
      card.set = mem.grid[id];
      card.open = false;
      mem.hWrap.appendChild(card);
      mem.grid[id] = card;
    }
  },

  // (D) OPEN A CARD
  open : card => { if (mem.lock == null) { if (!card.open) {
    // (D1) UPDATE FLAGS & HTML
    card.open = true;
    mem.moves++;
    card.src = `${mem.url}smiley-${card.set}.png`;
    card.classList.add("open");

    // (D2) FIRST CARD - SET IN LAST
    if (mem.last == null) { mem.last = card; }

    // (D3) SECOND CARD - CHECK MATCH
    else {
      // (D3-1) REMOVE CSS CLASS
      card.classList.remove("open");
      mem.last.classList.remove("open");

      // (D3-2) MATCHED
      if (card.set == mem.last.set) {
        // UPDATE FLAGS + CSS
        mem.matched++;
        card.classList.add("right");
        mem.last.classList.add("right");
        mem.last = null;

        // END GAME?
        if (mem.matched == mem.sets) {
          alert("YOU WIN! TOTAL MOVES " + mem.moves);
          mem.reset();
        }
      }

      // (D3-3) NOT MATCHED - CLOSE BOTH CARDS ONLY AFTER A WHILE
      else {
        card.classList.add("wrong");
        mem.last.classList.add("wrong");
        mem.lock = setTimeout(() => {
          card.classList.remove("wrong");
          mem.last.classList.remove("wrong");
          card.open = false;
          mem.last.open = false;
          card.src = `${mem.url}smiley-0.png`;
          mem.last.src = `${mem.url}smiley-0.png`;
          mem.last = null;
          mem.lock = null;
        }, mem.hint);
      }
    }
  }}}
};
window.addEventListener("DOMContentLoaded", mem.preload);
	/* (A) CONTAINER */
	#mem-game {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-gap: 10px;
	max-width: 420px;
	margin: 0 auto;
	}

	/* (B) CARDS */
	.mem-card {
	padding: 10px;
	cursor: pointer;
	background: #e5e5e5;
	}
	.mem-card.open { background: #fea; }
	.mem-card.right { background: #b3ffc0; }
	.mem-card.wrong { background: #ffb6b6; }
	<!DOCTYPE html>
	<html>
	<head>
	<title>Simple Memory Game</title>

	<!-- (A) CSS + JS -->
	<link rel="stylesheet" href="memory.css">
	<script src="memory.js"></script>
	</head>
	<body>
	<!-- (B) GAME CONTAINER -->
	<div id="mem-game"></div>
	</body>
	</html>
	var mem = {
	// (A) PROPERTIES
	// (A1) HTML ELEMENT
	hWrap : null, // html game wrapper
	// (A2) GAME SETTINGS & FLAGS
	url : "", // optional, url to images
	sets : 6, // number of sets to match
	grid : [], // current game grid
	moves : 0, // total number of moves
	matched : 0, // number of sets that have been matched
	last : null, // last opened card
	lock : null, // timer, lock game controls when showing mismatched cards
	hint : 1000, // how long to show mismatched cards

	// (B) PRELOAD
	preload : () => {
	// (B1) GET HTML GAME WRAPPER
	mem.hWrap = document.getElementById("mem-game");

	// (B2) PRELOAD IMAGES
	let img, loaded = -1;
	for (let i=0; i<=mem.sets; i++) {
	img = document.createElement("img");
	img.onload = () => {
	loaded++;
	if (loaded == mem.sets) { mem.reset(); }
	};
	img.src = `${mem.url}smiley-${i}.png`;
	}
	},

	// (C) RESET GAME
	reset : () => {
	// (C1) RESET ALL FLAGS
	clearTimeout(mem.lock); mem.lock = null;
	mem.moves = 0; mem.matched = 0;
	mem.last = null; mem.grid = [];
	for (let s=1; s<=mem.sets; s++) {
	mem.grid.push(s); mem.grid.push(s);
	}

	// (C2) RANDOM RESHUFFLE CARDS
	// credits : https://gomakethings.com/how-to-shuffle-an-array-with-vanilla-js/
	let current = mem.sets * 2, temp, random;
	while (0 !== current) {
	random = Math.floor(Math.random() * current);
	current -= 1;
	temp = mem.grid[current];
	mem.grid[current] = mem.grid[random];
	mem.grid[random] = temp;
	}
	// console.log(mem.grid); // CHEAT

	// (C3) CREATE HTML CARDS
	mem.hWrap.innerHTML = "";
	for (let id in mem.grid) {
	let card = document.createElement("img");
	card.className = "mem-card";
	card.src = `${mem.url}smiley-0.png`;
	card.onclick = () => mem.open(card);
	card.set = mem.grid[id];
	card.open = false;
	mem.hWrap.appendChild(card);
	mem.grid[id] = card;
	}
	},

	// (D) OPEN A CARD
	open : card => { if (mem.lock == null) { if (!card.open) {
	// (D1) UPDATE FLAGS & HTML
	card.open = true;
	mem.moves++;
	card.src = `${mem.url}smiley-${card.set}.png`;
	card.classList.add("open");

	// (D2) FIRST CARD - SET IN LAST
	if (mem.last == null) { mem.last = card; }

	// (D3) SECOND CARD - CHECK MATCH
	else {
	// (D3-1) REMOVE CSS CLASS
	card.classList.remove("open");
	mem.last.classList.remove("open");

	// (D3-2) MATCHED
	if (card.set == mem.last.set) {
	// UPDATE FLAGS + CSS
	mem.matched++;
	card.classList.add("right");
	mem.last.classList.add("right");
	mem.last = null;

	// END GAME?
	if (mem.matched == mem.sets) {
	alert("YOU WIN! TOTAL MOVES " + mem.moves);
	mem.reset();
	}
	}

	// (D3-3) NOT MATCHED - CLOSE BOTH CARDS ONLY AFTER A WHILE
	else {
	card.classList.add("wrong");
	mem.last.classList.add("wrong");
	mem.lock = setTimeout(() => {
	card.classList.remove("wrong");
	mem.last.classList.remove("wrong");
	card.open = false;
	mem.last.open = false;
	card.src = `${mem.url}smiley-0.png`;
	mem.last.src = `${mem.url}smiley-0.png`;
	mem.last = null;
	mem.lock = null;
	}, mem.hint);
	}
	}
	}}}
	};
	window.addEventListener("DOMContentLoaded", mem.preload);