jQuery cd., czyli co tam w JavaScriptowej grze na Androida piszczy.

Magiczne slowka

body{margin:0}
html{height:100%,width:100%}

// styl głównego pojemnika, ważny jest z-index o wartości 2 co wyjaśni się później, ustawiamy szerokość, wysokość i tło z ładnego zwierzaczka
#pojemnik{position:absolute;z-index:2;width:100%;height:100%;background: url(tlo1.png);}

//tworzymy informacje o poprawnej odpowiedzi oraz niepoprawnej i ukrywamy je czyli dsiplay:none;

Świetnie!

Oj, nie... ;)

// tworzymy przycisk "Powrót", informacja "Dźwięk", licznik poprawnych i niepoprawnych odpowiedzi nadjąc im odpowiednie identyfikatory
Powrót
Dźwięk
0
0

//importujemy biblioteki jQuery oraz jQuery UI , tę ostatnią do obsługi dwóch efektów shake, oraz bounce czyli mała rzecz a cieszy:)

//tworzymy obiekt pomocniczy o nazwie GRA który będzie przechowywał niezbędne zmienne i tablice kolorów
var GRA = {licznik_zadan:0,
poprawne_odpowiedzi:0,
pomylki:0,
kolor0:["2B60DE","800080","008000","808000"],
kolor1:["FFFF00","FF00FF","43C6DB","ff6600"],
kolory_polaczone:["2B60DE","800080","FFFF00","808000","008000","FF00FF","43C6DB","ff6600","F6358A","8E35EF"],
tablica_pozycji:[0,1,2],
flaga_dzwieku:true,
licznik_koncowy : 0,
licznik_koncowy2 : 5,
licznik_pozycji:0,
stoper:null,
stoper2:null,
kopia:null
};
(function($)
{

//tablica pytan, poprawnych odpowiedzi i niepoprawnych odpowiedzi
var zadanie=[
{pytanie:"wlosy",odpowiedz_prawda:"hair",odpowiedz_falsz:"hip"},
{pytanie:"oko",odpowiedz_prawda:"eye",odpowiedz_falsz:"foot"},
{pytanie:"głowa",odpowiedz_prawda:"head",odpowiedz_falsz:"stomach"},
{pytanie:"kciuk",odpowiedz_prawda:"thumb",odpowiedz_falsz:"waist"},
{pytanie:"dłoń",odpowiedz_prawda:"hand",odpowiedz_falsz:"ankle"},
{pytanie:"palec",odpowiedz_prawda:"finger",odpowiedz_falsz:"chin"},
{pytanie:"nadgarstek",odpowiedz_prawda:"wrist",odpowiedz_falsz:"leg"},
{pytanie:"plecy",odpowiedz_prawda:"back",odpowiedz_falsz:"elbow"},
{pytanie:"ramię",odpowiedz_prawda:"arm",odpowiedz_falsz:"calf"},
{pytanie:"noga",odpowiedz_prawda:"leg",odpowiedz_falsz:"shin"}
];

//wyswietlenie pierwszego zadania
wyswietl_zadanie()

//Tablica tymczasowa do losowania w którym rzędzie wystąpi dana pozycja
function wyswietl_zadanie(){
var odp_pr = zadanie[GRA.licznik_zadan].odpowiedz_prawda;
var odp_fal = zadanie[GRA.licznik_zadan].odpowiedz_falsz;
var pytanie = zadanie[GRA.licznik_zadan].pytanie;
var tablica_tymczasowa = [odp_pr, odp_fal, pytanie ];

//wywolanie funckji tworzacych elementy na ekranie, dwie odpowiedzi, jedno pytanie
stworz_element0(0,odp_pr);
stworz_element1(1,odp_fal);
stworz_element2(2,pytanie);

//obsluga przycisku "Powrót"
$("#powrot").bind("touchstart", function(e){
e.preventDefault();
window.location.replace("file:///android_asset/www/kategorie_powrot.html");
});

/*losowe pomieszanie elementow na ekranie odpowiednio na wysokości 15%, 45% oraz 75%,
należy zwrócić uwagę, że cała ta procedura ma za zadanie podmienić atrybut top elementów by za każdym razem były one wyświetlane w innej kolejności
var losowa = Math.floor(3*Math.random());
var obiekt = GRA.tablica_pozycji[losowa]
if (obiekt==0){$("#0").css({top:"15%"});}
if (obiekt==1){$("#0").css({top:"45%"});}
if (obiekt==2){$("#0").css({top:"75%"});}

GRA.tablica_pozycji = $.grep(GRA.tablica_pozycji, function (wartosc){
return wartosc!=obiekt;
});
var losowa = Math.floor(2*Math.random());
var obiekt = GRA.tablica_pozycji[losowa]
if (obiekt==0){$("#1").css({top:"15%"});}
if (obiekt==1){$("#1").css({top:"45%"});}
if (obiekt==2){$("#1").css({top:"75%"});}

GRA.tablica_pozycji = $.grep(GRA.tablica_pozycji, function (wartosc){
return wartosc!=obiekt;
});

var obiekt = GRA.tablica_pozycji[0]
if (obiekt==0){$("#2").css({top:"15%"});}
if (obiekt==1){$("#2").css({top:"45%"});}
if (obiekt==2){$("#2").css({top:"75%"});}

//wyswietlenie elementow graczowi
$("#1").fadeIn(1000).effect("bounce", { times:3,distance:35 }, 300);
$("#0").fadeIn(1000).effect("shake", { times:1,distance:35 }, 300);
$("#2").fadeIn(1000);
};
// funkcje tworzące elementy: pytanie, odpowiedz poprawna, odpowiedź niepoprawna i dodające je do pojemnika
function stworz_element0 (indeks, wartosc){
var losowy_kolor = Math.floor(4*Math.random());
var pozycjaX = Math.floor(70*Math.random());
var element = $(""+wartosc+"");
element.appendTo("#pojemnik");
};

function stworz_element1 (indeks, wartosc){
var losowy_kolor = Math.floor(4*Math.random());
var pozycjaX = Math.floor(70*Math.random());
var element = $(""+wartosc+"");
element.appendTo("#pojemnik");
};

function stworz_element2 (indeks, wartosc){
var pozycjaX = Math.floor(70*Math.random());
var element = $(""+wartosc+"");
element.appendTo("#pojemnik");
};

// plansza podsumowująca
function wyswietlWynikKoncowy(){
//idziemy na łatwiznę czy robimy kopię przycisku powrót z obsługą zdarzenia clone(true);
GRA.kopia=$("#powrot").clone(true);

//wyswietlenie wyniku polega na dodaniu do "body" elementu div na całą szerokość i wysokość ekranu, ale z indeksem niższym (z-index:1) niż pojemnik na którym rozgrywana była gra (z-index:2), to umożliwi nam ładne zaanimowanie go, co będzie widoczne na filmie

$(' ').appendTo("body");
//i idziemy na całość , czyli animujemy go w lewy dolny róg, jednocześnie zmniejszając mu przejrzystość, co razem daje bardzo ładny efekt
$("#pojemnik").animate({left:"110%",top:"110%",opacity:0},2000);
// tu sprawdzamy jak poszło graczowi i ustawiamy odpowiednią informację
if (GRA.poprawne_odpowiedzi==10){
$("#wynik span").text("Wspaniale, 10 poprawnych odpowiedzi na 10!");
};

if (GRA.poprawne_odpowiedzi>4 && GRA.poprawne_odpowiedzi