From c4f9b3671b1d877e1fa6837749ec0c43cc29c1a7 Mon Sep 17 00:00:00 2001 From: Carsten Hilmer Date: Tue, 1 Nov 2016 02:49:40 +0100 Subject: [PATCH] Controller bereinig, Animation verbessert --- www/css/style.css | 43 +++++++++++++++-- www/img/mentorhelp_64px.png | Bin 0 -> 6019 bytes www/img/statusbar.svg | 85 +++++++++++++++++++++++++++++++++ www/js/suchspiel_controller.js | 47 +++++++++--------- www/templates/spiel1.html | 16 ++++--- 5 files changed, 155 insertions(+), 36 deletions(-) create mode 100644 www/img/mentorhelp_64px.png create mode 100644 www/img/statusbar.svg diff --git a/www/css/style.css b/www/css/style.css index afdf387..c88f980 100644 --- a/www/css/style.css +++ b/www/css/style.css @@ -45,6 +45,16 @@ to {background-position: -2000px 0;} overflow: hidden; } +.statusbar{ + position: absolute; + bottom: 0px; + left: 0px; + width: 100%; + height: 64px; + overflow: hidden; + text-align: center; +} + .myborder{ display: inline-block; border-radius: 6px; @@ -60,15 +70,38 @@ to {background-position: -2000px 0;} transform: translateY(4px); } -.mentorborder { + + +.mentorhilfe { position: absolute; - top: 122px; - left: 120px; - width: 32px; - height: 32px; + bottom: 0; + left: 0; + width: 64px; + height: 64px; overflow: hidden; + background: url('../img/mentorhelp_64px.png'); } +.mentorborder { + position: absolute; + bottom: 0; + left: 0; + width: 64px; + height: 64px; + overflow: hidden; + background: url('../img/mentorhelp_64px.png'); +} + +.mentor { + width: 64px; + height: 640px; + background: url('../img/mentor_64px.png') left center; + -webkit-animation: mentorsprite 4s steps(10) infinite; +} + +@-webkit-keyframes mentorsprite { + 100% { background-position: 0 -640px; } +} .mentorborderbaumhaus { position: absolute; diff --git a/www/img/mentorhelp_64px.png b/www/img/mentorhelp_64px.png new file mode 100644 index 0000000000000000000000000000000000000000..f44281fa725f6f44d4ab9755008432252230067b GIT binary patch literal 6019 zcmV-}7kuc6P)004R>004l5008;`004mK004C`008P>0026e000+ooVrmw00006 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 xGnX(R1W^vfca*mScn82L0Ly&e@A + + + + + + + + + image/svg+xml + + + + + + + + + + + + + + + + diff --git a/www/js/suchspiel_controller.js b/www/js/suchspiel_controller.js index 630c017..119bb82 100644 --- a/www/js/suchspiel_controller.js +++ b/www/js/suchspiel_controller.js @@ -18,14 +18,14 @@ $ionicPlatform.ready(function() { $scope.sounds=[]; $scope.sounds.push(''); - var tiersound1 = new Media('/android_asset/www/sounds/finde_elefant.mp3', null,null); - var tiersound2 = new Media('/android_asset/www/sounds/finde_esel.mp3', null,null); - var tiersound3 = new Media('/android_asset/www/sounds/finde_hahn.mp3', null,null); - var tiersound4 = new Media('/android_asset/www/sounds/finde_hund.mp3', null,null); - var tiersound5 = new Media('/android_asset/www/sounds/finde_katze.mp3', null,null); - var tiersound6 = new Media('/android_asset/www/sounds/finde_kuh.mp3', null,null); - var tiersound7 = new Media('/android_asset/www/sounds/finde_maus.mp3', null,null); - var tiersound8 = new Media('/android_asset/www/sounds/finde_schaf.mp3', null,null); + var tiersound1 = new Media('/android_asset/www/sounds/finde_elefant.mp3', mentorausblenden,null); + var tiersound2 = new Media('/android_asset/www/sounds/finde_esel.mp3', mentorausblenden,null); + var tiersound3 = new Media('/android_asset/www/sounds/finde_hahn.mp3', mentorausblenden,null); + var tiersound4 = new Media('/android_asset/www/sounds/finde_hund.mp3', mentorausblenden,null); + var tiersound5 = new Media('/android_asset/www/sounds/finde_katze.mp3', mentorausblenden,null); + var tiersound6 = new Media('/android_asset/www/sounds/finde_kuh.mp3', mentorausblenden,null); + var tiersound7 = new Media('/android_asset/www/sounds/finde_maus.mp3', mentorausblenden,null); + var tiersound8 = new Media('/android_asset/www/sounds/finde_schaf.mp3', mentorausblenden,null); var bravosound = new Media('/android_asset/www/sounds/bravo.mp3', goto_newspiel,null); var falschsound = new Media('/android_asset/www/sounds/falsch.mp3', null,null); @@ -124,13 +124,18 @@ $scope.spiele.push(tier7); */ $scope.hilfe = function() { $scope.showmentor=true; - $timeout(function () { - $scope.showmentor=false; - }, 3500); $scope.sounds[$scope.randomid].play(); } +/* +* Mentor ausblenden +*/ +function mentorausblenden(){ + $timeout(function () { $scope.showmentor=false; }, 10); +} + + /* * Antwort prüfen */ @@ -150,11 +155,7 @@ $scope.answer = function(src) { }, 500); }, 500); }, 500); - $scope.showmentorbravo=true; - $timeout(function () { - $scope.showmentorbravo=false; - $timeout(function () {$scope.showmentor=true;}, 1200); - }, 2400); + $timeout(function () { $scope.showmentorbravo=true; }, 0); $scope.bravosound.play(); } else{ @@ -173,15 +174,13 @@ $scope.answer = function(src) { /* * Neues Spiel */ -function goto_newspiel() { - - $scope.showmentor=true; - - $scope.randomid = getRandomInt(1, 8); - //$scope.play('/android_asset/www/sounds/' + $scope.sounds[$scope.randomid]); +function goto_newspiel(){ + $timeout(function () { - $scope.showmentor=false; - }, 3500); + $scope.showmentor=true; + $scope.showmentorbravo=false; + },0); + $scope.randomid = getRandomInt(1, 8); $scope.sounds[$scope.randomid].play(); } diff --git a/www/templates/spiel1.html b/www/templates/spiel1.html index 1703a4d..d9d0729 100644 --- a/www/templates/spiel1.html +++ b/www/templates/spiel1.html @@ -8,14 +8,16 @@
-
-
- + +
+
+
+
-
-
-
-
+
+
+ +