Zombie_Killer,
Вам предстоит увлекательное путешествие по островам в поисках сундука сокровищ!!! Испытай свою удачу, отважный пират!!!
<!DOCTYPE html>
<html lang='ru'>
<head>
<meta charset="UTF-8">
<title>Главная</title>
<style type="text/css">*{
margin: 0;
padding: 0;
}
body{
background-color: lime;
}
#mainText{
padding-left: 38%;
color: #b41414;
border-bottom: 2px black solid;
}
.gameLine{
border-bottom: 1px black solid;
}
span{
padding: 0px;
margin-top: 5px;
background-color: #fff;
width: 48px;
height: 48px;
display: inline-block;
background-repeat: no-repeat;
background-image: url(http://ds9ishim.ru/sites/default/files/images/island_with_palm_trees_transparent_clipart.png);
background-size: cover;
}
span.bum{
background-image: url(http://sharikair.ru/baza/16/11664.jpg);
}
span.win{
background-image: url(http://cdn.apk-cloud.com/detail/image/eu.hitb.treasurehunt-w130.png);
}
.game{
background-color: #fff;
margin-top: 15px;
border: 2px black solid;
width: 465px;
height: 405px;
margin-left: 10%;
padding: 0px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function () { // когда загрузится разметка страницы
var spans = $(".gameLine span"),//находим все span
i = Math.random()*spans.length|0, //случайный индекс из общего количества span
num = 0,//счётчик кликов
end; //флаг окончания игры = false
spans.addClass("xz").click(function () { //присвоить класс xz, неизвестно зачем всем span и назначить обработчик для клик
if(end|| $(this).is(".bum") ) return; //если закончена игра(end = true) или было нажатие (класс элемента bum) то ничего далее не делать
var text = " You lose!", cls = "bum"; //текст и название класса
++num; //увеличили счётчик
if (spans.index(this) === i) { //если индекс элемента совппал со случайным
text = " You win!"; //меняем текст
cls = "win"; //меняем название класса
end = true;//флаг окончания игры = true
};
$("#mainText").text(num + text)//выводим текст и счётчик
$(this).addClass(cls); //устанавливаем класс
});
});
</script>
</head>
<body>
<h1 id="mainText">Тест</h1>
<div class="game">
<div class="gameLine">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div class="gameLine">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div class="gameLine">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div class="gameLine">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div class="gameLine">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div class="gameLine">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div class="gameLine">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
</body>
</html>