Skip to content
Snippets Groups Projects
Commit d581cc59 authored by Richard Torenvliet's avatar Richard Torenvliet
Browse files

Update game, worked on game itself

parent 7271f6f6
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 294 additions and 148 deletions
src/app/game/tapdance/tapdance-game.js
+ 173
− 0
View file @ d581cc59
angular.module('Interactive.game.tapdance.game', [
'ui.router',
'ui.bootstrap',
'Interactive.game.tapdance.result'
])
.config(function($stateProvider) {
$stateProvider
.state('game-tapdance-game', {
url: '/tapdance-game',
views: {
'main': {
controller: 'gameCtrl',
templateUrl: 'game/tapdance/tapdance-game.tpl.html'
}
},
data: { pageTitle: 'Tapdance Game' }
}
);
})
.controller( 'gameCtrl', function IndexController($scope) {
$scope.start_button = {};
$scope.game = false;
$scope.start_button.click = function(event) {
$scope.game = true;
};
})
.directive('pixi', function($parse, $state) {
return {
restrict: 'A',
scope: true,
controller: function($scope, $element, $attrs, $document, $window) {
// init the first element
$element = $element[0];
var game_div = document.getElementsByClassName('game-background')[0];
var width = game_div.scrollWidth;
var height = 600;
console.log(width, height);
// TODO: set color from options
var stage = new PIXI.Stage();
// create the root of the scene graph
var renderer = PIXI.autoDetectRenderer(width, height,
{view: $element,
transparent: true});
var jeans = PIXI.Sprite.fromImage('/assets/jeans_plane.png');
var bg = PIXI.Sprite.fromImage('/assets/jeans_cutout.png');
var water = PIXI.Sprite.fromImage('/assets/water.png');
bg.width = renderer.width;
bg.height = renderer.height;
jeans.width = renderer.width;
jeans.height = renderer.height;
water.width = renderer.width;
water.height = renderer.height;
stage.addChild(jeans);
stage.addChild(water);
stage.addChild(bg);
animate();
function animate() {
renderer.render(stage);
requestAnimFrame(animate);
if ($scope.game) {
water.position.y += 1;
if (water.position.y > 500) {
$scope.$apply(function() {
$scope.game = false;
$state.go('game-tapdance-result');
});
}
}
}
}
};
})
;
//var init = function(rendererType, transparent, antialias, element) {
// if (!stage) {
// // create a new instance of a pixi stage
// stage = new PIXI.Stage(0x66FF99);
// stageAttr.assign($scope, stage);
// }
// switch(rendererType) {
// case 'canvas':
// renderer = new PIXI.CanvasRenderer(width, height, $element, transparent);
// break;
// case 'webgl':
// try {
// renderer = new PIXI.WebGLRenderer(width, height, $element, transparent, antialias);
// } catch (e) {
// $scope.$emit('pixi.webgl.init.exception', e);
// return;
// }
// break;
// default:
// renderer = new PIXI.autoDetectRenderer(width, height, {view: $element}, transparent, antialias);
// }
// return renderer;
//};
//init(renderType, transparent, antialias, $element);
//this.render = function render(force) {
// var doRender = true;
// if (renderFunc) {
// doRender = renderFunc(stage, this.renderer);
// }
// // render the stage
// if (force || doRender !== false) {
// this.renderer.render(stage);
// }
//};
//// create a texture from an image path
//var texture = PIXI.Texture.fromImage("/assets/bunny.png");
//// create a new Sprite using the texture
//var bunny = new PIXI.Sprite(texture);
//// center the sprites anchor point
//bunny.anchor.x = 0.5;
//bunny.anchor.y = 0.5;
//// move the sprite t the center of the screen
//bunny.position.x = width / 2;
//bunny.position.y = height / 2;
//function renderLoop() {
// self.render();
// bunny.rotation += 0.1;
// requestAnimFrame( renderLoop );
//}
//// add the renderer view element to the DOM
////document.body.appendChild(renderer.view);
//this.getStage = function() {
// return stage;
//};
//this.getRenderer = function() {
// return this.renderer;
//};
//this.getContext = function() {
// return this.renderer.gl ? this.renderer.gl : this.renderer.context;
//};
//this.getStage().addChild(bunny);
//requestAnimFrame( renderLoop );
////($window).resize(function() {
//// renderer.resize(element.width(), element.height());
////});
//}
//};
src/app/game/tapdance/tapdance-game.tpl.html 0 → 100644
+ 21
− 0
View file @ d581cc59
<div class="game-background">
<img ng-show='!game' class="bg-image" src="/assets/jeans_bg.jpg" alt='bg'/>
<div ng-show='!game' class="popup gold">
<h1 class="text-center">TRYOUT</h1>
<p class="text-center">Before you start dancing</p>
<p class="text-center">try out how it's done</p>
<div class="button-modal button-go">
<a ng-click="start_button.click($event)"
class="button">LET'S GO</a>
</div>
</div>
<div ng-show='game' class="game">
<img class="bg-image" src="/assets/jeans_bg_white.jpg" alt='bg'/>
<canvas pixi="stage" class="tapdance" pixi-render="pixiRender"
pixi-transparent="true" pixi-renderer="'webgl'"></canvas>
</div>
</div>
src/app/game/tapdance/tapdance-how2play.js
+ 2
− 1
View file @ d581cc59
angular.module('Interactive.game.tapdance.how2play', [
'ui.router',
'ui.bootstrap'
'ui.bootstrap',
'Interactive.game.tapdance.game'
])
.config(function($stateProvider) {
......
src/app/game/tapdance/tapdance-index.tpl.html
+ 7
− 2
View file @ d581cc59
<div class="game-background">
<img class="bg-image" src="/assets/bg.jpg" alt='bg'/>
<div class="popup">
<div class="popup white">
<h1 class="text-center">TAP DANCE</h1>
<p class="text-center">Help your conscience and save water</p>
<a ui-sref='game-tapdance-how2play' class="btn btn-default center-block play-now">PLAY NOW</a>
<div class="button-modal button-play">
<a ui-sref='game-tapdance-how2play'
class="button">LET'S GO
</a>
</div>
</div>
</div>
src/app/game/tapdance/tapdance-result.js 0 → 100644
+ 24
− 0
View file @ d581cc59
angular.module('Interactive.game.tapdance.result', [
'ui.router',
'ui.bootstrap'
])
.config(function($stateProvider) {
$stateProvider
.state('game-tapdance-result', {
url: '/tapdance-result',
views: {
'main': {
controller: 'resultCtrl',
templateUrl: 'game/tapdance/tapdance-result.tpl.html'
}
},
data: { pageTitle: 'Tapdance Result' }
}
);
})
.controller( 'resultCtrl', function IndexController($scope) {
});
src/app/game/tapdance/tapdance-result.tpl.html 0 → 100644
+ 4
− 0
View file @ d581cc59
<div class="game-background">
<img class="bg-image" src="/assets/bg.jpg" alt='bg'/>
<a><img class="popup-image" src="/assets/result_overlay.png" alt='bg'/></a>
</div>
src/app/index/index.js
+ 0
− 1
View file @ d581cc59
angular.module('Interactive.index', [
'Interactive.pixi',
'ui.router'
])
......
src/app/pixi/pixi.js
+ 1
− 129
View file @ d581cc59
angular.module('Interactive.pixi', [
])
.directive('pixi', function($parse) {
return {
restrict: 'A',
scope: true,
controller: function($scope, $element, $attrs, $document) {
// init the first element
$element = $element[0];
var width = $element.width || 800;
var height = $element.height || 400;
// TODO: set color from options
var stage = new PIXI.Stage();
var renderer = PIXI.autoDetectRenderer(width, height,
{view: $element});
renderer.view.style.height = window.innerHeight;
renderer.view.style.width = window.innerWidth;
renderer.view.style.display = 'block';
var bg_texture = PIXI.Texture.fromImage('/assets/images/mario_bg.png');
var bg = new PIXI.TilingSprite(bg_texture, width, height - 20);
bg.position.x = 0;
bg.position.y = 0;
bg.tilePosition.x = 0;
bg.tilePosition.y = 0;
//, TODO calculate scaling
stage.addChild(bg);
requestAnimFrame(animate);
function animate() {
bg.tilePosition.x -= 0.5;
requestAnimFrame(animate);
renderer.render(stage);
}
}
};
})
;
//var init = function(rendererType, transparent, antialias, element) {
// if (!stage) {
// // create a new instance of a pixi stage
// stage = new PIXI.Stage(0x66FF99);
// stageAttr.assign($scope, stage);
// }
// switch(rendererType) {
// case 'canvas':
// renderer = new PIXI.CanvasRenderer(width, height, $element, transparent);
// break;
// case 'webgl':
// try {
// renderer = new PIXI.WebGLRenderer(width, height, $element, transparent, antialias);
// } catch (e) {
// $scope.$emit('pixi.webgl.init.exception', e);
// return;
// }
// break;
// default:
// renderer = new PIXI.autoDetectRenderer(width, height, {view: $element}, transparent, antialias);
// }
// return renderer;
//};
//init(renderType, transparent, antialias, $element);
//this.render = function render(force) {
// var doRender = true;
// if (renderFunc) {
// doRender = renderFunc(stage, this.renderer);
// }
// // render the stage
// if (force || doRender !== false) {
// this.renderer.render(stage);
// }
//};
//// create a texture from an image path
//var texture = PIXI.Texture.fromImage("/assets/bunny.png");
//// create a new Sprite using the texture
//var bunny = new PIXI.Sprite(texture);
//// center the sprites anchor point
//bunny.anchor.x = 0.5;
//bunny.anchor.y = 0.5;
//// move the sprite t the center of the screen
//bunny.position.x = width / 2;
//bunny.position.y = height / 2;
//function renderLoop() {
// self.render();
// bunny.rotation += 0.1;
// requestAnimFrame( renderLoop );
//}
//// add the renderer view element to the DOM
////document.body.appendChild(renderer.view);
//this.getStage = function() {
// return stage;
//};
//this.getRenderer = function() {
// return this.renderer;
//};
//this.getContext = function() {
// return this.renderer.gl ? this.renderer.gl : this.renderer.context;
//};
//this.getStage().addChild(bunny);
//requestAnimFrame( renderLoop );
////($window).resize(function() {
//// renderer.resize(element.width(), element.height());
////});
//}
//};
]);
src/assets/jeans_bg.jpg 0 → 100644
+ 0
− 0
View file @ d581cc59
src/assets/jeans_bg.jpg

