Chciałbym żeby ta gra wyswietlała obrazki od 1.jpg-8.jpg zamiast napisów. co muszę zrobić
<!DOCTYPE html> <html> <head> <style> div#tarcza{width:416px;
height:416px;
}
div#tarcza > div{
background: url(0.jpg) no-repeat;
width:102px;
height:102px;
float:left;
cursor:pointer;
}
</style>
<!DOCTYPE html>
<html>
<head>
<style>
div#tarcza{
width:416px;
height:416px;
}
div#tarcza > div{
background: url(0.jpg) no-repeat;
width:102px;
height:102px;
float:left;
cursor:pointer;
}
</style>
<script>
var klocki = ['1.jpg','1.jpg','2.jpg','2.jpg','3.jpg','3.jpg','4.jpg','4.jpg','5.jpg','5.jpg','6.jpg','6.jpg','7.jpg','7.jpg','8.jpg','8.jpg',];
var wartosci = [];
var karty = [];
var obrocone = 0;
Array.prototype.mieszacz = function(){
var i = this.length, j, temp;
while(--i > 0){
j = Math.floor(Math.random() * (i+1));
temp = this[j];
this[j] = this[i];
this[i] = temp;
}
}
function tablica(){
obrocone = 0;
var output = '';
klocki.mieszacz();
for(var i = 0; i < klocki.length; i++){
output += '<div id="tile_'+i+'" onclick="obracacz(this,\''+klocki[i]+'\')"></div>';
}
document.getElementById('tarcza').innerHTML = output;
}
function obracacz(tile,val){
if(tile.innerHTML == "" && wartosci.length < 2){
tile.style.background = '#FFF';
tile.innerHTML = val;
if(wartosci.length == 0){
wartosci.push(val);
karty.push(tile.id);
} else if(wartosci.length == 1){
wartosci.push(val);
karty.push(tile.id);
if(wartosci[0] == wartosci[1]){
obrocone += 2;
wartosci = [];
karty = [];
if(obrocone == klocki.length){
alert("koniec gry");
document.getElementById('tarcza').innerHTML = "";
tablica();
}
} else {
function brak_pary(){
var pole_1 = document.getElementById(karty[0]);
var pole_2 = document.getElementById(karty[1]);
pole_1.style.background = 'url(0.jpg) no-repeat';
pole_1.innerHTML = "";
pole_2.style.background = 'url(0.jpg) no-repeat';
pole_2.innerHTML = "";
wartosci = [];
karty = [];
}
setTimeout(brak_pary, 500);
}
}
}
}
</script>
</head>
<body>
<div id="tarcza"></div>
<script>tablica();</script>
</body>
</html>