神経衰弱、（shuffle, matchのやり方）

前提・実現したいこと

神経衰弱を作りたく、shuffle とカードが一致したら、二枚のカード固定かその二枚をあたりの画像に変えたりい。　>>>全コードを表示しました(cssを除いて)
ここに質問の内容を詳しく書いてください。（ifがうまく使えこなせていない）、（arr）
（例）PHP(CakePHP)で●●なシステムを作っています。
■■な機能を実装中に以下のエラーメッセージが発生しました。

発生している問題・エラーメッセージ

エラーメッセージ

該当のソースコード

ソースコード
```<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Card Memory Game</title>
	<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div class="card">
	<div class="item">
		
<img id="imageOne" onclick="checkImage()" style="width: 170px" src="img/cardgame.jpeg">


	</div>
	<div class="item">
		
<img id="imageTwo" onclick="checkImageTwo()" style="width: 170px" src="img/cardgame.jpeg">


	</div>
	<div class="item">
		
<img id="imageThree" onclick="checkImageThree()" style="width: 170px" src="img/cardgame.jpeg">


	</div>
	<div class="item">
		
<img id="imageFour" onclick="checkImageFour()" style="width: 170px" src="img/cardgame.jpeg">


	</div>
	<div class="item">
		
<img id="imageFive" onclick="checkImageFive()" style="width: 170px" src="img/cardgame.jpeg">


	</div>
	<div class="item">
		
<img id="imageSix" onclick="checkImageSix()" style="width: 170px" src="img/cardgame.jpeg">


	</div>
	<div class="item">
		
<img id="imageSeven" onclick="checkImageSeven()" style="width: 170px" src="img/cardgame.jpeg">


	</div>
	<div class="item">
		
<img id="imageEight" onclick="checkImageEight()" style="width: 170px" src="img/cardgame.jpeg">


	</div>

<button id= "btn" style="width: 40px">shuffle</button>


</div>

<h3>Memory card game</h3>

<div id="app"></div>





<script type="text/javascript">

	var reset = document.createElement("btn");
        reset.innerHTML = "Reset";
        reset.addEventListener("click", function() {
          game(app);
        });
        app.appendChild(reset);

 
     


	function shuffle(array) {
  var currentIndex = array.length, temporaryValue, randomIndex;

  while (currentIndex !== 0) {
    randomIndex = Math.floor(Math.random() * currentIndex);
    currentIndex -= 1;
    temporaryValue = array[currentIndex];
    array[currentIndex] = array[randomIndex];
    array[randomIndex] = temporaryValue;
  }
  return array;
}

const deck = document.querySelector(".deck");
function startGame(){
   var shuffledCards = shuffle(cards);
   for (var i= 0; i < shuffledCards.length; i++){
      [].forEach.call(shuffledCards, function(item){
         deck.appendChild(item);
      });
   }
}

window.onload = startGame();



//Shuffule->

	function shuffle(){
	cards.forEach(function(card){
		let randomPositions = Math.floor(Math.random() * 8)
		card.style.order = randomPositions;
	})
}
	var boxOne = 0
	var boxTwo = 0
	var boxThree = 0
	var boxFour = 0
	var boxFive = 0 
	var boxSix = 0
	var boxSeven = 0 
	var boxEight  = 0
	var arr1 = ["imageOne", "imageTwo", "imageThree", "imageFour", "imageFive", "imageSix", "imageSeven", "imageEight"];
	// equal to 0 means not been selected
	// equal to 1 means selected

var app = document.getElementById("app");


	function checkImage(){

	document.getElementById("imageOne").src = "img/11.jpeg";

	boxOne = 1;
	setTimeout(changeToBox, 4000);

}
	

	function checkImageTwo(){

	document.getElementById("imageTwo").src = "img/11.jpeg";

	boxTwo = 1;
	setTimeout(changeToBox, 4000);

}

	function checkImageThree(){

	document.getElementById("imageThree").src = "img/12.jpeg";

	boxThree = 2;
	setTimeout(changeToBox, 4000);

}

	function checkImageFour(){

	document.getElementById("imageFour").src = "img/12.jpeg";

	boxFour = 2;
	setTimeout(changeToBox, 4000);

}
	function checkImageFive(){

	document.getElementById("imageFive").src = "img/14.jpeg";

	boxFive = 3;
	setTimeout(changeToBox, 4000);

}
	function checkImageSix(){

	document.getElementById("imageSix").src = "img/14.jpeg";

	boxSix = 3;
	setTimeout(changeToBox, 4000);

}
	function checkImageSeven(){

	document.getElementById("imageSeven").src = "img/15.jpeg";

	boxSeven = 4;
	setTimeout(changeToBox, 4000);

}
	function checkImageEight(){

	document.getElementById("imageEight").src = "img/15.jpeg";

	boxEight = 4;
	setTimeout(changeToBox, 4000);

}


function changeToBox(){
document.getElementById("imageOne").src = "img/cardgame.jpeg";
document.getElementById("imageTwo").src="img/cardgame.jpeg";
document.getElementById("imageThree").src="img/cardgame.jpeg";
document.getElementById("imageFour").src="img/cardgame.jpeg";
document.getElementById("imageFive").src="img/cardgame.jpeg";
document.getElementById("imageSix").src="img/cardgame.jpeg";
document.getElementById("imageSeven").src="img/cardgame.jpeg";
document.getElementById("imageEight").src="img/cardgame.jpeg";

	
}


function matchState() {

if (boxOne == boxTwo){
	document.getElementById("imageOne").src = "img/3.jpeg";
	document.getElementById("imageTwo").src = "img/11.jpeg";
	


// failure
// you want all images to go back to being hidden
// all values to go to 0
}

### 試したこと
function matchState() {

if (boxOne == boxTwo){
document.getElementById("imageOne").src = "img/3.jpeg";
document.getElementById("imageTwo").src = "img/11.jpeg";




var reset = document.createElement("btn");
reset.innerHTML = "Reset";
reset.addEventListener("click", function() {
game(app);
});
app.appendChild(reset);

function shuffle(array) {
var currentIndex = array.length, temporaryValue, randomIndex;

while (currentIndex !== 0) {
randomIndex = Math.floor(Math.random() * currentIndex);
currentIndex -= 1;
temporaryValue = array[currentIndex];
array[currentIndex] = array[randomIndex];
array[randomIndex] = temporaryValue;
}
return array;
}

const deck = document.querySelector(".deck");
function startGame(){
var shuffledCards = shuffle(cards);
for (var i= 0; i < shuffledCards.length; i++){
[].forEach.call(shuffledCards, function(item){
deck.appendChild(item);
});
}
}
ここに問題に対して試したことを記載してください。

### 補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。