rendered paste body<html>
<head>
<title>js #1</title>
<script type="text/javascript">
var global_list_of_images_clicked = [];
function shuffle(array) {
var n = array.length, k, t;
if (n == 0) return false;
while (--n) {
k = Math.floor(Math.random() * (n+1));
t = array[n];
array[n] = array[k];
array[k] = t;
}
}
function table_gen() {
var para = document.getElementById('table_para');
var mytable = document.createElement('table');
var image_num = 0;
var cardFront=["image_0.jpg", "image_1.jpg","image_2.jpg", "image_3.jpg", "image_4.jpg", "image_5.jpg", "image_6.jpg", "image_7.jpg", "image_0.jpg", "image_1.jpg","image_2.jpg", "image_3.jpg", "image_4.jpg", "image_5.jpg", "image_6.jpg", "image_7.jpg"];
shuffle(cardFront);
for(var i = 0; i < 4; ++i) {
var myrow = document.createElement('tr');
for(var j = 0; j < 4; ++j) {
var mycell = document.createElement('td');
var myimg = document.createElement('img');
image_num = ++image_num;
myimg.setAttribute('src', 'a.jpg');
myimg.setAttribute('id', ("image_" + image_num));
myimg.setAttribute('onclick', 'on_img_clicked('+ image_num + ');');
myimg.setAttribute('style', 'display:block;');
var altimg = document.createElement('img')
altimg.setAttribute('src', (cardFront[(image_num -1)]));
global_list_of_images_clicked.push(id: ("image_" + image_num + "_f"), image: (cardFront[(image_num -1)]));
altimg.setAttribute('id', ("image_" + image_num + "_f"));
altimg.setAttribute('onclick', 'on_img_clicked('+ image_num + ');');
altimg.setAttribute('style', 'display:none;');
var winimg = document.createElement('img')
winimg.setAttribute('src', 'b.jpg');
winimg.setAttribute('id', ("image_" + image_num + "_w"));
winimg.setAttribute('onclick', 'on_img_clicked('+ image_num + ');');
winimg.setAttribute('style', 'display:none;');
mycell.appendChild(myimg);
mycell.appendChild(altimg);
mycell.appendChild(winimg);
myrow.appendChild(mycell);
}
mytable.appendChild(myrow);
}
para.appendChild(mytable);
}
function on_img_clicked(image_num) {
var x = image_num;
console.log(image_num);
var selectImg = document.getElementById("image_" + x);
var selectImg_f = document.getElementById("image_" + x + "_f");
var selectImg_w = document.getElementById("image_" + x + "_w");
function flip(id) {
if (global_list_of_images_clicked.length == 1) {
if(selectImg.style.display == "block") {
selectImg.style.display = "none";
selectImg_f.style.display = "block";
} else if (selectImg_f.style.display == "block") {
alert("You already chose that one, please choose another.");
} else {
alert("This match has already been made.");
}
} else if (global_list_of_images_clicked.length == 2) {
if(selectImg.style.display == "block") {
selectImg.style.display = "none"; selectImg_f.style.display = "block";
if (global_list_of_images_clicked[0].image == global_list_of_images_clicked[1].image) {
alert("Yay! A match!");
console.log("TIME DELAY SWITCH FROM SELECTIMG_F TO SELECTIMG_W HERE");
selectImg_f.style.display = "none";
selectImg_w.style.display = "block";
global_list_of_images_clicked = [];
} else {
alert("Aww! No match!");
console.log("TIME DELAY SWITCH FROM SELECTIMG_F TO SELECTIMG HERE");
selectImg_f.style.display = "none";
selectImg.style.display = "block";
global_list_of_images_clicked = [];
}
} else if (selectImg_f.style.display == "block") {
alert("You already chose that one, please choose another.");
global_number_of_images_clicked = 1;
} else {
alert("This match has already been made.");
}
} else {
alert("You broke it.")
}
}
flip("image_" + x);
}
</script>
<style type="text/css">
table {
border: solid 1px;
}
img.front {
display: none;
}
img.back {
display: block;
}
img.win {
display: none;
}
</style>
</head>
<body onLoad="table_gen();">
<p id="table_para"> </p>
</body>
</html>