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

mntouch eingebaut, dynamisches Hintergrundbild geadded

Browse Source
This commit is contained in:
Hilmer, Carsten 2016-11-22 10:56:57 +01:00
parent ec1a308629
commit 5e323b684d
9 changed files with 175 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
README.md
View File

@ -15,6 +15,12 @@ cordova plugin add https://github.com/EddyVerbruggen/Insomnia-PhoneGap-Plugin.gi
JS - Module
================
Install: npm install mn-touch
Doku: https://github.com/ilmente/mnTouch
Css Css
================ ================
https://github.com/miniMAC/magic https://github.com/miniMAC/magic

2
www/css/style.css
View File

@ -9,7 +9,7 @@
*/ */
.scroll-content { .scroll-content {
background: url("../img/Background/background.svg"); /*background: url("../img/Background/background.svg");*/
background-size: cover; background-size: cover;
color: #333; color: #333;
font: 100% Arial, Sans Serif; font: 100% Arial, Sans Serif;

16
www/index.html
View File

@ -31,6 +31,7 @@
<script src="lib/ionic/js/ionic.bundle.js"></script> <script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="lib/angular-animate/angular-animate.js"></script> <script src="lib/angular-animate/angular-animate.js"></script>
<script src="lib/ng-draggable/ngDraggable.js"></script> <script src="lib/ng-draggable/ngDraggable.js"></script>
<script src="lib/mn-touch/mn-touch.js"></script>
<!-- cordova script (this will be a 404 during development) --> <!-- cordova script (this will be a 404 during development) -->
<script src="lib/ng-cordova/ng-cordova.min.js"></script> <script src="lib/ng-cordova/ng-cordova.min.js"></script>
@ -46,6 +47,21 @@
<script src="js/services.js"></script> <script src="js/services.js"></script>
</head> </head>
<body ng-app="kinderspiel"> <body ng-app="kinderspiel">
<!-- Dynamisches Hintergrundbild -->
<style type="text/css">
.scroll-content {
background: url("{{ backgroundimage }}");
background-size: cover;
color: #333;
font: 100% Arial, Sans Serif;
height: 100vh;
margin: 0;
padding: 0;
overflow-x: hidden;
}
</style>
<ion-nav-view></ion-nav-view> <ion-nav-view></ion-nav-view>
</body> </body>
</html> </html>

19
www/js/app.js
View File

@ -1,11 +1,23 @@
// Ionic Starter App // Ionic Starter App
//Global variable für alle Superglobalen Werte
window.globalVariable = {
//custom color style variable
color: {
appPrimaryColor: ""
},// End custom color style variable
backgroundimage: "img/Background/background.svg",
adMob: "ca-app-pub-3940256099942544/6300978111", //Use for AdMob API clientID.
adfree: ""
};// End Global variable
// angular.module is a global place for creating, registering and retrieving Angular modules // angular.module is a global place for creating, registering and retrieving Angular modules
// 'starter' is the name of this angular module example (also set in a <body> attribute in index.html) // 'starter' is the name of this angular module example (also set in a <body> attribute in index.html)
// the 2nd parameter is an array of 'requires' // the 2nd parameter is an array of 'requires'
angular.module('kinderspiel', ['ionic', 'ngCordova','ngAnimate', 'ngDraggable', 'kinderspiel.controllers', 'kinderspiel.services']) angular.module('kinderspiel', ['ionic', 'ngCordova','ngAnimate', 'ngDraggable', 'mn', 'kinderspiel.controllers', 'kinderspiel.services'])
.run(function($ionicPlatform, $state, backgroundsounds_mediahandler) { .run(function($ionicPlatform, $rootScope, $state, backgroundsounds_mediahandler) {
$ionicPlatform.ready(function() { $ionicPlatform.ready(function() {
@ -38,6 +50,9 @@ angular.module('kinderspiel', ['ionic', 'ngCordova','ngAnimate', 'ngDraggable',
*/ */
//window.plugins.insomnia.allowSleepAgain(); //window.plugins.insomnia.allowSleepAgain();
//SetBackgroundpic
$rootScope.backgroundimage = window.globalVariable.backgroundimage;
/* /*
* Homebutton und Backgroundinfos abrufen * Homebutton und Backgroundinfos abrufen
*/ */

2
www/js/home_controller.js
View File

@ -84,6 +84,8 @@ appControllers.controller('home', function($scope, $ionicPlatform, $cordovaMedia
$scope.animate_kornspeicher=function(){ $scope.animate_kornspeicher=function(){
//SetBackgroundpic
//$rootScope.backgroundimage = "img/ufo.png";
$scope.CSSKornspeicher=true; $scope.CSSKornspeicher=true;
$timeout(function () { $timeout(function () {
$scope.CSSKornspeicher=false; $scope.CSSKornspeicher=false;

6
www/js/minispiel1_controller.js
View File

@ -40,6 +40,10 @@ $ionicPlatform.ready(function() {
} }
else if (data[i].type=='gamesound'){ else if (data[i].type=='gamesound'){
$scope.gamesounds.push(data[i].sound); $scope.gamesounds.push(data[i].sound);
$timeout(function () {
playsound('gamesound', $scope.gamesounds[0], minispielstart,'1.0');
}, 1000);
} }
else if (data[i].type=='backgroundmusic'){ else if (data[i].type=='backgroundmusic'){
backgroundsounds_mediahandler.setbackgroundsoundfile(data[i].sound); backgroundsounds_mediahandler.setbackgroundsoundfile(data[i].sound);
@ -51,7 +55,7 @@ $ionicPlatform.ready(function() {
});//$http });//$http
playsound('gamesound', $scope.gamesounds[0], minispielstart,'1.0');
}); });

2
www/js/suchspiel_controller.js
View File

@ -30,7 +30,7 @@ $scope.CSSFalscheAntwort = false;
$scope.CCSInittimer = false; $scope.CCSInittimer = false;
//SpieleTimer //SpieleTimer
$scope.Spielzeit = 10; $scope.Spielzeit = 90;
$scope.showgametimer = false; $scope.showgametimer = false;
//Spielzeit vorbei //Spielzeit vorbei

125
www/lib/mn-touch/mn-touch.js Normal file
View File

@ -0,0 +1,125 @@
/**
*
* @name: mnTouch
* @version: 1.3.2
* @description: Ultrafast AngularJS touch events directive (tap, hold and swipe)
* @author: Alessandro Bellini - ilmente
* @license: MIT
*
*/
"use strict";
angular.module("mn", []).directive("mnTouch", [ "$timeout", function($timeout) {
var touchEngine = function(scope, element, attrs) {
scope.$event = {
name: "",
isSecure: false,
isRunning: false,
target: element[0],
threshold: !!attrs.threshold ? attrs.threshold : 10,
holdfor: !!attrs.holdfor ? attrs.holdfor : 500,
types: {
start: "mousedown",
move: "mousemove",
end: "mouseup",
cancel: ""
},
time: {},
coords: {},
events: {},
directionX: 0,
directionY: 0,
offsetX: 0,
offsetY: 0
};
var fn = function(eventName) {
scope.$event.name = eventName;
if (!!attrs[eventName]) {
scope.$eval(attrs[eventName]);
scope.$apply();
}
};
var getCoords = function(event) {
return {
x: event.pageX || 0,
y: event.pageY || 0
};
};
if (typeof window.ontouchstart !== "undefined" && typeof window.ontouchend !== "undefined" && typeof window.ontouchcancel !== "undefined") {
scope.$event.types.start = "touchstart";
scope.$event.types.move = "touchmove";
scope.$event.types.end = "touchend";
scope.$event.types.cancel = "touchcancel";
getCoords = function(event) {
var coords = !!event && !!event.changedTouches && !!event.changedTouches.length > 0 ? event.changedTouches[0] : {};
return {
x: coords.pageX || event.pageX || 0,
y: coords.pageY || event.pageY || 0
};
};
} else if (window.navigator.pointerEnabled) {
scope.$event.types.start = "pointerdown";
scope.$event.types.move = "pointermove";
scope.$event.types.end = "pointerup";
} else if (window.navigator.msPointerEnabled) {
scope.$event.types.start = "MSPointerDown";
scope.$event.types.move = "MSPointerMove";
scope.$event.types.end = "MSPointerUp";
scope.$event.types.cancel = "MSPointerOut";
}
if (!!attrs["tap"]) {
scope.$event.isSecure = false;
scope.$event.isRunning = false;
var onStartEvent = function(startEvent) {
scope.$event.events.start = startEvent;
scope.$event.coords.start = getCoords(startEvent);
fn("tap");
};
scope.$event.target.addEventListener(scope.$event.types.start, onStartEvent, false);
} else {
scope.$event.isSecure = true;
var holdPromise = null;
var onStartEvent = function(startEvent) {
scope.$event.isRunning = true;
scope.$event.time.start = new Date().getTime();
scope.$event.events.start = startEvent;
scope.$event.coords.start = getCoords(startEvent);
if (!!attrs["hold"]) {
holdPromise = $timeout(function() {
onEndEvent(scope.$event.events.move || startEvent);
}, scope.$event.holdfor, false);
}
};
var onMoveEvent = function(moveEvent) {
if (scope.$event.isRunning) {
scope.$event.events.move = moveEvent;
}
};
var onEndEvent = function(endEvent) {
if (!!holdPromise) $timeout.cancel(holdPromise);
if (scope.$event.isRunning) {
scope.$event.isRunning = false;
scope.$event.time.end = new Date().getTime();
scope.$event.time.duration = scope.$event.time.end - scope.$event.time.start;
scope.$event.events.end = endEvent;
scope.$event.coords.end = getCoords(endEvent);
scope.$event.directionX = scope.$event.coords.end.x - scope.$event.coords.start.x;
scope.$event.directionY = scope.$event.coords.end.y - scope.$event.coords.start.y;
scope.$event.offsetX = Math.abs(scope.$event.directionX);
scope.$event.offsetY = Math.abs(scope.$event.directionY);
if (scope.$event.offsetX <= scope.$event.threshold && scope.$event.offsetY <= scope.$event.threshold) {
if (!!attrs["hold"] && scope.$event.time.duration >= scope.$event.holdfor) fn("hold"); else fn("secureTap");
} else if (scope.$event.offsetX >= scope.$event.offsetY) fn(scope.$event.directionX > 0 ? "swipeRight" : "swipeLeft"); else fn(scope.$event.directionY > 0 ? "swipeDown" : "swipeUp");
}
};
scope.$event.target.addEventListener(scope.$event.types.start, onStartEvent, false);
scope.$event.target.addEventListener(scope.$event.types.end, onEndEvent, false);
if (!!scope.$event.types.cancel) scope.$event.target.addEventListener(scope.$event.types.cancel, onEndEvent, false);
if (!!attrs["hold"]) scope.$event.target.addEventListener(scope.$event.types.move, onMoveEvent, false);
}
};
return {
restrict: "A",
link: touchEngine
};
} ]);

2
www/templates/minispiel1.html
View File

@ -1,7 +1,7 @@
<ion-view view-title="Minispiel"> <ion-view view-title="Minispiel">
<ion-content class="padding"> <ion-content class="padding">
<div class="teddy" ng-class="{'teddybackground': teddyback}" ng-show="showteddybear" ng-click="teddyaction()"> <div class="teddy" ng-class="{'teddybackground': teddyback}" ng-show="showteddybear" mn-touch tap="teddyaction()" swipe-left="teddyaction()" swipe-right="teddyaction()" swipe-up="teddyaction()" swipe-down="teddyaction()">
<div ng-class="{'teddyani1': teddyani1, 'teddyani2': teddyani2, 'teddyani3': teddyani3, 'teddyani4': teddyani4}"></div> <div ng-class="{'teddyani1': teddyani1, 'teddyani2': teddyani2, 'teddyani3': teddyani3, 'teddyani4': teddyani4}"></div>
</div> </div>