Controller bereinig, Animation verbessert

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

View File

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

BIN
www/img/mentorhelp_64px.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.9 KiB

85
www/img/statusbar.svg Normal file

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 179 KiB

View File

@ -18,14 +18,14 @@ $ionicPlatform.ready(function() {
$scope.sounds=[];
$scope.sounds.push('');
var tiersound1 = new Media('/android_asset/www/sounds/finde_elefant.mp3', null,null);
var tiersound2 = new Media('/android_asset/www/sounds/finde_esel.mp3', null,null);
var tiersound3 = new Media('/android_asset/www/sounds/finde_hahn.mp3', null,null);
var tiersound4 = new Media('/android_asset/www/sounds/finde_hund.mp3', null,null);
var tiersound5 = new Media('/android_asset/www/sounds/finde_katze.mp3', null,null);
var tiersound6 = new Media('/android_asset/www/sounds/finde_kuh.mp3', null,null);
var tiersound7 = new Media('/android_asset/www/sounds/finde_maus.mp3', null,null);
var tiersound8 = new Media('/android_asset/www/sounds/finde_schaf.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', mentorausblenden,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', mentorausblenden,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', mentorausblenden,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', mentorausblenden,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);
@ -124,13 +124,18 @@ $scope.spiele.push(tier7);
*/
$scope.hilfe = function() {
$scope.showmentor=true;
$timeout(function () {
$scope.showmentor=false;
}, 3500);
$scope.sounds[$scope.randomid].play();
}
/*
* Mentor ausblenden
*/
function mentorausblenden(){
$timeout(function () { $scope.showmentor=false; }, 10);
}
/*
* Antwort prüfen
*/
@ -150,11 +155,7 @@ $scope.answer = function(src) {
}, 500);
}, 500);
}, 500);
$scope.showmentorbravo=true;
$timeout(function () {
$scope.showmentorbravo=false;
$timeout(function () {$scope.showmentor=true;}, 1200);
}, 2400);
$timeout(function () { $scope.showmentorbravo=true; }, 0);
$scope.bravosound.play();
}
else{
@ -173,15 +174,13 @@ $scope.answer = function(src) {
/*
* 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 () {
$scope.showmentor=false;
}, 3500);
$scope.showmentor=true;
$scope.showmentorbravo=false;
},0);
$scope.randomid = getRandomInt(1, 8);
$scope.sounds[$scope.randomid].play();
}

View File

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