Minispiel2 komplett eingebunden
Hilmer, Carsten
@ -44,7 +44,8 @@
|
|||||||
|
|
||||||
<script src="js/home_controller.js"></script>
|
<script src="js/home_controller.js"></script>
|
||||||
<script src="spielsets/spielset1/js/suchspiel_controller.js"></script>
|
<script src="spielsets/spielset1/js/suchspiel_controller.js"></script>
|
||||||
<script src="spielsets/minispielset1/js/minispiel1_controller.js"></script>
|
<script src="spielsets/minispielset1/js/minispiel_controller.js"></script>
|
||||||
|
<script src="spielsets/minispielset2/js/minispiel_controller.js"></script>
|
||||||
</head>
|
</head>
|
||||||
<body ng-app="kinderspiel">
|
<body ng-app="kinderspiel">
|
||||||
|
|
||||||
|
|||||||
@ -130,11 +130,20 @@ angular.module('kinderspiel', ['ionic', 'ngCordova','ngAnimate', 'ngDraggable',
|
|||||||
.state('minispiel1', {
|
.state('minispiel1', {
|
||||||
url: '/minispiel1',
|
url: '/minispiel1',
|
||||||
cache: false,
|
cache: false,
|
||||||
templateUrl: 'spielsets/minispielset1/templates/minispiel1.html',
|
templateUrl: 'spielsets/minispielset1/templates/minispiel.html',
|
||||||
css: 'spielsets/minispielset1/css/minispiel.css',
|
css: 'spielsets/minispielset1/css/minispiel.css',
|
||||||
controller: 'Minispiel1',
|
controller: 'Minispiel1',
|
||||||
reload: true
|
reload: true
|
||||||
})
|
})
|
||||||
|
.state('minispiel2', {
|
||||||
|
url: '/minispiel2',
|
||||||
|
cache: false,
|
||||||
|
templateUrl: 'spielsets/minispielset2/templates/minispiel.html',
|
||||||
|
css: 'spielsets/minispielset2/css/minispiel.css',
|
||||||
|
controller: 'Minispiel2',
|
||||||
|
reload: true
|
||||||
|
})
|
||||||
|
|
||||||
|
|
||||||
/*
|
/*
|
||||||
* Standard-Route setzen
|
* Standard-Route setzen
|
||||||
|
|||||||
@ -88,6 +88,7 @@ appControllers.controller('home', function($scope, $rootScope, $ionicPlatform, $
|
|||||||
$scope.CSSKlickSuchspiel=false;
|
$scope.CSSKlickSuchspiel=false;
|
||||||
$scope.showmentor=false;
|
$scope.showmentor=false;
|
||||||
$state.go('suchspiel');
|
$state.go('suchspiel');
|
||||||
|
//$state.go('minispiel2');
|
||||||
}
|
}
|
||||||
|
|
||||||
$scope.animate_farmhaus=function(){
|
$scope.animate_farmhaus=function(){
|
||||||
|
|||||||
@ -1,47 +1,21 @@
|
|||||||
.teddy {
|
/* Hintergrundbild */
|
||||||
position: fixed;
|
.scroll-content {
|
||||||
top: 50%;
|
background: url("../images/background.png");
|
||||||
left: 50%;
|
background-size: cover;
|
||||||
width: 256px;
|
color: #333;
|
||||||
height: 256px;
|
font: 100% Arial, Sans Serif;
|
||||||
margin-left: -128px;
|
height: 100vh;
|
||||||
margin-top: -128px;
|
margin: 0;
|
||||||
overflow: hidden;
|
padding: 0;
|
||||||
|
overflow-x: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
.teddybackground {
|
.dragzone{
|
||||||
background: url('../images/Teddybackgound.png');
|
height:48px;
|
||||||
|
width: 64px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.dropzone{
|
||||||
.teddyani1 {
|
height:96px;
|
||||||
width: 256px;
|
width: 128px;
|
||||||
height: 1024px;
|
|
||||||
background: url('../images/Teddybear_ani1.png') left center;
|
|
||||||
-webkit-animation: teddyspriteani 1.4s steps(4) infinite;
|
|
||||||
}
|
|
||||||
|
|
||||||
.teddyani2 {
|
|
||||||
width: 256px;
|
|
||||||
height: 1024px;
|
|
||||||
background: url('../images/Teddybear_ani2.png') left center;
|
|
||||||
-webkit-animation: teddyspriteani 1.4s steps(4) infinite;
|
|
||||||
}
|
|
||||||
|
|
||||||
.teddyani3 {
|
|
||||||
width: 256px;
|
|
||||||
height: 1024px;
|
|
||||||
background: url('../images/Teddybear_ani3.png') left center;
|
|
||||||
-webkit-animation: teddyspriteani 1.4s steps(4) infinite;
|
|
||||||
}
|
|
||||||
|
|
||||||
.teddyani4 {
|
|
||||||
width: 256px;
|
|
||||||
height: 1024px;
|
|
||||||
background: url('../images/Teddybear_ani4.png') left center;
|
|
||||||
-webkit-animation: teddyspriteani 1.4s steps(4) infinite;
|
|
||||||
}
|
|
||||||
|
|
||||||
@-webkit-keyframes teddyspriteani {
|
|
||||||
100% { background-position: 0 -1024px; }
|
|
||||||
}
|
}
|
||||||
|
Before Width: | Height: | Size: 23 KiB |
|
Before Width: | Height: | Size: 23 KiB |
|
Before Width: | Height: | Size: 23 KiB |
|
Before Width: | Height: | Size: 23 KiB |
|
Before Width: | Height: | Size: 23 KiB |
|
Before Width: | Height: | Size: 23 KiB |
|
Before Width: | Height: | Size: 23 KiB |
|
Before Width: | Height: | Size: 23 KiB |
|
Before Width: | Height: | Size: 24 KiB |
|
Before Width: | Height: | Size: 24 KiB |
|
Before Width: | Height: | Size: 24 KiB |
|
Before Width: | Height: | Size: 24 KiB |
|
Before Width: | Height: | Size: 24 KiB |
|
Before Width: | Height: | Size: 24 KiB |
|
Before Width: | Height: | Size: 30 KiB |
|
Before Width: | Height: | Size: 94 KiB |
|
Before Width: | Height: | Size: 98 KiB |
|
Before Width: | Height: | Size: 94 KiB |
|
Before Width: | Height: | Size: 96 KiB |
|
Before Width: | Height: | Size: 338 KiB After Width: | Height: | Size: 127 KiB |
BIN
www/spielsets/minispielset2/images/blaues_auto.png
Normal file
|
After Width: | Height: | Size: 88 KiB |
BIN
www/spielsets/minispielset2/images/blaues_auto_maske.png
Normal file
|
After Width: | Height: | Size: 170 KiB |
BIN
www/spielsets/minispielset2/images/rotes_auto.png
Normal file
|
After Width: | Height: | Size: 106 KiB |
BIN
www/spielsets/minispielset2/images/rotes_auto_maske.png
Normal file
|
After Width: | Height: | Size: 162 KiB |
BIN
www/spielsets/minispielset2/images/schneemann.png
Normal file
|
After Width: | Height: | Size: 56 KiB |
BIN
www/spielsets/minispielset2/images/schneemann_maske.png
Normal file
|
After Width: | Height: | Size: 94 KiB |
BIN
www/spielsets/minispielset2/images/teddy.png
Normal file
|
After Width: | Height: | Size: 84 KiB |
BIN
www/spielsets/minispielset2/images/teddy_maske.png
Normal file
|
After Width: | Height: | Size: 120 KiB |
270
www/spielsets/minispielset2/js/minispiel_controller.js
Normal file
@ -0,0 +1,270 @@
|
|||||||
|
appControllers.controller('Minispiel2', function($scope, $rootScope, $ionicPlatform, $cordovaMedia, backgroundsounds_mediahandler, $state, $timeout,$q, $http) {
|
||||||
|
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Initialisierung
|
||||||
|
*/
|
||||||
|
$scope.spieleallebilder=[];
|
||||||
|
$scope.chunkedDataBilder = [];
|
||||||
|
$scope.chunkedDataBilderMask = [];
|
||||||
|
|
||||||
|
$scope.spielendecounter=4;
|
||||||
|
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Spielset laden
|
||||||
|
*/
|
||||||
|
$http.get('spielsets/minispielset2/spielset.json').success(function(data) {
|
||||||
|
$scope.spieleallebilder = data;
|
||||||
|
bildermischen();
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
//$scope.$on("$ionicView.beforeEnter", function(event, data){
|
||||||
|
|
||||||
|
//});
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$ionicPlatform.ready(function() {
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Sounds definieren
|
||||||
|
*/
|
||||||
|
|
||||||
|
$scope.lachensounds=[];
|
||||||
|
$scope.gamesounds=[];
|
||||||
|
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Spiele IntroSounds laden
|
||||||
|
* Typen: successsound -> Bravo, super, tollgemacht Sounds
|
||||||
|
* Typen: failuresound -> Leider daneben, versuchs nochmal
|
||||||
|
* Typen: cardsound -> Kartenlegegeräusch
|
||||||
|
* Typen: solutionsound -> Auflösungsgeräusch, das wäre das Tier gewesen
|
||||||
|
* Typen: gameoversound -> Spielzu ende Zeit für minispiel etc.
|
||||||
|
* Typen: backgroundmusic -> Hintergrundmusik
|
||||||
|
*/
|
||||||
|
$http.get('spielsets/minispielset1/systemsounds.json').success(function(data) {
|
||||||
|
|
||||||
|
for(var i = 0; i < data.length; i++) {
|
||||||
|
|
||||||
|
if (data[i].type=='lachensound'){
|
||||||
|
$scope.lachensounds.push(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=='backgroundmusic'){
|
||||||
|
//backgroundsounds_mediahandler.setbackgroundsoundfile(data[i].sound);
|
||||||
|
//backgroundsounds_mediahandler.playbackgroundmusic();
|
||||||
|
}
|
||||||
|
|
||||||
|
}//for-Schleife
|
||||||
|
|
||||||
|
});//$http
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Drei mal mischen :)
|
||||||
|
*/
|
||||||
|
function bildermischen(){
|
||||||
|
$scope.spieleallebilder=shuffleArray($scope.spieleallebilder);
|
||||||
|
$scope.spieleallebilder=shuffleArray($scope.spieleallebilder);
|
||||||
|
$scope.spieleallebilder=shuffleArray($scope.spieleallebilder);
|
||||||
|
|
||||||
|
$scope.spiele=[];
|
||||||
|
|
||||||
|
for(var i = 0; i < 4; i++) {
|
||||||
|
var data= $scope.spieleallebilder[i];
|
||||||
|
data.id=i;
|
||||||
|
$scope.spiele.push(data);
|
||||||
|
}
|
||||||
|
|
||||||
|
$scope.chunkedDataBilder = chunk($scope.spiele, 1);
|
||||||
|
$scope.chunkedDataBilderMask = chunk($scope.spiele, 2);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Play-Sound
|
||||||
|
* playtype-> Bravo,Falsch oder Gamesound
|
||||||
|
* soundfile-> Pfad zur sounddatei
|
||||||
|
* callbackfunction-> Funktion die nach erfolgreichem abspielen gestarte wird
|
||||||
|
* volume-> Lautstärke z.B. 1.0
|
||||||
|
*/
|
||||||
|
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){
|
||||||
|
|
||||||
|
try{
|
||||||
|
|
||||||
|
lachensound.release();
|
||||||
|
|
||||||
|
}
|
||||||
|
catch(e){
|
||||||
|
|
||||||
|
//Soundfile Objekt gabs nicht oder Freigabefehler
|
||||||
|
console.log("Sounddatei nicht da");
|
||||||
|
}
|
||||||
|
|
||||||
|
lachensound = new Media(soundfile, callbackfunction ,null);
|
||||||
|
$scope.bin_am_lachen=true;
|
||||||
|
lachensound.play();
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
else if (playtype=='gamesound'){
|
||||||
|
|
||||||
|
try{
|
||||||
|
|
||||||
|
//versuchen Soundfile freizugeben
|
||||||
|
gamesound.release();
|
||||||
|
|
||||||
|
}
|
||||||
|
catch(e){
|
||||||
|
|
||||||
|
//Soundfile Objekt gabs nicht oder Freigabefehler
|
||||||
|
console.log("Sounddatei nicht da");
|
||||||
|
}
|
||||||
|
|
||||||
|
gamesound = new Media(soundfile, callbackfunction ,null);
|
||||||
|
gamesound.play();
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
$scope.onDragComplete=function(data,evt){
|
||||||
|
|
||||||
|
for(var i = 0; i < $scope.spiele.length; i++) {
|
||||||
|
|
||||||
|
if (data.id==$scope.spiele[i].id){
|
||||||
|
$scope.spiele[i].dragged=false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
console.log("drag success, data:", data);
|
||||||
|
}
|
||||||
|
|
||||||
|
$scope.onDragStart=function(data,evt){
|
||||||
|
|
||||||
|
for(var i = 0; i < $scope.spiele.length; i++) {
|
||||||
|
|
||||||
|
if (data.id==$scope.spiele[i].id){
|
||||||
|
$scope.spiele[i].dragged=true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
console.log("drag start, data:", data);
|
||||||
|
}
|
||||||
|
|
||||||
|
$scope.onDragStop=function(data,evt){
|
||||||
|
|
||||||
|
for(var i = 0; i < $scope.spiele.length; i++) {
|
||||||
|
|
||||||
|
if (data.id==$scope.spiele[i].id){
|
||||||
|
$scope.spiele[i].dragged=false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
console.log("drag stop, data:", data);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$scope.onDropComplete=function(data,evt,dropid){
|
||||||
|
|
||||||
|
//richtige form erwischt
|
||||||
|
if (data.id==dropid){
|
||||||
|
for(var i = 0; i < $scope.spiele.length; i++) {
|
||||||
|
|
||||||
|
if (data.id==$scope.spiele[i].id){
|
||||||
|
$scope.spiele[i].display=false;
|
||||||
|
$scope.spiele[i].bildmaske=$scope.spiele[i].bild;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
$scope.spielendecounter=$scope.spielendecounter - 1;
|
||||||
|
}
|
||||||
|
console.log("dropid: " + dropid + " drop success, data:", data);
|
||||||
|
|
||||||
|
if ($scope.spielendecounter==0){
|
||||||
|
|
||||||
|
$timeout(function () { $state.go('home'); }, 5000);
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Zufallsgenerator um per Zufall neue Aufgabe definieren
|
||||||
|
*/
|
||||||
|
function getRandomInt(min, max) {
|
||||||
|
var tmpInt=0;
|
||||||
|
min = Math.ceil(min);
|
||||||
|
max = Math.floor(max);
|
||||||
|
tmpInt = Math.floor(Math.random() * (max - min + 1)) + min;
|
||||||
|
|
||||||
|
if (tmpInt > max){
|
||||||
|
tmpInt=max;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (tmpInt < min){
|
||||||
|
tmpInt=min;
|
||||||
|
}
|
||||||
|
return tmpInt;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Bilder per Zufall mischen
|
||||||
|
*/
|
||||||
|
function shuffleArray(array) {
|
||||||
|
var m = array.length, t, i;
|
||||||
|
|
||||||
|
// While there remain elements to shuffle
|
||||||
|
while (m) {
|
||||||
|
// Pick a remaining element…
|
||||||
|
i = Math.floor(Math.random() * m--);
|
||||||
|
|
||||||
|
// And swap it with the current element.
|
||||||
|
t = array[m];
|
||||||
|
array[m] = array[i];
|
||||||
|
array[i] = t;
|
||||||
|
}
|
||||||
|
|
||||||
|
return array;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Bilder richtig in Zeilen ausgeben
|
||||||
|
*/
|
||||||
|
function chunk(arr, size) {
|
||||||
|
var newArr = [];
|
||||||
|
for (var i=0; i<arr.length; i+=size) {
|
||||||
|
newArr.push(arr.slice(i, i+size));
|
||||||
|
}
|
||||||
|
return newArr;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
});
|
||||||
6
www/spielsets/minispielset2/spielset.json
Normal file
@ -0,0 +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 }
|
||||||
|
]
|
||||||
24
www/spielsets/minispielset2/templates/minispiel.html
Normal file
@ -0,0 +1,24 @@
|
|||||||
|
<ion-view view-title="Minispiel">
|
||||||
|
<ion-content scroll="false" class="padding">
|
||||||
|
|
||||||
|
<div class="row" style="font-size: 12px;padding-top:35px;">
|
||||||
|
<div class="col col-25">
|
||||||
|
<div class="row" style="font-size: 12px;padding-top:5px;" ng-repeat="rows in chunkedDataBilder">
|
||||||
|
<div style="width: 100%; text-align: center;" class="col" ng-repeat="item in rows">
|
||||||
|
<div class="dragzone" ng-class="{'dropzone': item.dragged}" style="background: url('{{ item.bild }}');background-size: cover;" ng-show="item.display" ng-drag="true" ng-drag-data="{{ item }}" ng-drag-start="onDragStart($data)" ng-drag-stop="onDragStop($data, $event)" ng-drag-success="onDragComplete($data,$event)" ng-center-anchor="true"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<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>
|
||||||
|
<br>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</ion-content>
|
||||||
|
</ion-view>
|
||||||
@ -456,7 +456,7 @@ function spielende(){
|
|||||||
}
|
}
|
||||||
|
|
||||||
function minispielintro(){
|
function minispielintro(){
|
||||||
$state.go('minispiel1');
|
$state.go('minispiel2');
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|||||||