Здравейте, имам следния код
Искам резултата, който ми излиза накрая да се съхраняват данните в localStorage, обаче не знам, как да го направя. По принцип трябва и снимките или реда на снимките(не знам, как е по правилно) да се запазват в localStorage, но и това не знам, как трябва да стане. Ако може някой да помогне, ще съм му много благодарен.
Код:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="style2.css"/>
<title>HTML5 - базирана образователна игра</title>
<script>
var Game = (function() {
/*------------------------------------------------------------
| Тези променливи са скрити извън методите на Game
| С други думи - това са private променливи,
| достъпни само от методите на Game (play, load, start)
+-----------------------------------------------------------*/
var
lastSelected = {}, // обект, който съхранява последната избрана кутийка с въпрос
sounds = {}, // обект, който съхранява всички звуци, които искаме да ползваме
correct = 0, // брой на верните отговори
wrong = 0, // брой на грешните отговори
max = 5, // максимален брой верни отговори = броя на картинките
startTimer = new Date(), // Стартираме таймер в началото на играта
endTimer; // Променлива, която ще инициализираме в края на играта,
// за да сравним времената
// Функция, която проверява дали item е пропърти на обекта object, а не част от прототипната му верига
hasOwnProperty = function( object, item ) {
return Object.prototype.hasOwnProperty.call( object, item );
};
return {
// Метод, който зарежда избраните звуци в sounds променливата
'load': function ( list ) {
var i;
for( i in list ) {
if( hasOwnProperty( list, i ) ) {
sounds[i] = new Audio();
sounds[i].src = list[i];
}
}
},
// Метод, който инициализира играта
'start': function () {
// Добавяме събитие onclick на документа
document.onclick = function ( e ) {
var
// това е елементът, върху който е кликнато
target = e ? e.target : window.event.srcElement,
// това е атрибута data-animal на елемента, който е кликнат
animal = target.getAttribute( 'data-animal' ),
// това е атрибута data-type на елемента, който е кликнат
type = target.getAttribute( 'data-type' ),
message = '';
/*--------------------------------------------------
| В случай, че е кликнато на някое от нашите
| изображения или кутия с въпрос type ще е различен
| от null, и ще има стойност slot или pic
+-------------------------------------------------*/
switch( type ) {
// В случай, че е кликнато на кутия с въпрос
case 'slot':
// Инициализираме обекта lastSelected с две пропъртита:
// - animal: името на животното
// - target: инстанция на изображението, върху, което е кликнато
lastSelected = {
'animal': animal,
'target': target
};
// Изпълняваме звук с име "animal" (което вземаме от
// data-animal атрибута) на кутията с въпрос
Game.play( animal );
break;
case 'pic':
if( hasOwnProperty( lastSelected, 'animal' ) ) {
if( lastSelected.animal == animal ) {
lastSelected.target.removeAttribute( 'data-type' );
lastSelected.target.style.opacity = .3;
lastSelected.target.src = target.src;
target.style.visibility = 'hidden';
Game.play( 'correct' );
// Ако отговорът е правилен - инкрементираме променливата за верни отговори
correct++;
}
else {
Game.play( 'wrong' );
// Ако отговорът е грешен - инкрементираме променливата за грешни отговори
wrong++;
}
// Ако потребителят е познал всички картинки - изписваме резултата
if( correct == max ) {
endTimer = new Date();
// Разликата между двата таймера в милисекунди
var diff = endTimer.getTime() - startTimer.getTime();
// Обръщаме я в секунди
diff = diff / 1000;
message = "<br><br><br><br>Край на играта!<br><br>";
message += 'Верни: ' + correct + "<br>";
message += 'Грешни: ' + wrong + "<br>";
message += 'Време: ' + diff + " секунди<br><br>";
message += 'Изпълнение: ';
// Съотношението на верните отговори към всички отговори в проценти
// Това никога няма да е 0, понеже играта свършва след като всички
// картинки са били познати. Така че отговорът може само да клони към 0
// т.е. ако имаш безкраен брой грешни отговори, съотношението 5 / inf
// ще клони към 0, но винаги ще е по-голямо, защото в крайна сметка
// си познал всичко
message += Math.round( 100 * ( correct / ( correct + wrong ) ) ) + '%';
// Съобщението за край на играта замества целия HTML в тага "container"
// Ако искаш да го направиш по различен начин, например да запазиш
// някои елементи на играта и да махнеш само животните - можеш
// да премахнеш бутоните за звуци и картинките с removeChild
// и на тяхно място да покажеш нов (досега скрит) балон с текста.
// За да вмъкнеш текста в него - ползвай долния ред. За да го покажеш,
// ползвай нещо като document.getElem...yId('balloon').style.display = 'block';
// В стиловете можеш да му зададеш вече размери, позиция и т.н.
document.getElementById( 'container' ).innerHTML = message;
}
}
break;
}
};
},
// Метод, който изпълнява звук, от заредените с load метода
// Аргумента animal ползваме, за да разберем кой звук от списъка да изпълним
'play': function ( animal ) {
var i;
// Обхождаме свойствата/ппропъртитата на обекта sounds
// За всяко свойство:
for( i in sounds ) {
// Проверяваме дали текущото свойство е част от обекта, а не от прототипната му верига
if( hasOwnProperty( sounds, i ) ) {
// ако звукът се изпълнява в момента - слагаме го на пауза
sounds[i].pause();
// Ако аргумента animal и текущото свойство съвпадат
if( i == animal ) {
// Връщаме показалеца на звука в началото на аудио записа
sounds[i].currentTime = 0;
// и го изпълняваме
sounds[i].play();
}
}
}
}
};
})();
</script>
<style>
body{
font-family:Helvetica,Arial, sans-serif;
font-size:16px;
background:url(index-backgrount1.jpg) no-repeat top center;
background-size: cover;
}
canvas { border: 2px dotted black; }
img {
-moz-border-radius: 15px; /* FF 1+ */
-webkit-border-radius: 15px; /* Safari 3+, Chrome */
border-radius: 15px; /* Opera 10.5, IE 9 */
}
img[data-type] { cursor: pointer; }
</style>
</head>
<body>
<div class="menu-nav">
<ul>
<li><a href="index.html">Начало</a></li>
<li><a href="game.html">Игра със звуци на животни</a></li>
<li><a href="poznai_dumata.html">Познай думата от снимката</a> </li>
<li><a href="Podredi_cvetovete.html">Подреди цветовете</a></li>
<li><a href="paint.html">Рисуване</a></li>
</ul>
</div>
<div id="container">
<br><br><br><center><h1> Познай, на кое животно е съответния звук. </h1></center><br>
<a href=""onclick="prozorec()"><img style='position:absolute;top: 256;right: 1060px;'src="images/frgf.png"> </a>
<p>
<img style='position:absolute;top: 256px;right: 300px;' src="images/bird.jpg" alt="Птица" data-type="pic" data-animal="bird" />
<img style='position:absolute;top: 270px;right: 550px;' src="images/frog.jpg" alt="Жаба" data-type="pic" data-animal="frog" />
<img style='position:absolute;top: 430px;right: 360px;' src="images/goat.jpg" alt="Коза" data-type="pic" data-animal="goat" />
<img style='position:absolute;top: 430px;right: 730px;' src="images/lion.jpg" alt="Лъв" data-type="pic" data-animal="lion" />
<img style='position:absolute;top: 256px;right: 790px;' src="images/rooster.jpg" alt="Петел" data-type="pic" data-animal="rooster" />
</p>
<p>
<img style='position:absolute;top: 650px;right: 940px;' src="images/zvuk1.jpg" alt="Звук 1" data-type="slot" data-animal="lion" />
<img style='position:absolute;top: 650px;right: 740px;' src="images/zvuk2.jpg" alt="Звук 2" data-type="slot" data-animal="bird" />
<img style='position:absolute;top: 650px;right: 540px;' src="images/zvuk3.jpg" alt="Звук 3" data-type="slot" data-animal="frog" />
<img style='position:absolute;top: 650px;right: 340px;' src="images/zvuk4.jpg" alt="Звук 4" data-type="slot" data-animal="rooster" />
<img style='position:absolute;top: 650px;right: 140px;' src="images/zvuk5.jpg" alt="Звук 5" data-type="slot" data-animal="goat" />
</p>
</div>
<script>
Game.load( {
// Зареждаме звуците, които са ни необходими,
// включително тези за правилен и грешен отговор
'correct': 'sounds/correct.ogg',
'wrong': 'sounds/wrong.ogg',
'rooster': 'sounds/rooster.ogg',
'bird': 'sounds/bird.ogg',
'frog': 'sounds/frog.ogg',
'lion': 'sounds/lion.ogg',
'goat': 'sounds/goat.ogg'
} );
// Стартираме играта
Game.start();
function prozorec()
{
//Правим прозореца
var prozorec = window.open("", "", "top=50, left=50, width=260, height=200");
//HTML в прозореца
prozorec.document.open();
//HTML съдържание
prozorec.document.write("<title>ПОМОЩ</title>");
prozorec.document.write("Изскачащ прозорец<br/>");
prozorec.document.write("<textare rows=10 cols=20></textarea>");
//HTML прозорец затваряне
prozorec.document.close();
}
</script>
</body>
</html>Искам резултата, който ми излиза накрая да се съхраняват данните в localStorage, обаче не знам, как да го направя. По принцип трябва и снимките или реда на снимките(не знам, как е по правилно) да се запазват в localStorage, но и това не знам, как трябва да стане. Ако може някой да помогне, ще съм му много благодарен.