Minispiel2 komplett eingebunden
Hilmer, Carsten
@ -44,7 +44,8 @@
|
||||
|
||||
<script src="js/home_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>
|
||||
<body ng-app="kinderspiel">
|
||||
|
||||
|
||||
@ -130,11 +130,20 @@ angular.module('kinderspiel', ['ionic', 'ngCordova','ngAnimate', 'ngDraggable',
|
||||
.state('minispiel1', {
|
||||
url: '/minispiel1',
|
||||
cache: false,
|
||||
templateUrl: 'spielsets/minispielset1/templates/minispiel1.html',
|
||||
templateUrl: 'spielsets/minispielset1/templates/minispiel.html',
|
||||
css: 'spielsets/minispielset1/css/minispiel.css',
|
||||
controller: 'Minispiel1',
|
||||
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
|
||||
|
||||
@ -88,6 +88,7 @@ appControllers.controller('home', function($scope, $rootScope, $ionicPlatform, $
|
||||
$scope.CSSKlickSuchspiel=false;
|
||||
$scope.showmentor=false;
|
||||
$state.go('suchspiel');
|
||||
//$state.go('minispiel2');
|
||||
}
|
||||
|
||||
$scope.animate_farmhaus=function(){
|
||||
|
||||
@ -1,47 +1,21 @@
|
||||
.teddy {
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 256px;
|
||||
height: 256px;
|
||||
margin-left: -128px;
|
||||
margin-top: -128px;
|
||||
overflow: hidden;
|
||||
/* Hintergrundbild */
|
||||
.scroll-content {
|
||||
background: url("../images/background.png");
|
||||
background-size: cover;
|
||||
color: #333;
|
||||
font: 100% Arial, Sans Serif;
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.teddybackground {
|
||||
background: url('../images/Teddybackgound.png');
|
||||
.dragzone{
|
||||
height:48px;
|
||||
width: 64px;
|
||||
}
|
||||
|
||||
|
||||
.teddyani1 {
|
||||
width: 256px;
|
||||
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; }
|
||||
.dropzone{
|
||||
height:96px;
|
||||
width: 128px;
|
||||
}
|
||||
|
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(){
|
||||
$state.go('minispiel1');
|
||||
$state.go('minispiel2');
|
||||
}
|
||||
|
||||
|
||||
|
||||