我的代码有问题。我试图做一个记忆游戏,但由于我是一个初学者,这对我来说感觉太先进了。
我认为我拥有大部分代码但需要帮助才能让它完全正常工作。我现在的问题是我的#34;匹配"功能不会运行和后退卡(我的情况下的标志)也不会发生。
希望一些新鲜的眼睛可以帮助我!
(function() {
'use strict';
function checkformatches(lista) {
if (lista.length > 1) {
console.log("IDlist is bigger than 1");
removeclick();
console.log("Made the flags unclickable");
var three = document.getElementById(lista[1]);
var threechild = three.children;
var four = document.getElementById(lista[0]);
var fourchild = four.children;
console.log("The children " + threechild[0].className + fourchild[0].className);
if (threechild[0].className === fourchild[0].className) {
console.log("The flags matches each other!");
lista = [];
lista1 = [];
} else {
console.log("The flags don't match each other!");
waittwo();
lista = [];
}
waitclick();
console.log(lista);
console.log("Made the flags clickable again");
}
// Wait 2 seconds
function waittwo() {
timeoutID = window.setTimeout(turndown, 2000, idlista);
}
// wait then clickable
function waitclick() {
timeoutID = window.setTimeout(clickable, 2000);
}
// clickable
function turndown() {
var one = document.getElementById(lista[1]);
var two = document.getElementById(lista[0]);
one.innerHTML = "";
two.innerHTML = "";
idlista = [];
}
function removeclick() {
for (i = 0; i < flags.length; i++) {
flags[i].style.pointerEvents = "none";
}
}
function clickable() {
for (i = 0; i < flags.length; i++) flags[i].style.pointerEvents = "auto";
}
//loop that add events on the boxes/rutor
for (i=0; i < boxes.length; i++) {
boxes[i].addEventListener('click', function() {
temp = document.getElementById(this.id);
console.log(temp);
switch (this.id) {
case 'flagga0':
temp.innerHTML = flaglist[0];
break;
case 'flagga1':
temp.innerHTML = flaglist[1];
break;
case 'flagga2':
temp.innerHTML = flaglist[2];
break;
case 'flagga3':
temp.innerHTML = flaglist[3];
break;
case 'flagga4':
temp.innerHTML = flaglist[4];
break;
case 'flagga5':
temp.innerHTML = flaglist[5];
break;
case 'flagga6':
temp.innerHTML = flaglist[6];
break;
case 'flagga7':
temp.innerHTML = flaglist[7];
break;
case 'flagga8':
temp.innerHTML = flaglist[8];
break;
case 'flagga9':
temp.innerHTML = flaglist[9];
break;
default:
}
lista++
console.log(document.getElementsByClassName('japan'));
console.log("counter" + lista);
idlista.push(this.id);
console.log('idlist' + idlista);
checkformatches(idlista);
})}
var flagTarget1 = document.getElementById('flag1');
var flagTarget2 = document.getElementById('flag2');
var i;
var j;
var timeoutID;
var idlista = [];
lista = 0;
//function that can shuffle the array
Array.prototype.shuffle = function() {
var input = this;
for (var i = input.length - 1; i >= 0; i--) {
var randomIndex = Math.floor(Math.random() * (i + 1));
var itemAtIndex = input[randomIndex];
input[randomIndex] = input[i];
input[i] = itemAtIndex;
}
return input;
}
var swedishFlag = '<div class="flag sweden"><div class="vertikal"></div><div class="horisontell"></div></div>';
var japanFlag = '<div class="flag japan"><div class="part2"></div></div>';
var litauenFlag = '<div class="flag litauen"><div class="part1"></div><div class="part2"></div></div>';
var elfenbenskustenFlag = '<div class="flag elfenbenskusten"><div class="part1"></div><div class="part2"></div></div>';
var tysklandFlag = '<div class="flag tyskland"><div class="part1"></div><div class="part2"></div></div>';
var swedishFlag2 = '<div class="flag sweden"><div class="vertikal"></div><div class="horisontell"></div></div>';
var japanFlag2 = '<div class="flag japan"><div class="part2"></div></div>';
var litauenFlag2 = '<div class="flag litauen"><div class="part1"></div><div class="part2"></div></div>';
var elfenbenskustenFlag2 = '<div class="flag elfenbenskusten"><div class="part1"></div><div class="part2"></div></div>';
var tysklandFlag2 = '<div class="flag tyskland"><div class="part1"></div><div class="part2"></div></div>';
//list with classes
var class1 = ['sweden', 'litauen', 'japan', 'tyskland', 'elfenbenskusten', 'sweden', 'litauen', 'japan', 'tyskland', 'elfenbenskusten']
// List with flags
var flaglist = [swedishFlag, japanFlag, litauenFlag, elfenbenskustenFlag, tysklandFlag, swedishFlag2, japanFlag2, litauenFlag2, elfenbenskustenFlag2, tysklandFlag2];
var flags = document.getElementsByClassName('ruta');
//shuffles the flaglist
flaglist.shuffle();
class1.shuffle();
//for (var i = 0; i < flaglist.length; i++)
for ( i = 0; i < 10; i++) {
//document.body.appendChild(flaglist[i]);
if (i < 5) {
//flagTarget1.innerHTML += flaglist[i];
flagTarget1.innerHTML += '<div class="ruta"></div>';
//console.log('ritar ' + flaglist[i]);
} else {
//flagTarget2.innerHTML += flaglist[i];
flagTarget2.innerHTML += '<div class="ruta"></div>';
}
}
//loop who adds their own ID to every flag-div.
for (i = 0; i < flags.length; i++) {
flags[i].setAttribute('id', 'flagga' + (i));
}
//loop who changes style.top on the first row of flags och spreads them out
for (i = 0, j = 145; i < 5; i++, j += 200) {
var temp = document.getElementById('flagga' + i);
temp.style.left = j + 'px';
temp.style.top = "50px";}
//loop who changes style.top on the second row of flags och spreads them out
for (i = 5, j = 145; i <= 9; i++, j += 200) {
var temp = document.getElementById('flagga' + i);
//console.log(temp);
temp.style.left = j + 'px';
temp.style.top = '210px';}
var boxes = document.getElementsByClassName('ruta');
var flags = document.querySelectorAll('.ruta');
for (i=0; i<flags.length; i++) {
flags[i].innerHTML = "";
console.log('händer nåt?')
}
})();
编辑:对代码进行了一些更改,并认为我已经拥有了所有内容,但我错过了冒号(;,&#34;(&#34;,&#34; { &#34;)或类似的东西。
感谢帮助!