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

Jeśli jesteś legendą formatu Kamila Brzezińskiego, gwiazdą front-endu, pracujesz dla Microsoftu czy Google:) nie znajdziesz tu nic ciekawego.
Jeśli jesteś „miszczem świata i okolic” w programowaniu , lubisz sie kłócić bez sensu, jesteś znanym forumowym „optymalizatorem kodu”, lubisz dywagować w nieskończoność ile diabłów mieści się na końcu szpilki czyli o oddzieleniu html od stylów i kodu JavaScript lub pisać teksty w stylu ” ten kod to syf”, „nadaje się na zaliczenie w gimnazjum” i inne tego typu głupoty, jesteś notorycznie sfrustrowany lub właśnie pokłóciłeś się z żoną , zdecydowanie nie czytaj dalej! Zawróć! Odpuść sobie i innym.
Jeśli jesteś niedzielnym programistą, lubisz Androida, języki webowe i ojca Rydz.. (żartowałem:), chciałbyś w miłej atmosferze wymienić konstruktywne uwagi i zrobić lub nauczyć sie czegoś dobrego to ten artykuł jest dla Ciebie:)
A więc do dzieła.
Artykuł ten jest ciągiem dalszych opowieści z mchu i paproci o jakże ponętnej bibliotece JavaScript, czyli ucieleśnionym pięknie znanym jako jQuery pozostającej w związku małżeńskim z rogatym bożkiem, któremu pokątnie cześć oddawał sam Steve, znanym jako HTML (5), czyli czymś co zdaniem wielkich i jeszcze większych, jest przyszłością mobilnego programowania.
Przechodząc do rzeczy, po wniesieniu drzewa do lasu, czyli napisaniu nikomu niepotrzebnej aplikacji mobilnej do SpidersWeb na Androida (co tam Panie w wersji na iOS? hehe;), nadszedł czas na zrobienie czegoś, jak napisałem powyżej, konstruktywnego i pozytywnego.
Padło na edukacyjną grę do nauki języka angielskiego, której idea streszcza się w tym video:
db.tt/NZfrp7jB
Nie skupiałem się na opisie intro, jest ono łatwe do napisania co jest oczywiste i mało ciekawe od strony programistycznej, poniżej staram się objaśnić jak została przekuta w to co najfajniejsze dla każdego programisty, czyli sam kod, owa idea jednej z plansz gry.
Do następnego (być może) razu:)

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