Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html lang="pl">
- <head>
- <meta charset="utf-8">
- <title>Magiczne slowka</title>
- <style>
- body{margin:0}
- html{height:100%,width:100%}
- #pojemnik{position:absolute;width:100%;height:100%;z-index:2;background: url(tlo6.png);}
- </style>
- </head>
- <body>
- <div id="pojemnik">
- <div style="z-index:98;position:absolute;top:50px;left:30px;display:none;" id="dobrze">
- <span style="-webkit-border-radius:5px;padding:30px;font-size:25px;font-weight:bold;background:#41A317;">Świetnie!</span>
- </div>
- <div style="z-index:99;position:absolute;top:50px;left:300px;display:none;" id="zle">
- <span style="z-index:99;-webkit-border-radius:5px;padding:30px;font-size:25px;font-weight:bold;background:#FF0000;">Oj, nie... ;)</span>
- </div>
- <div style="position:absolute;left:0;bottom:2%;z-index:100;" id="powrot"> <span style="-webkit-border-radius:5px;padding:5px;background:yellow;font-weight:bold;font-size:15px;padding:10px;">Powrót</span></div>
- <div style="position:absolute;right:0;bottom:2%;z-index:101;" id="dzwiek"> <span style="-webkit-border-radius:5px;padding:5px;background:yellow;font-weight:bold;font-size:15px;padding:10px;">Dźwięk</span></div>
- <div style="position:absolute;left:0%;top:2%;z-index:102;" id="poprawna"> <span style="-webkit-border-radius:5px;padding:5px;background:green;font-weight:bold;font-size:15px;padding:10px;">0</span></div>
- <div style="position:absolute;right:0%;top:2%;z-index:103;" id="niepoprawna"> <span style="-webkit-border-radius:5px;padding:5px;background:red;font-weight:bold;font-size:15px;padding:10px;">0</span></div>
- </div>
- <script src="jquery-1.7.1.min.js"></script>
- <script src="jquery-ui-1.8.21.custom.min.js"></script>
- <script>
- 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],
- kolor_tymczasowy:null,
- flaga_dzwieku:true,
- licznik_koncowy:0,
- licznik_koncowy2:5,
- licznik_pozycji:0,
- stoper:null,
- stoper2:null,
- kopia:null
- };
- (function($)
- {
- var zadanie=[
- {pytanie:"pieprz",odpowiedz_prawda:"pepper",odpowiedz_falsz:"dinosaur"},
- {pytanie:"sól",odpowiedz_prawda:"salt",odpowiedz_falsz:"hill"},
- {pytanie:"sałatka",odpowiedz_prawda:"salad",odpowiedz_falsz:"helicopter"},
- {pytanie:"ciastko",odpowiedz_prawda:"cake",odpowiedz_falsz:"plant"},
- {pytanie:"zupa",odpowiedz_prawda:"soup",odpowiedz_falsz:"queen"},
- {pytanie:"chleb",odpowiedz_prawda:"bread",odpowiedz_falsz:"pyramid"},
- {pytanie:"ser",odpowiedz_prawda:"cheese",odpowiedz_falsz:"sign"},
- {pytanie:"deser",odpowiedz_prawda:"dessert",odpowiedz_falsz:"table"},
- {pytanie:"ryż",odpowiedz_prawda:"rice",odpowiedz_falsz:"comic"},
- {pytanie:"mleko",odpowiedz_prawda:"milk",odpowiedz_falsz:"dolphin"}
- ];
- 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);
- $("#powrot").bind("touchstart", function(e){
- e.preventDefault();
- window.location.replace("file:///android_asset/www/kategorie_powrot.html");
- });
- //losowe pomieszanie elementow na ekranie
- 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,function(){});
- };
- function stworz_element0 (indeks, wartosc){
- var losowy_kolor = Math.floor(4*Math.random());
- var pozycjaX = Math.floor(70*Math.random());
- var element = $("<div style='z-index:9;position:absolute;display:none;top:15%;left:"+pozycjaX+"%;' id='"+indeks+"'><span style='background:#"+GRA.kolor0[losowy_kolor]+";-webkit-border-radius:5px;padding:27px;font-size:large;font-weight:bold;border:3px solid white' >"+wartosc+"</span></div>");
- 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 = $("<div style='z-index:10;position:absolute;display:none;top:45%;left:"+pozycjaX+"%;' id='"+indeks+"'><span style='background:#"+GRA.kolor1[losowy_kolor]+";-webkit-border-radius:5px;padding:27px;font-size:large;font-weight:bold;border:3px solid white;' >"+wartosc+"</span></div>");
- element.appendTo("#pojemnik");
- };
- function stworz_element2 (indeks, wartosc){
- var pozycjaX = Math.floor(70*Math.random());
- var element = $("<div style='z-index:8;position:absolute;display:none;top:75%;left:"+pozycjaX+"%;' id='"+indeks+"'><i><span style='background:lime;-webkit-border-radius:5px;padding:27px;font-size:large;font-weight:bold;' >"+wartosc+"</span></i></div>");
- element.appendTo("#pojemnik");
- };
- function wyswietlWynikKoncowy(){
- GRA.kopia=$("#powrot").clone(true);
- $('<div id="pojemnik_koncowy" style="position:absolute;width:100%;height:100%;z-index:1;background: url(tablica2.png);"><div style="z-index:98;position:absolute;top:10px;left:0;" id="wynik"> <span style="-webkit-border-radius:5px;padding:10px;font-size:15px;font-weight:bold;background:lime;"></span></div></div>').appendTo("body");
- $("#pojemnik").animate({left:"110%",top:"110%",opacity:0},2000);
- if (GRA.poprawne_odpowiedzi==10){
- $("#wynik span").text("Wspaniale, 10 poprawnych odpowiedzi na 10!");
- };
- if (GRA.poprawne_odpowiedzi>4 && GRA.poprawne_odpowiedzi<10){
- $("#wynik span").text("Bardzo dobrze, "+GRA.poprawne_odpowiedzi+" poprawnych odpowiedzi na 10!");
- };
- if (GRA.poprawne_odpowiedzi<5){
- $("#wynik span").text("Hmmm, "+GRA.poprawne_odpowiedzi+" poprawne odpowiedzi na 10 ;)");
- };
- GRA.kopia.appendTo("#pojemnik_koncowy");
- GRA.stoper=window.setInterval (function(){wyswietlaj();},1000);
- GRA.stoper2=window.setInterval (function(){wyswietlaj2();},1000);
- function wyswietlaj (){
- var odpowiedz = zadanie[GRA.licznik_koncowy].odpowiedz_prawda;
- var pytanie = zadanie[GRA.licznik_koncowy].pytanie;
- var pozycja = $('<div style="position:absolute;display:none;left:0%;top:'+(15+(GRA.licznik_koncowy*15))+'%"> <span style="-webkit-border-radius:5px;padding:5px;background:#'+GRA.kolory_polaczone[GRA.licznik_koncowy]+';font-weight:bold;font-size:15px;padding:10px;">'+pytanie+' : '+odpowiedz+'</span></div>');
- pozycja.appendTo ("#pojemnik_koncowy").fadeIn(500);
- GRA.licznik_koncowy +=1;
- if (GRA.licznik_koncowy==5){
- window.clearInterval(GRA.stoper);
- };
- };
- function wyswietlaj2 (){
- var odpowiedz2 = zadanie[GRA.licznik_koncowy2].odpowiedz_prawda;
- var pytanie2 = zadanie[GRA.licznik_koncowy2].pytanie;
- var pozycja2 = $('<div style="position:absolute;display:none;left:50%;top:'+(15+(GRA.licznik_pozycji*15))+'%"> <span style="-webkit-border-radius:5px;padding:5px;background:#'+GRA.kolory_polaczone[GRA.licznik_koncowy2]+';font-weight:bold;font-size:15px;padding:10px;">'+pytanie2+' : '+odpowiedz2+'</span></div>');
- pozycja2.appendTo ("#pojemnik_koncowy").fadeIn(500);
- GRA.licznik_koncowy2 +=1;
- GRA.licznik_pozycji +=1;
- if (GRA.licznik_koncowy2==10){
- window.clearInterval(GRA.stoper2);
- };
- };
- };
- $(window).bind("devicemotion", function(e){
- var zdarzenieRuchu = e.originalEvent,
- akcel = zdarzenieRuchu.accelerationIncludingGravity,
- x = akcel.x,
- y = akcel.y;
- if (y>4){
- GRA.flaga_dzwieku=true;
- $("#dzwiek").remove();
- $('<div style="position:absolute;right:0;bottom:2%;z-index:101;" id="dzwiek"> <span style="-webkit-border-radius:5px;padding:5px;background:yellow;font-weight:bold;font-size:15px;padding:10px;">Dźwięk</span></div>').appendTo("#pojemnik");
- }
- if(y<-4){GRA.flaga_dzwieku=false;
- $("#dzwiek").remove();
- $('<div style="position:absolute;right:0;bottom:2%;z-index:101;" id="dzwiek"> <span style="-webkit-border-radius:5px;padding:5px;background:#00FFFF;font-weight:bold;font-size:15px;padding:10px;text-decoration: line-through;">Dźwięk</span></div>').appendTo("#pojemnik");
- }
- }
- );
- $("#0").live({
- "touchstart": function(e) {if (GRA.flaga_dzwieku){window.angielski.dzwiekPrzesuwania();}
- e.preventDefault();
- $("#0 span").css({background:"magenta"});
- },
- "touchend": function(e) {if (GRA.flaga_dzwieku) {window.angielski.usunDzwiek();};
- $("#0 span").css({background:"lightblue"});
- if ( ( (x-$("#2").position().left<100)&&(x-$("#2").position().left>0) )&&( (y-$("#2").position().top<100)&&(y-$("#2").position().top>0) ) ){if (GRA.flaga_dzwieku){ window.angielski.dzwiekSukcesu();};
- $("#dobrze").fadeIn(1000, function(){GRA.licznik_zadan +=1;GRA.poprawne_odpowiedzi +=1;$("#poprawna span").text( GRA.poprawne_odpowiedzi);}).delay(1000).fadeOut(1000, function()
- {
- if (GRA.licznik_zadan == 10){wyswietlWynikKoncowy();}
- else{
- $("#0").remove();$("#1").remove();$("#2").remove();
- GRA.tablica_pozycji=[0,1,2];
- wyswietl_zadanie();
- }}
- );
- }
- },
- "touchmove": function(e) {
- e.preventDefault();
- var event = e.originalEvent,
- dotyk = event.targetTouches ? event.targetTouches[0] : e;
- x = dotyk.pageX;
- y = dotyk.pageY;
- $(this).css({top:y-40,left:x-30});
- }
- });
- $("#pojemnik").live({"touchstart": function(e) {e.preventDefault();},"touchend": function(e) {},"touchmove": function(e) {e.preventDefault();}});
- $("#1").live({
- "touchstart": function(e) {if(GRA.flaga_dzwieku){window.angielski.dzwiekPrzesuwania();}
- e.preventDefault();
- $("#1 span").css({background:"magenta"});
- },
- "touchend": function(e) {if (GRA.flaga_dzwieku){window.angielski.usunDzwiek();};
- $("#1 span").css({background:"lightgreen"});
- if ( ( (x-$("#2").position().left<100)&&(x-$("#2").position().left>0) )&&( (y-$("#2").position().top<100)&&(y-$("#2").position().top>0) ) ){if (GRA.flaga_dzwieku){window.angielski.dzwiekBledu();};
- $("#zle").fadeIn(1000,function(){ GRA.licznik_zadan +=1; GRA.pomylki +=1; $("#niepoprawna span").text( GRA.pomylki);}).delay(1000).fadeOut(1000, function()
- {
- if (GRA.licznik_zadan == 10){wyswietlWynikKoncowy();}
- else{
- $("#0").remove();$("#1").remove();$("#2").remove();
- GRA.tablica_pozycji=[0,1,2];
- wyswietl_zadanie();}
- });}
- },
- "touchmove": function(e) {
- e.preventDefault();
- var event = e.originalEvent,
- dotyk = event.targetTouches ? event.targetTouches[0] : e;
- x = dotyk.pageX;
- y = dotyk.pageY;
- $(this).css({top:y-40,left:x-30});
- }
- });
- })(jQuery);
- </script>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement