Raataar/kinderspiele1
3
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Controller bereinig, Animation verbessert

Browse Source
This commit is contained in:
Carsten Hilmer 2016-11-01 02:49:40 +01:00
parent 52d822c7ee
commit c4f9b3671b
5 changed files with 155 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
www/css/style.css
View File

@ -45,6 +45,16 @@ to {background-position: -2000px 0;}
overflow: hidden; overflow: hidden;
} }
.statusbar{
position: absolute;
bottom: 0px;
left: 0px;
width: 100%;
height: 64px;
overflow: hidden;
text-align: center;
}
.myborder{ .myborder{
display: inline-block; display: inline-block;
border-radius: 6px; border-radius: 6px;
@ -60,15 +70,38 @@ to {background-position: -2000px 0;}
transform: translateY(4px); transform: translateY(4px);
} }
.mentorborder {
.mentorhilfe {
position: absolute; position: absolute;
top: 122px; bottom: 0;
left: 120px; left: 0;
width: 32px; width: 64px;
height: 32px; height: 64px;
overflow: hidden; 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 { .mentorborderbaumhaus {
position: absolute; position: absolute;

BIN
www/img/mentorhelp_64px.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.9 KiB

85
www/img/statusbar.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 179 KiB

45
www/js/suchspiel_controller.js
View File

@ -18,14 +18,14 @@ $ionicPlatform.ready(function() {
$scope.sounds=[]; $scope.sounds=[];
$scope.sounds.push(''); $scope.sounds.push('');
var tiersound1 = new Media('/android_asset/www/sounds/finde_elefant.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', null,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', null,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', null,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', null,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', null,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', null,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', null,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 bravosound = new Media('/android_asset/www/sounds/bravo.mp3', goto_newspiel,null);
var falschsound = new Media('/android_asset/www/sounds/falsch.mp3', null,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.hilfe = function() {
$scope.showmentor=true; $scope.showmentor=true;
$timeout(function () {
$scope.showmentor=false;
}, 3500);
$scope.sounds[$scope.randomid].play(); $scope.sounds[$scope.randomid].play();
} }
/*
* Mentor ausblenden
*/
function mentorausblenden(){
$timeout(function () { $scope.showmentor=false; }, 10);
}
/* /*
* Antwort prüfen * Antwort prüfen
*/ */
@ -150,11 +155,7 @@ $scope.answer = function(src) {
}, 500); }, 500);
}, 500); }, 500);
}, 500); }, 500);
$scope.showmentorbravo=true; $timeout(function () { $scope.showmentorbravo=true; }, 0);
$timeout(function () {
$scope.showmentorbravo=false;
$timeout(function () {$scope.showmentor=true;}, 1200);
}, 2400);
$scope.bravosound.play(); $scope.bravosound.play();
} }
else{ else{
@ -173,15 +174,13 @@ $scope.answer = function(src) {
/* /*
* Neues Spiel * Neues Spiel
*/ */
function goto_newspiel() { function goto_newspiel(){
$scope.showmentor=true;
$scope.randomid = getRandomInt(1, 8);
//$scope.play('/android_asset/www/sounds/' + $scope.sounds[$scope.randomid]);
$timeout(function () { $timeout(function () {
$scope.showmentor=false; $scope.showmentor=true;
}, 3500); $scope.showmentorbravo=false;
},0);
$scope.randomid = getRandomInt(1, 8);
$scope.sounds[$scope.randomid].play(); $scope.sounds[$scope.randomid].play();
} }

12
www/templates/spiel1.html
View File

@ -8,14 +8,16 @@
<br> <br>
</div> </div>
</div> </div>
<div class="row" style="font-size: 12px;" >
<div style="width: 100%; text-align: center;" class="col"> <div class="statusbar">
<img class="myborder animated" src="img/mentorhelp.png" width="64" height="64" alig="center" ng-click="hilfe()"> <div class="mentorhilfe" ng-click="hilfe()">
</div>
</div>
<div class="mentorborder" ng-show="showmentor"> <div class="mentorborder" ng-show="showmentor">
<div class="mentor"></div> <div class="mentor"></div>
</div> </div>
</div>
<div>
<div class="mentorborderbravo" ng-show="showmentorbravo"> <div class="mentorborderbravo" ng-show="showmentorbravo">
<div class="mentorbravo"></div> <div class="mentorbravo"></div>
</div> </div>