|
|
|
|
@ -2,24 +2,23 @@ window.onload = function() {
|
|
|
|
|
console.log('loaded');
|
|
|
|
|
|
|
|
|
|
// Invoke your chain of functions and listeners within window.onload
|
|
|
|
|
// var button = document.getElementsByTagName('button');
|
|
|
|
|
// button.onclick(function(){
|
|
|
|
|
// start();
|
|
|
|
|
// })
|
|
|
|
|
|
|
|
|
|
var startButton = document.querySelector('button');
|
|
|
|
|
startButton.onclick = function() {
|
|
|
|
|
start();
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
var tiles = ['A', 'A', 'B', 'B', 'C', 'C', 'D', 'D', 'E', 'E'];
|
|
|
|
|
|
|
|
|
|
// USE THIS TO SHUFFLE YOUR ARRAYS
|
|
|
|
|
//o = array
|
|
|
|
|
var tiles = ['A', 'A', 'B', 'B', 'C', 'C', 'D', 'D', 'E', 'E'];
|
|
|
|
|
function shuffle(o) {
|
|
|
|
|
for(var j, x, i = o.length; i; j = Math.floor(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x);
|
|
|
|
|
return o;
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
function start(){
|
|
|
|
|
|
|
|
|
|
shuffle(tiles);
|
|
|
|
|
makeAndDisplayTiles();
|
|
|
|
|
}
|
|
|
|
|
@ -29,42 +28,71 @@ function makeAndDisplayTiles(){
|
|
|
|
|
document.getElementById('info').innerHTML = "";
|
|
|
|
|
for(var i = 0; i < tiles.length; i++){
|
|
|
|
|
var tile = document.createElement('div');
|
|
|
|
|
tile.setAttribute('class', 'column');
|
|
|
|
|
tile.className = "column";
|
|
|
|
|
tile.setAttribute('data-value', tiles[i]);
|
|
|
|
|
document.getElementById('game').appendChild(tile);
|
|
|
|
|
tile.onclick = function(){
|
|
|
|
|
makePlay(this);
|
|
|
|
|
};
|
|
|
|
|
}
|
|
|
|
|
// addEventsToTiles();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// function addEventsToTiles(){
|
|
|
|
|
// var tile = document.getElementsByClassName('column');
|
|
|
|
|
// tile.onclick = makePlay(this);
|
|
|
|
|
// }
|
|
|
|
|
|
|
|
|
|
function makePlay(tile){
|
|
|
|
|
tile.innerHTML = tile.dataset.value;
|
|
|
|
|
tile.className += " found";
|
|
|
|
|
}
|
|
|
|
|
tile.className += " clicked";
|
|
|
|
|
|
|
|
|
|
var selected = document.getElementsByClassName('clicked');
|
|
|
|
|
|
|
|
|
|
if (selected.length === 2) {
|
|
|
|
|
checkForMatch();
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function processData(n) {
|
|
|
|
|
var result="";
|
|
|
|
|
for(var i = 1; i<=n; i++){
|
|
|
|
|
var spaces = i;
|
|
|
|
|
while(spaces <= n-1){
|
|
|
|
|
result+=" ";
|
|
|
|
|
spaces++;
|
|
|
|
|
function checkForMatch() {
|
|
|
|
|
setTimeout(function() {
|
|
|
|
|
var selected = document.getElementsByClassName('clicked');
|
|
|
|
|
if (selected[0].innerText === selected[1].innerText) {
|
|
|
|
|
console.log('match');
|
|
|
|
|
selected[0].className = "column found";
|
|
|
|
|
selected[0].className = "column found";
|
|
|
|
|
} else {
|
|
|
|
|
console.log('no match');
|
|
|
|
|
selected[0].innerText = "";
|
|
|
|
|
selected[1].innerText = "";
|
|
|
|
|
selected[0].className = "column";
|
|
|
|
|
selected[0].className = "column";
|
|
|
|
|
}
|
|
|
|
|
var stairs = i;
|
|
|
|
|
while(stairs > 0){
|
|
|
|
|
result+='#';
|
|
|
|
|
stairs--;
|
|
|
|
|
checkForWin();
|
|
|
|
|
}, 1500);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function checkForWin() {
|
|
|
|
|
var foundItems = document.getElementsByClassName('found');
|
|
|
|
|
|
|
|
|
|
if (foundItems.length === 10) {
|
|
|
|
|
for (var i=0; i < foundItems.length; i++) {
|
|
|
|
|
foundItems[i].className = "column won";
|
|
|
|
|
}
|
|
|
|
|
result+='\n'
|
|
|
|
|
}
|
|
|
|
|
console.log(result);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// don't need data value
|
|
|
|
|
// 'found' is only added after a match
|
|
|
|
|
// checkForMatch goes inside a setTimeout
|
|
|
|
|
// start should begin with a listener
|
|
|
|
|
|
|
|
|
|
// remove a class name by using 'className' and writing the names
|
|
|
|
|
// of the classes you want to keep, and adding classes if you want
|
|
|
|
|
// EXAMPLE: If an element with the class of 'column' also has a class of
|
|
|
|
|
// 'clicked' and you want to remove 'clicked',
|
|
|
|
|
//
|
|
|
|
|
|
|
|
|
|
// do not need to turn off the event listener
|
|
|
|
|
// apply 'won' class
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|