15.4 KiB

src/assets/jeans_bg_white.jpg 0 → 100644
+ 0
− 0
View file @ d581cc59
src/assets/jeans_bg_white.jpg

5.54 KiB

src/assets/jeans_cutout.png 0 → 100644
+ 0
− 0
View file @ d581cc59
src/assets/jeans_cutout.png

19.6 KiB

src/assets/jeans_plane.png 0 → 100644
+ 0
− 0
View file @ d581cc59
src/assets/jeans_plane.png

16.6 KiB

src/assets/result_overlay.png 0 → 100644
+ 0
− 0
View file @ d581cc59
src/assets/result_overlay.png

27.1 KiB

src/assets/water.png 0 → 100644
+ 0
− 0
View file @ d581cc59
src/assets/water.png

7.31 KiB

src/less/main.less
+ 62
− 15
View file @ d581cc59
......@@ -20,11 +20,22 @@
@import 'variables.less';
* {
margin: 0;
padding: 0;
}
body {
font-family: MyriadPro, 'Myriad Pro', Helvetica, Arial, sans-serif;
width: 100%;
height: 100%;
overflow:hidden;
text-align:center;
}
.container {
width: 375px;
margin: 0 auot;
}
......@@ -150,44 +161,70 @@ h2 {
img.bg-image {
position: absolute;
top: -90px;
left: 0;
height: 667px;
width: auto;
z-index: 0;
z-index: -1;
}
.popup-image {
position: absolute;
width: 250px;
left: 20%;
width: 380px;
margin-left: auto;
margin-right: auto;
}
.popup {
line-height: 0.5em;
margin-left: auto;
margin-right: auto;
padding: 1.5em;
position: relative;
top: 80px;
width: 300px;
}
.gold {
-moz-border-radius: 30px;
-webkit-border-radius: 30px;
background: #e7d878;
border-radius: 30px;
color: white;
}
.gold a.button {
background-color: #d0b745;
}
.button-modal {
margin: 3em 0em 1em 0em;
}
.popup a {
color: white;
font-size: 2em;
}
.popup a.button {
margin-top: 2em;
padding: 0.5em 2em 0.5em 2em;
}
.white {
-moz-border-radius: 30px;
-webkit-border-radius: 30px;
background: white;
border-radius: 30px;
color: #d0b745;
left: 10%;
margin-left: auto;
margin-right: auto;
padding: 3em;
position: absolute;
top: 40px;
width: 300px;
}
.popup h1 {
.white h1 {
font-weight: bold;
}
.popup button {
.white .button {
background-color: #e7d878;
color: white;
font-size: 3em;
}
......@@ -195,3 +232,13 @@ img.bg-image {
and (min-device-width : 375px)
and (max-device-width : 667px)
and (orientation : portrait) { /* STYLES GO HERE */ }
canvas {
}
canvas.tapdance {
position: absolute;
top: 20px;
left: 0px;
z-index: 2;
}
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment