CSS Media Screen angepasst, Minispiel mit Sounds und effekten versehen

www/spielsets/minispielset2/css/minispiel.css

@@ -18,4 +18,35 @@
 .dropzone{
   height:96px;
   width: 128px;
+}
+
+
+.rotate {
+    -webkit-animation:spin 4s linear;
+    -moz-animation:spin 4s linear;
+    animation:spin 4s linear;
+}
+@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
+@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
+@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
+
+
+/* ----------- Kindle Fire HD 7" ----------- */
+/* Landscape */
+@media only screen 
+  and (min-device-width: 800px) 
+  and (max-device-width: 1280px) 
+  and (-webkit-min-device-pixel-ratio: 1.5) 
+  and (orientation: landscape) {
+
+  .dragzone{
+    height:100px;
+    width: 128px;
+  }
+
+  .dropzone{
+    height:200px;
+    width: 256px;
+  }
+
 }

www/spielsets/minispielset2/js/minispiel_controller.js

@@ -10,6 +10,8 @@ $scope.chunkedDataBilderMask = [];
 
 $scope.spielendecounter=4;
 
+$scope.complete=false;
+
 
 /*
 * Spielset laden
@@ -32,8 +34,11 @@ $ionicPlatform.ready(function() {
   * Sounds definieren
   */
 
-  $scope.lachensounds=[];
-  $scope.gamesounds=[];
+  var completesound='';
+  var failsound='';
+  var setsound='';
+  var rotatesound='';
+
 
 
   /*
@@ -45,19 +50,21 @@ $ionicPlatform.ready(function() {
   * Typen: gameoversound -> Spielzu ende Zeit für minispiel etc.
   * Typen: backgroundmusic -> Hintergrundmusik
   */
-  $http.get('spielsets/minispielset1/systemsounds.json').success(function(data) {
+  $http.get('spielsets/minispielset2/systemsounds.json').success(function(data) {
 
     for(var i = 0; i < data.length; i++) {
           
-      if (data[i].type=='lachensound'){
-        $scope.lachensounds.push(data[i].sound);
+      if (data[i].type=='setsound'){
+        $scope.setsound=data[i].sound;
       }
-      else if (data[i].type=='gamesound'){
-        $scope.gamesounds.push(data[i].sound);
-
-        $timeout(function () {  
-          //playsound('gamesound', $scope.gamesounds[0], minispielstart,'1.0');
-        }, 1000);
+      else if (data[i].type=='failsound'){
+        $scope.failsound=data[i].sound;
+      }
+      else if (data[i].type=='completesound'){
+        $scope.completesound=data[i].sound;
+      }
+      else if (data[i].type=='rotatesound'){
+        $scope.rotatesound=data[i].sound;
       }
       else if (data[i].type=='backgroundmusic'){
         //backgroundsounds_mediahandler.setbackgroundsoundfile(data[i].sound);
@@ -106,16 +113,11 @@ function playsound(playtype, soundfile, callbackfunction, volume){
 
   $ionicPlatform.ready(function() {
 
-    if (playtype=='lachensound'){
-
-      /*
-      * Nur durchführen wenn Bär nicht lacht
-      */
-      if ($scope.bin_am_lachen==false){
+    if (playtype=='setsound'){
 
         try{
 
-          lachensound.release();
+          setsound.release();
         
         }
         catch(e){
@@ -124,19 +126,17 @@ function playsound(playtype, soundfile, callbackfunction, volume){
           console.log("Sounddatei nicht da");
         }
       
-        lachensound = new Media(soundfile, callbackfunction ,null);
-        $scope.bin_am_lachen=true;
-        lachensound.play();
+        setsound = new Media(soundfile, callbackfunction ,null);
+        setsound.play();
 
-      }
 
     }
-    else if (playtype=='gamesound'){
+    else if (playtype=='failsound'){
       
       try{
 
         //versuchen Soundfile freizugeben
-        gamesound.release();
+        failsound.release();
 
       }
       catch(e){
@@ -145,15 +145,81 @@ function playsound(playtype, soundfile, callbackfunction, volume){
         console.log("Sounddatei nicht da");
       }
 
-      gamesound = new Media(soundfile, callbackfunction ,null);
-      gamesound.play();
+      failsound = new Media(soundfile, callbackfunction ,null);
+      failsound.play();
 
     }
+    else if (playtype=='rotatesound'){
+      
+      try{
 
+        //versuchen Soundfile freizugeben
+        rotatesound.release();
+
+      }
+      catch(e){
+
+        //Soundfile Objekt gabs nicht oder Freigabefehler
+        console.log("Sounddatei nicht da");
+      }
+
+      rotatesound = new Media(soundfile, callbackfunction ,null);
+      rotatesound.play();
+
+    }
+    else if (playtype=='completesound'){
+      
+      try{
+
+        //versuchen Soundfile freizugeben
+        completesound.release();
+
+      }
+      catch(e){
+
+        //Soundfile Objekt gabs nicht oder Freigabefehler
+        console.log("Sounddatei nicht da");
+      }
+
+      completesound = new Media(soundfile, callbackfunction ,null);
+      completesound.play();
+
+    }
   });
 
 } 
 
+$scope.rotateitem=function(id){
+
+  if($scope.complete==true){
+
+    for(var i = 0; i < $scope.spiele.length; i++) {
+
+      if (id==$scope.spiele[i].id){
+        $scope.spiele[i].rotate=true;
+        playsound('rotatesound', $scope.rotatesound, null, '1.0');
+        $timeout(function () { resetrotate(id); }, 4100);
+      }
+      
+    }
+
+  }
+
+}
+
+
+function resetrotate(id){
+  
+  for(var i = 0; i < $scope.spiele.length; i++) {
+
+    if (id==$scope.spiele[i].id){
+      $scope.spiele[i].rotate=false;
+    }
+      
+  }
+
+}
+
 $scope.onDragComplete=function(data,evt){
 
   for(var i = 0; i < $scope.spiele.length; i++) {
@@ -177,7 +243,7 @@ $scope.onDragStart=function(data,evt){
 }
 
 $scope.onDragStop=function(data,evt){
-
+  playsound('failsound', $scope.failsound, null, '1.0');
   for(var i = 0; i < $scope.spiele.length; i++) {
 
     if (data.id==$scope.spiele[i].id){
@@ -193,6 +259,7 @@ $scope.onDropComplete=function(data,evt,dropid){
 
   //richtige form erwischt
   if (data.id==dropid){
+    playsound('setsound', $scope.setsound, null, '1.0');
     for(var i = 0; i < $scope.spiele.length; i++) {
 
       if (data.id==$scope.spiele[i].id){
@@ -207,8 +274,9 @@ $scope.onDropComplete=function(data,evt,dropid){
   console.log("dropid: " + dropid +  " drop success, data:", data);
 
   if ($scope.spielendecounter==0){
-    
-    $timeout(function () { $state.go('home'); }, 5000);
+    $scope.complete=true;
+    playsound('completesound', $scope.completesound, null, '1.0');
+    $timeout(function () { $state.go('home'); }, 15000);
 
   }
 }

www/spielsets/minispielset2/spielset.json

@@ -1,6 +1,6 @@
 [
-	{"id": 0, "bild": "spielsets/minispielset2/images/blaues_auto.png", "bildmaske": "spielsets/minispielset2/images/blaues_auto_maske.png", "sound": "/android_asset/www/spielsets/spielset1/sounds/finde_affe.mp3", "display": 1, "dragged":0 },
-	{"id": 1, "bild": "spielsets/minispielset2/images/rotes_auto.png", "bildmaske": "spielsets/minispielset2/images/rotes_auto_maske.png",  "sound": "/android_asset/www/spielsets/spielset1/sounds/finde_esel.mp3", "display": 1, "dragged":0 },
-	{"id": 2, "bild": "spielsets/minispielset2/images/schneemann.png", "bildmaske": "spielsets/minispielset2/images/schneemann_maske.png",  "sound": "/android_asset/www/spielsets/spielset1/sounds/finde_hase.mp3", "display": 1, "dragged":0 },
-	{"id": 3, "bild": "spielsets/minispielset2/images/teddy.png", "bildmaske": "spielsets/minispielset2/images/teddy_maske.png",  "sound": "/android_asset/www/spielsets/spielset1/sounds/finde_hund.mp3", "display": 1, "dragged":0 }
+	{"id": 0, "bild": "spielsets/minispielset2/images/blaues_auto.png", "bildmaske": "spielsets/minispielset2/images/blaues_auto_maske.png", "sound": "/android_asset/www/spielsets/spielset1/sounds/finde_affe.mp3", "rotate":0, "display": 1, "dragged":0 },
+	{"id": 1, "bild": "spielsets/minispielset2/images/rotes_auto.png", "bildmaske": "spielsets/minispielset2/images/rotes_auto_maske.png",  "sound": "/android_asset/www/spielsets/spielset1/sounds/finde_esel.mp3", "rotate":0, "display": 1, "dragged":0 },
+	{"id": 2, "bild": "spielsets/minispielset2/images/schneemann.png", "bildmaske": "spielsets/minispielset2/images/schneemann_maske.png",  "sound": "/android_asset/www/spielsets/spielset1/sounds/finde_hase.mp3", "rotate":0, "display": 1, "dragged":0 },
+	{"id": 3, "bild": "spielsets/minispielset2/images/teddy.png", "bildmaske": "spielsets/minispielset2/images/teddy_maske.png",  "sound": "/android_asset/www/spielsets/spielset1/sounds/finde_hund.mp3", "rotate":0, "display": 1, "dragged":0 }
 	]

www/spielsets/minispielset2/systemsounds.json

@@ -1,5 +1,7 @@
 [
-	{"id": 0, "type": "gamesound", "sound": "/android_asset/www/spielsets/minispielset1/sound/kitzeldenbaeren.mp3"},
-	{"id": 1, "type": "lachensound", "sound": "/android_asset/www/spielsets/minispielset1/sound/lachen1.mp3"},
-	{"id": 2, "type": "lachensound", "sound": "/android_asset/www/spielsets/minispielset1/sound/lachen2.mp3"}
+	{"id": 0, "type": "gamesound", "sound": "/android_asset/www/spielsets/minispielset2/sound/kitzeldenbaeren.mp3"},
+	{"id": 1, "type": "setsound", "sound": "/android_asset/www/spielsets/minispielset2/sound/setzen.mp3"},
+	{"id": 2, "type": "failsound", "sound": "/android_asset/www/spielsets/minispielset2/sound/fail.mp3"},
+	{"id": 3, "type": "completesound", "sound": "/android_asset/www/spielsets/minispielset2/sound/applaus.mp3"},
+	{"id": 4, "type": "rotatesound", "sound": "/android_asset/www/spielsets/minispielset2/sound/rotate.mp3"}
 ]

www/spielsets/minispielset2/templates/minispiel.html

@@ -12,7 +12,7 @@
         <div class="col col-75">
         	<div class="row" style="font-size: 12px;" ng-repeat="rows in chunkedDataBilderMask">
             	<div style="width: 100%;  text-align: center;" class="col" ng-repeat="item in rows">
-                	<div class="dropzone" style="background: url('{{ item.bildmaske }}');background-size: cover;" ng-drop="true" ng-drop-success="onDropComplete($data,$event,item.id )" ></div>
+                	<div class="dropzone" style="background: url('{{ item.bildmaske }}');background-size: cover;" ng-drop="true" ng-drop-success="onDropComplete($data,$event,item.id )" ng-class="{'rotate': item.rotate}" ng-click="rotateitem(item.id)"></div>
                 	<br>
               	</div>
     		</div>