所以我很新,如果能够轻松找到解决方案,我深表歉意。如果是这种情况,那么我就不知道如何正确地提出问题。
在学习Javascript时我觉得用我的孩子用Javascript编写一个简单的记忆游戏会很有趣。我的初始scripts.js文件已经达到了这样的程度,我可以通过使用事件监听器来重排数组对并显示相应的图片:
//initialize game by shuffling pairs and then assigning contents of array to game squares
//start with neat pairs
images = [1, 1, 2, 2, 3, 3, 4, 4, 5, 5, 6, 6, 7, 7, 8, 8, 9, 9, 10, 10, 11, 11, 12, 12, 13, 13, 14, 14, 15, 15, 16, 16, 17, 17, 18, 18];
randomImages = [];
//populate randomImages array
randomImages.length = images.length;
function shuffle(array) {
var currentIndex = array.length,
temporaryValue, randomIndex;
// While there remain elements to shuffle...
while (0 !== currentIndex) {
// Pick a remaining element...
randomIndex = Math.floor(Math.random() * currentIndex);
currentIndex -= 1;
// And swap it with the current element.
temporaryValue = array[currentIndex];
array[currentIndex] = array[randomIndex];
array[randomIndex] = temporaryValue;
}
return array;
}
//call shuffle
randomImages = shuffle(images);
//assign images to corresponding image paths in /images
imagePath = []
imagePath.length = images.length;
for (i = 0, max = imagePath.length - 1; i <= max; i++) {
imagePath[i] = "images/" + randomImages[i] + ".jpg";
}
//when clicked show image in corresponding square
document.addEventListener('click', function(e) {
var clickNum = 0;
var imgNum2 = 0;
var imgId2;
e = e || window.event;
//determine which part of the document was clicked and replace image on the fly
var target = e.target || e.srcElement,
imgId = target.id;
if (clickNum < 2) {
imgNum = Number(imgId.replace(/[a-z]*/g, ""));
document.getElementById(imgId).src = imagePath[imgNum - 1];
clickNum++;
imgNum2 = imgNum;
imgId2 = imgId;
} else if (imgNum === images[imgNum]) {
console.log("will add point");
} else {
document.getElementById(imgId2).src = "images/question.png";
document.getElementById(imgId).src = "images/question.png";
}
}, false);
虽然这变得很混乱,所以我试图通过重写代码并使用一个对象来包含大部分游戏数据来整理:
var gameData = {
images: [1, 1, 2, 2, 3, 3, 4, 4, 5, 5, 6, 6, 7, 7, 8, 8, 9, 9, 10, 10, 11, 11, 12, 12, 13, 13, 14, 14, 15, 15, 16, 16, 17, 17, 18, 18],
imagePath: [],
reveal: function(e) {
var clickNum = 0;
var imgNum2 = 0;
var imgId2;
e = e || window.event;
//determine which part of the document was clicked and replace image on the fly
var target = e.target || e.srcElement,
imgId = target.id;
lastId = imgId;
imgNum = Number(lastId.replace(/[a-z]*/g, ""));
if (clickNum < 2) {
document.getElementById(lastId).src = gameData.imagePath[imgNum - 1];
clickNum++;
imgNum2 = imgNum;
imgId2 = lastId;
} else if (imgNum === gameData.images[imgNum]) {
console.log("will add point");
} else {
document.getElementById(imgId2).src = "images/question.png";
document.getElementById(lastId).src = "images/question.png";
}
}
}
function shuffle(array) {
var currentIndex = array.length,
temporaryValue, randomIndex;
// While there remain elements to shuffle...
while (0 !== currentIndex) {
// Pick a remaining element...
randomIndex = Math.floor(Math.random() * currentIndex);
currentIndex -= 1;
// And swap it with the current element.
temporaryValue = array[currentIndex];
array[currentIndex] = array[randomIndex];
array[randomIndex] = temporaryValue;
}
return array;
}
shuffle(gameData.images);
for (i = 0, max = gameData.imagePath.length - 1; i <= max; i++) {
gameData.imagePath[i] = "images/" + gameData.images[i] + ".jpg";
}
document.addEventListener('click', gameData.reveal, false);
我意识到我可能不必粘贴所有代码,但我现在已经丢失了为什么揭示功能停止工作以及为什么变量在我尝试进行故障排除时返回undefined。我认为这可能是一个范围问题,但我花了很多时间查找我想到的可能答案,而不是真正理解破坏代码的原因。 shuffle函数也应该在对象中,但是我试图找出我在gameData.reveal()中失去变量功能的点,我弄得一团糟。