我是编程和尝试制作记忆游戏的新手。首先，我在CSS中创建了5个不同的标志，我希望＆＃34;播放＆＃34;在我的游戏中。然而 我非常困难，没有想法如何继续。
我知道我需要某种功能只允许两个标记被点击＆＃34;在同一时间，然后另一个函数，检查这两个标志是否相互匹配。
任何想法我怎么能做到这一点，并再次对此非常新。
(function() {
'use strict';
var flagTarget1 = document.getElementById('flag1');
var flagTarget2 = document.getElementById('flag2');
var i;
var j;
//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 swedishFlag = '<div class="ruta"></div>';
var japanFlag = '<div class="flag japan"><div class="part2"></div></div>';
//var japanFlag = '<div class="ruta"></div>';
var litauenFlag = '<div class="flag litauen"><div class="part1"></div><div class="part2"></div></div>';
//var litauenFlag = '<div class="ruta"></div>';
var elfenbenskustenFlag = '<div class="flag elfenbenskusten"><div class="part1"></div><div class="part2"></div></div>';
//var elfenbenskustenFlag = '<div class="ruta"></div>';
var tysklandFlag = '<div class="flag tyskland"><div class="part1"></div><div class="part2"></div></div>';
//var tysklandFlag = '<div class="ruta"></div>';
var swedishFlag2 = '<div class="flag sweden"><div class="vertikal"></div><div class="horisontell"></div></div>';
//var swedishFlag2 = '<div class="ruta"></div>';
var japanFlag2 = '<div class="flag japan"><div class="part2"></div></div>';
//var japanFlag2 = '<div class="ruta"></div>';
var litauenFlag2 = '<div class="flag litauen"><div class="part1"></div><div class="part2"></div></div>';
//var litauenFlag2 = '<div class="ruta"></div>';
var elfenbenskustenFlag2 = '<div class="flag elfenbenskusten"><div class="part1"></div><div class="part2"></div></div>';
//var elfenbenskustenFlag2 = '<div class="ruta"></div>';
var tysklandFlag2 = '<div class="flag tyskland"><div class="part1"></div><div class="part2"></div></div>';
//var tysklandFlag2 = '<div class="ruta"></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];
//shuffles the flaglist
flaglist.shuffle();
class1.shuffle();
//for (var i = 0; i < flaglist.length; i++) {
for (var 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>';
}
}
var flags = document.getElementsByClassName('ruta');
//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');
//console.log('class name boxes ' + boxes[2]);
// the array to hold clicked flag
var flagQueue = [];
function pickFlag(event) { //the event argument gets passed by default
// event.target signifies the target of the event fired
flagQueue.push(event.target.firstChild.className); // push the class string to array
console.log(flagQueue);
if (flagQueue.length == 2) { // if it has 2 elements,
if (flagQueue[0] == flagQueue[1]) { // compare them
console.log('Grattis, du hittade ett matchande par.');
} else {
console.log('Inget matchande par. Försök igen');
}
// whatever happens, reset the flagQueue array
flagQueue.length = 0;
}
}
//loop who adds event for boxes
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:
}
//console.log('flaggnr ' + this.id);
//console.log(temp);
})
boxes[i].addEventListener('click', pickFlag);
}
})();
好的，所以我使用了我在这里得到的答案并使其部分工作。当我得到两个相同的时候，它写了一个＆＃34;祝贺＆＃34;。但是，我需要帮助才能让卡片/瓷砖在没有匹配的情况下转回来，如果匹配则保持不变。 任何帮助，将不胜感激。
修改 我非常感谢你的帮助，但在一切顺利之前，我需要做更多的事情。
程序认为flagQueue [0] .className与flagQueue [1] .className相同，即使它不应该是。我写了一个console.log（flagQueue）来检查原因并得到了这个
[div＃flagga0.ruta.hidden，div＃flagga5.ruta.hidden]
恭喜它是一对（即使它不是）
我在pickFlag（）中做的第一件事就是使标志＆＃34;隐藏＆＃34;，尽管它是被按下的第一个标志。如果我没有弄错，我会选择所有标记＆＃34;隐藏＆＃34;？是否可以将隐藏标志与标志的原始状态进行比较（在点击标志之前？）
小提琴：https://jsfiddle.net/b05sdy9o/
再次感谢！
答案 0 :(得分：0)
欢迎使用Stackoverflow！
请考虑将代码国际化。使用由英语单词构成的变量名称，以及使用英语注释对于试图帮助您的人有帮助。
我要创建一个数组来保存点击的标志。 向其添加标志后，检查它是否有2个元素。 如果是，请比较。如果没有，请等待下一次点击。
// the array to hold clicked flag
var flagQueue = [];
function pickFlag(event){ //the event argument gets passed by default
// event.target signifies the target of the event fired
flagQueue.push(event.target.className); // push the class string to array
if(flagQueue.length==2){ // if it has 2 elements,
if(flagQueue[0]==flagQueue[1]){ // compare them
alert('Congratulations');
}
else {
alert('Try again');
}
// whatever happens, reset the flagQueue array
flagQueue.length = 0;
}
}
// Now we select all HTML elements with class flag
var flags = document.querySelectorAll('.flag');
// And we add an eventListener to each of them.
for(var i=0; i<flags.length; i++){
flags[i].addEventListener('click',pickFlag);
}
修改
我为你做了JSFiddle。 css是基本的，这样你就可以看到脚本是如何工作的。如果您点击两个相同的标记，则会得到“祝贺”＃39;如果您点击2个不同的标记，则会再次尝试＆＃39;。
请注意，JSFiddle在创建页面本身后运行JS代码。因此，如果您想在浏览器中复制我的代码，请确保<script>带有我的JS代码放在</body>之前，所以它在页面上的所有元素都已创建后开始运行
如果您想在Javascript中创建标记，请使用以下代码段：[/ p>
// create array to keep the html elements
var flagElements = [];
// put country names into an array
var countries = ['usa','japan','sweden','finland'];
// create new elements for each of the country names
for(var i=0;i<countries.length;i++){
// first create a div element for the flag
var flag1 = document.createElement('div');
// set the class to 'flag <country>'
flag.className = 'flag '+countries[i];
//push it to the array
flagElements.push(flag1);
//then create a second flag, I will just use the same code
var flag2 = document.createElement('div');
flag2.className = 'flag '+countries[i];
flagElements.push(flag2);
}
// Now you have an array holding all of the divs for you.
// All you need to do is shuffle them and append to DOM.
// You can find info about shuffling on stackoverlow, just implement something
myShufflingAlogirthm(flagElements);
// to append the elements just loop over them and append to body
for(var i=0;i<flagElements.length;i++){
document.body.appendChild(flagElements[i]);
}
另请注意，您可以编辑自己的帖子以包含新的信息，或澄清您的回答者提出的问题。您还可以为其他人的答案添加评论。有关如何使用网站的更多信息，请参阅stackoverflow help pages，包括询问，回答，声誉等。
的示例编辑2 查看此fiddle，了解有关如何实现标记的信息，这些标记将重新隐藏或遗留下来。我添加了一个隐藏的CSS类，我只是切换它。我相信这种事情应该用css来解决，而不是用复杂的代码来解决。 另请注意，我更改了eventListener - 现在它将HTML元素推送到数组中，而不仅仅是className。