Kartensound eingebaut, kartenanimation verbessert

www/css/style.css

@@ -64,6 +64,24 @@ to {background-position: -2000px 0;}
     border-width: 2px;
  }
 
+.neon {
+    font-family: sans-serif;
+    text-transform: uppercase;
+    font-size: 60px;
+    font-weight: bold;
+    font-style: italic;
+    letter-spacing: .1em;
+    color: white;
+    text-shadow: 0 0 5px white,
+                 0 0 10px white,
+                 0 0 20px yellow,
+                 0 0 40px yellow,
+                 0 0 60px yellow,
+                 0 0 90px yellow,
+                 0 0 120px yellow,
+                 0 0 160px yellow;
+}
+
  .redborder{
     display: inline-block;
     border-radius: 6px;

www/js/suchspiel_controller.js

@@ -4,19 +4,22 @@ appControllers.controller('Suchspiel', function($scope,  $ionicPlatform, $cordov
 $scope.showmentor=false;
 $scope.showmentorbravo=false;
 $scope.spiele=[];
+$scope.spielelistensort=[];
+
 $scope.spieleview=[];
 $scope.tierfinden='';
 $scope.randomid=0;
 $scope.error = false;
-$scope.spielrunden=0
+$scope.spielrunden=0;
-$scope.falscheantwort=0
+$scope.falscheantwort=0;
+$scope.cardindex=0;
+
 $scope.errorcode=99;
 $scope.tierindex=99;
 $scope.spielfertig=-1;
 $scope.spielneu=-1;
 
 
-
 $ionicPlatform.ready(function() {
  
   /*
@@ -35,11 +38,14 @@ $ionicPlatform.ready(function() {
   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', animateoldgame,null);
+  var bravosound = new Media('/android_asset/www/sounds/bravo.mp3', karteausblenden,null);
   var falschsound = new Media('/android_asset/www/sounds/falsch.mp3', null,null);
 
+  var kartegebensound =  new Media('/android_asset/www/sounds/karte.mp3', kartegeben,null);
+
   $scope.bravosound=bravosound;
   $scope.falschsound=falschsound;
+  $scope.kartegebensound=kartegebensound;
 
   $scope.sounds.push(tiersound1);
   $scope.sounds.push(tiersound2);
@@ -61,7 +67,10 @@ var tier = {
   bild: 'elefant.jpg',
   sound1: 'sound_elefant.mp3',
   antwort: '',
-  display: false
+  display: false,
+  einblendecssid: 'elefantein',
+  ausblendecssid: 'elefantaus',
+  sortid: 0
 };
 $scope.spiele.push(tier);
 
@@ -71,7 +80,10 @@ var tier1 = {
   bild: 'esel.jpg',
   sound1: 'sound_esel.mp3',
   antwort: '',
-  display: false
+  display: false,
+  einblendecssid: 'eselein',
+  ausblendecssid: 'eselaus',
+  sortid: 0
 };
 $scope.spiele.push(tier1);
 
@@ -81,7 +93,10 @@ var tier2 = {
   bild: 'hahn.jpg',
   sound1: 'sound_hahn.mp3',
   antwort: '',
-  display: false
+  display: false,
+  einblendecssid: 'hahnein',
+  ausblendecssid: 'hahnaus',
+  sortid: 0
 };
 $scope.spiele.push(tier2);
 
@@ -91,7 +106,10 @@ var tier3 = {
   bild: 'hund.jpg',
   sound1: 'sound_hund.mp3',
   sound2: '',
-  display: false
+  display: false,
+  einblendecssid: 'hundein',
+  ausblendecssid: 'hundaus',
+  sortid: 0
 };
 $scope.spiele.push(tier3);
 
@@ -101,7 +119,10 @@ var tier4 = {
   bild: 'katze.jpg',
   sound1: 'sound_katze.mp3',
   sound2: '',
-  display: false
+  display: false,
+  einblendecssid: 'katzeein',
+  ausblendecssid: 'katzeaus',
+  sortid: 0
 };
 $scope.spiele.push(tier4);
 
@@ -111,7 +132,10 @@ var tier5 = {
   bild: 'kuh.jpg',
   sound1: 'sound_kuh.mp3',
   sound2: '',
-  display: false
+  display: false,
+  einblendecssid: 'kuhein',
+  ausblendecssid: 'kuhaus',
+  sortid: 0
 };
 $scope.spiele.push(tier5);
 
@@ -121,7 +145,10 @@ var tier6 = {
   bild: 'maus.jpg',
   sound1: 'sound_maus.mp3',
   sound2: '',
-  display: false
+  display: false,
+  einblendecssid: 'mausein',
+  ausblendecssid: 'mausaus',
+  sortid: 0
 };
 $scope.spiele.push(tier6);
 
@@ -131,7 +158,10 @@ var tier7 = {
   bild: 'schaf.jpg',
   sound1: 'sound_schaf.mp3',
   sound2: '',
-  display: false
+  display: false,
+  einblendecssid: 'schafein',
+  ausblendecssid: 'schafaus',
+  sortid: 0
 };
 $scope.spiele.push(tier7);
 
@@ -148,7 +178,8 @@ $scope.hilfe = function() {
 * Mentor ausblenden
 */
 function mentorausblenden(){
-  $timeout(function () { $scope.showmentor=false; }, 10);
+  $timeout(function () { $scope.showmentor=false; $scope.cardindex=-1}, 10);
+
 }
 
 
@@ -158,7 +189,7 @@ function mentorausblenden(){
 $scope.answer = function(src) {
 
   if (src==$scope.randomid){
-    $timeout(function () { $scope.showmentorbravo=true; }, 0);
+    $timeout(function () { $scope.showmentorbravo=true;$scope.cardindex=0; }, 0);
     $scope.bravosound.play();
   }
   else{
@@ -171,15 +202,12 @@ $scope.answer = function(src) {
         $scope.errorcode=99;
         $timeout(function () {
           $scope.errorcode=$scope.randomid;
-
+          $timeout(function () { $scope.cardindex=0;karteausblenden(); }, 2400);
-          animateoldgame();
+        }, 1400);
-
+      }, 700);
-        }, 500);
-      }, 500);
 
     }
     else {
-
       $scope.falschsound.play();
       $scope.error = true;
       $timeout(function () {
@@ -196,187 +224,101 @@ $scope.answer = function(src) {
 }
 
 
-
-
-  //$timeout(pushA, 5000).then(pushB());
-
-  function showTier0() {
-    $scope.spielneu=0;
-    $scope.spiele[0].display=true;
-    $scope.chunkedData = chunk($scope.spiele, 4);
-  }
-
-  function showTier1() {
-    $scope.spielneu=1;
-    $scope.spiele[1].display=true;
-    $scope.chunkedData = chunk($scope.spiele, 4);
-  }
-
-function showTier2() {
-    $scope.spielneu=2;
-    $scope.spiele[2].display=true;
-    $scope.chunkedData = chunk($scope.spiele, 4);
-  }
-
-function showTier3() {
-  $scope.spielneu=3;
-  $scope.spiele[3].display=true;
-  $scope.chunkedData = chunk($scope.spiele, 4);
- }
-
-function showTier4() {
-    $scope.spielneu=4;
-    $scope.spiele[4].display=true;
-    $scope.chunkedData = chunk($scope.spiele, 4);
-  }
-
-function showTier5() {
-    $scope.spielneu=5;
-    $scope.spiele[5].display=true;
-    $scope.chunkedData = chunk($scope.spiele, 4);
-  }
-
-function showTier6() {
-    $scope.spielneu=6;
-    $scope.spiele[6].display=true;
-    $scope.chunkedData = chunk($scope.spiele, 4);
-  }
-
-function showTier7() {
-    $scope.spielneu=7;
-    $scope.spiele[7].display=true;
-    $scope.chunkedData = chunk($scope.spiele, 4);
-}
-
-  function hideTier0() {
-    $scope.spielfertig=0;
-    $scope.chunkedData = chunk($scope.spiele, 4);
-  }
-
-  function hideTier1() {
-    $scope.spielfertig=1;
-    $scope.spiele[0].display=false;
-    $scope.chunkedData = chunk($scope.spiele, 4);
-  }
-
-function hideTier2() {
-   $scope.spielfertig=2;
-   $scope.spiele[1].display=false;
-   $scope.chunkedData = chunk($scope.spiele, 4);
-  }
-
-function hideTier3() {
-  $scope.spielfertig=3;
-  $scope.spiele[2].display=false;
-  $scope.chunkedData = chunk($scope.spiele, 4);
- }
-
-function hideTier4() {
-    $scope.spielfertig=4;
-    $scope.spiele[3].display=false;
-    $scope.chunkedData = chunk($scope.spiele, 4);
-  }
-
-function hideTier5() {
-    $scope.spielfertig=5;
-    $scope.spiele[4].display=false;
-    $scope.chunkedData = chunk($scope.spiele, 4);
-  }
-
-function hideTier6() {
-    $scope.spielfertig=6;
-    $scope.spiele[5].display=false;
-    $scope.chunkedData = chunk($scope.spiele, 4);
-  }
-
-function hideTier7() {
-    $scope.spielfertig=7;
-    $scope.spiele[6].display=false;
-    $scope.chunkedData = chunk($scope.spiele, 4);
-}
-
-function ResetGame() {
-    $scope.spiele[7].display=false;
-    $scope.spielfertig=-1;
-    $scope.chunkedData = chunk($scope.spiele, 4);
-    kartenmischen();
-    $timeout(goto_newspiel, 2000);
-}
-
-
-function SetNewGame() {
-    $scope.spielrunden=$scope.spielrunden + 1;
-    $scope.randomid = getRandomInt(0, 7);
-    $scope.tierindex = $scope.randomid;
-    $scope.sounds[$scope.randomid].play();
-}
-
-
 /*
 * Neues Spiel
 */
 function goto_newspiel(){
-
-
   $scope.errorcode=99;
   $scope.falscheantwort=0;
-  animatenewgame();
+  $scope.spielneu=0;
+  $scope.cardindex=-1;
+
+  kartenmischen();
+  
+  $timeout(function () {  $scope.kartegebensound.play(); }, 2000);
 }
 
 
-function animatenewgame(){
+function kartegeben(){
-  $timeout(showTier0, 700).then($timeout(showTier1, 1400));
-  $timeout(showTier2, 2100).then($timeout(showTier3, 2800));
-  $timeout(showTier4, 3500).then($timeout(showTier5, 4200));
-  $timeout(showTier6, 4900).then($timeout(showTier7, 5600));
-  $timeout(SetNewGame, 6300);
 
-}
-
-
-
-
-//$scope.spielfertig=99;
-//$scope.spielneu=99;
-
-function animateoldgame(){
 
   $timeout(function () { 
-    $scope.showmentor=true;
+    $scope.cardindex=$scope.cardindex + 1;
-    $scope.showmentorbravo=false;
+    $scope.spielelistensort[$scope.cardindex].display=true;
-  },0);
+    
+    for(var i = 0; i < $scope.spiele.length; i++) {
+      var data= $scope.spiele[i];
+      if (data.id==$scope.spielelistensort[$scope.cardindex].id){
+        $scope.spielneu=data.einblendecssid;
+      }
+    }
+
+  }, 0);
+  
+  
+  if ($scope.cardindex < 6 ){
+    $scope.kartegebensound.play();
+  }
+  else{
+    $scope.spielneu='';
+    $scope.randomid=getRandomInt(0, 7);
+    $scope.showmentor=true;
+    $scope.sounds[$scope.randomid].play();
+  }
+
+  
   
-  $timeout(hideTier0, 600).then($timeout(hideTier1, 1200));
-  $timeout(hideTier2, 1800).then($timeout(hideTier3, 2400));
-  $timeout(hideTier4, 3000).then($timeout(hideTier5, 3600));
-  $timeout(hideTier6, 4200).then($timeout(hideTier7, 4800));
-  $timeout(ResetGame, 5400);
 }
 
 
+function karteausblenden(){
+  $timeout(function () {  $scope.showmentorbravo=false; }, 0);
+
+  if ($scope.cardindex < 8 ){
+
+    for(var i = 0; i < $scope.spiele.length; i++) {
+      var data= $scope.spiele[i];
+      if (data.id==$scope.spielelistensort[$scope.cardindex].id){
+        $scope.spielfertig=data.ausblendecssid;
+      }
+    }
+    $timeout(function () { 
+      $scope.spielelistensort[$scope.cardindex].display=false; 
+      $scope.chunkedData = chunk($scope.spielelistensort, 4);
+      $scope.cardindex=$scope.cardindex + 1;
+      karteausblenden(); 
+    }, 500);
+  }
+  else{
+   $scope.spielfertig='';
+   goto_newspiel(); 
+  }
+  
+
+  
+}
+
 /*
-*
+* Drei mal mischen :)
 */
 function kartenmischen(){
   $scope.spiele=shuffleArray($scope.spiele);
-                $scope.chunkedData = chunk($scope.spiele, 4);
-  /*
-      $timeout(function () {
   $scope.spiele=shuffleArray($scope.spiele);
-            $scope.chunkedData = chunk($scope.spiele, 4);
-            $timeout(function () {
   $scope.spiele=shuffleArray($scope.spiele);
-              $scope.chunkedData = chunk($scope.spiele, 4);
+
-              $timeout(function () {
+  $scope.spielelistensort=[];
-                $scope.spiele=shuffleArray($scope.spiele);
+  for(var i = 0; i < $scope.spiele.length; i++) {
-                $scope.chunkedData = chunk($scope.spiele, 4);
+    var data= $scope.spiele[i];
-              }, 500);
+    data.sortid=i;
-            }, 500);
+    $scope.spielelistensort.push(data);
-    }, 500);
+  }
-*/
+  $scope.tierindex=$scope.spiele.length + " - " + $scope.spielelistensort.length;
+  $scope.chunkedData = chunk($scope.spielelistensort, 4);
 }
 
 
+
+
 /*
 * Per Zufall neue Aufgabe definieren
 */
@@ -427,12 +369,30 @@ function chunk(arr, size) {
   }
   return newArr;
 }
-
+//$scope.chunkedData = chunk($scope.spiele, 4);
-$scope.chunkedData = chunk($scope.spiele, 4);
 
 /*
-* Neues Spiel starten
+* Initial - Neues Spiel starten
 */
-goto_newspiel();
+$scope.inittimercounter=3;
+$scope.showinittimer=true;
+$timeout(function () { inittimer(); }, 1000);
+
+function inittimer(){
+  
+  if ($scope.inittimercounter > 0){
+
+    $timeout(function () {  
+      $scope.inittimercounter=$scope.inittimercounter - 1;
+      inittimer();
+    }, 1000);
+
+  }
+  else{
+    $scope.showinittimer=false;
+    goto_newspiel();
+  }
+}
+
 
 });

www/templates/spiel1.html

@@ -1,16 +1,21 @@
 <ion-view view-title="Wo ist das Tier">
   <ion-content class="padding">
        
+    <div class="row" style="font-size: 12px;padding-top:55px;" ng-show="showinittimer">
+            <div style="width: 100%;  text-align: center;" class="col">
+                <span class="neon">{{inittimercounter}}</span>
+            </div>
+    </div>
 
-    <div class="row" style="font-size: 12px;" ng-repeat="rows in chunkedData">
+    <div class="row" style="font-size: 12px;padding-top:35px;" ng-repeat="rows in chunkedData">
             <div style="width: 100%;  text-align: center;" class="col" ng-repeat="item in rows">
-                <img ng-class="{'shake':error, 'rubberBand': errorcode == '{{item.id}}', 'fadeOut': spielfertig == '{{item.id}}', 'fadeIn': spielneu == '{{item.id}}'}" class="myborder animated" src="img/{{ item.bild }}"width="96" height="96" alig="center" ng-click="answer(item.id)" ng-show="item.display">
+                <img ng-class="{'shake':error, 'rubberBand': errorcode == '{{item.id}}', 'bounceOut': spielfertig == '{{item.ausblendecssid}}', 'tada': spielneu == '{{item.einblendecssid}}'}" class="myborder animated" src="img/{{ item.bild }}"width="96" height="96" alig="center" ng-click="answer(item.id)" ng-show="item.display">{{item.sortid}}
                 <br>
             </div>
     </div>
 
     <div class="statusbar">
-        {{ tierindex }}
+        {{ tierindex }} - {{cardindex}}
         <div class="mentorhilfe" ng-click="hilfe()">
         <div class="mentorborder" ng-show="showmentor">
             <div class="mentor"></div>