Skip to content

A
Angular-Pixijs-Game
Commit 3857a361 authored by Richard Torenvliet's avatar Richard Torenvliet
Browse files
Options

Update game - now interactive

parent 164057e3
Show whitespace changes
Inline Side-by-side
Showing with 177 additions and 83 deletions
bower.json
View file @ 3857a361
......@@ -7,7 +7,7 @@
"bootstrap": "~3.1",
"angular-bootstrap": "~0.10.0",
"angular-ui-router": "~0.2",
"pixi.js": "~2.2.7"
"pixi.js": "~3.0.6"
},
"dependencies": {}
}
......
build.config.js
View file @ 3857a361
......@@ -67,7 +67,7 @@ module.exports = {
'vendor/placeholders/angular-placeholders-0.0.1-SNAPSHOT.min.js',
'vendor/angular-ui-router/release/angular-ui-router.js',
'vendor/angular-ui-utils/modules/route/route.js',
'vendor/pixi.js/bin/pixi.dev.js'
'vendor/pixi.js/bin/pixi.js'
],
css: [
],
......
makefile
View file @ 3857a361
......@@ -9,7 +9,7 @@ build:
docker build -t pixi-game .
run:
docker run --rm -ti -p 8282:80 -v $(DIR)/src/:/app/src/ pixi-game
docker run --rm -ti -p 8282:80 -v $(DIR)/src/:/app/src/ -v $(DIR)/build/:/app/build/ pixi-game
# inside docker
install:
......
src/app/game/tapdance/tapdance-game-play.tpl.html 0 → 100644
View file @ 3857a361
<div class="game-background">
<img ng-show='trial' class="bg-image" src="/assets/jeans_bg.jpg" alt='bg'/>
<div ng-show='trial' 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>
<img ng-show='play' class="bg-image" src="/assets/jeans_bg.jpg" alt='bg'/>
<div ng-show='play' class="popup gold">
<h1 class="text-center">TAP DANCE</h1>
<p class="text-center">Now it's time to show your</p>
<p class="text-center">moves and win some points</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">
<canvas pixi="stage" class="tapdance" pixi-render="pixiRender"
pixi-transparent="true" pixi-renderer="'webgl'"></canvas>
</div>
</div>
src/app/game/tapdance/tapdance-game.js
View file @ 3857a361
......@@ -20,89 +20,140 @@ angular.module('Interactive.game.tapdance.game', [
);
})
.controller( 'gameCtrl', function IndexController($scope) {
.controller( 'gameCtrl', function IndexController($scope, game) {
$scope.start_button = {};
$scope.game = false;
$scope.trial = false;
$scope.play = false;
// show trail screen if not played yet.
if (game.played === 0) {
$scope.trial = true;
} else if(game.played === 1) {
$scope.trial = false;
$scope.play = true;
}
$scope.start_button.click = function(event) {
$scope.game = true;
$scope.trial = false;
$scope.play = false;
$scope.start_time = Date.now();
};
})
.directive('pixi', function($parse, $state) {
.directive('pixi', function($parse, $state, game) {
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 = 660;
console.log(width, height);
// TODO: set color from options
var stage = new PIXI.Stage();
var stage = new PIXI.Container();
var graphics = new PIXI.Graphics();
var stage_objects = {
bg_white: PIXI.Sprite.fromImage('/assets/jeans_bg_white.png'),
jeans: PIXI.Sprite.fromImage('/assets/jeans_plane.png'),
bg: PIXI.Sprite.fromImage('/assets/jeans_cutout.png'),
water: PIXI.Sprite.fromImage('/assets/water.png'),
loader: PIXI.Sprite.fromImage('/assets/loader.png')
};
var init = function(stage, width, height, stage_objects) {
// create the root of the scene graph
var renderer = PIXI.autoDetectRenderer(width, height,
{view: $element,
transparent: true});
var bg_white = PIXI.Sprite.fromImage('/assets/jeans_bg_white.png');
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');
var loader = PIXI.Sprite.fromImage('/assets/loader.png');
bg_white.width = renderer.width;
bg_white.height = renderer.height;
bg.width = renderer.width;
bg.height = renderer.height;
{view: $element, transparent: true});
jeans.width = renderer.width;
jeans.height = renderer.height;
water.width = renderer.width;
water.height = renderer.height;
for (var key in stage_objects ) {
stage_objects[key].width = renderer.width;
stage_objects[key].height = renderer.height;
}
loader.y = 0;
loader.x = 0;
loader.height = 24;
stage_objects.loader.y = 0;
stage_objects.loader.x = 0;
stage_objects.loader.height = 21;
stage_objects.water.y = renderer.height / 2;
stage.addChild(bg_white);
stage.addChild(jeans);
stage.addChild(stage_objects.bg_white);
stage.addChild(stage_objects.jeans);
stage.addChild(water);
stage.addChild(bg);
stage.addChild(stage_objects.water);
stage_objects.bg.interactive = true;
stage.addChild(bg_white);
stage.addChild(loader);
stage.addChild(stage_objects.bg);
animate();
stage.addChild(stage_objects.bg_white);
stage.addChild(stage_objects.loader);
function animate() {
renderer.render(stage);
requestAnimFrame(animate);
return renderer;
};
var animate = function() {
if ($scope.game) {
water.position.y += 1;
loader.position.x += 0.5;
stage_objects.water.position.y -= 1;
stage_objects.loader.position.x += 0.55;
if (water.position.y > 520) {
$scope.$apply(function() {
if((Date.now() - $scope.start_time) > 10000 ) {
$scope.game = false;
$state.go('game-tapdance-result');
$scope.$apply();
if (game.played === 0) {
game.played += 1;
setTimeout(function(){
$state.go($state.current, {}, { reload: true
});
}, 10);
} else {
$state.go('game-tapdance-result');
}
}
}
renderer.render(stage);
setTimeout(function(){ requestAnimationFrame(animate); }, 10);
};
$element = $element[0];
var game_div = document.getElementsByClassName('container')[0];
var width = game_div.scrollWidth;
var height = 569;
renderer = init(stage, width, height, stage_objects);
graphics.beginFill();
// set the line style to have a width of 5 and set the color to red
graphics.fillAlpha = 0;
// draw a rectangle
graphics.drawRect(35, height - 150, 250, 100);
graphics.interactive = true;
var buttonsClick = function(event) {
var inc = stage_objects.water.position <= 0 ? 0 : 5;
stage_objects.water.position.y += inc;
game.clicks += 1;
};
graphics.on('mousedown', buttonsClick);
graphics.on('touchstart', buttonsClick);
stage.addChild(graphics);
animate();
}
};
})
.factory('game', function() {
return {
played: 0,
clicks: 0
};
})
;
//var init = function(rendererType, transparent, antialias, element) {
// if (!stage) {
......
src/app/game/tapdance/tapdance-game.tpl.html
View file @ 3857a361
<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">
<img ng-show='trial' class="bg-image" src="/assets/jeans_bg.jpg" alt='bg'/>
<div ng-show='trial' 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>
......@@ -11,6 +11,18 @@
</div>
</div>
<img ng-show='play' class="bg-image" src="/assets/jeans_bg.jpg" alt='bg'/>
<div ng-show='play' class="popup gold">
<h1 class="text-center">TAP DANCE</h1>
<p class="text-center">Now it's time to show your</p>
<p class="text-center">moves and win some points</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">
<canvas pixi="stage" class="tapdance" pixi-render="pixiRender"
pixi-transparent="true" pixi-renderer="'webgl'"></canvas>
......
src/app/game/tapdance/tapdance-how2play.tpl.html
View file @ 3857a361
<div class="game-background">
<img class="bg-image" src="/assets/bg.jpg" alt='bg'/>
<a ui-sref='game-tapdance-game'><img class="popup-image" src="/assets/how2play.png" alt='bg'/>
</a>
<img class="bg-image" src="/assets/bg_tapdance_plain.jpg" alt='bg'/>
<a ui-sref='game-tapdance-game'><img class="popup-image" src="/assets/how2play.png" alt='bg'/> </a>
</div>
src/app/game/tapdance/tapdance-index.tpl.html
View file @ 3857a361
......@@ -2,12 +2,11 @@
<img class="bg-image" src="/assets/bg.jpg" alt='bg'/>
<div class="popup white">
<h1 class="text-center">TAP DANCE</h1>
<p class="text-center">Help your conscience and save water</p>
<p class="text-center">Help your conscience</p>
<p class="text-center">and save water</p>
<div class="button-modal button-play">
<a ui-sref='game-tapdance-how2play'
class="button">LET'S GO
</a>
<a ui-sref='game-tapdance-how2play' class="button">PLAY NOW</a>
</div>
</div>
</div>
src/app/game/tapdance/tapdance-result.js
View file @ 3857a361
angular.module('Interactive.game.tapdance.result', [
'ui.router',
'ui.bootstrap'
'ui.bootstrap',
'Interactive.game.tapdance.game'
])
.config(function($stateProvider) {
......@@ -19,6 +20,6 @@ angular.module('Interactive.game.tapdance.result', [
);
})
.controller( 'resultCtrl', function IndexController($scope) {
.controller( 'resultCtrl', function IndexController($scope, game) {
console.log(game.clicks);
});
src/app/game/tapdance/tapdance-result.tpl.html
View file @ 3857a361
<div class="game-background">
<img class="bg-image" src="/assets/bg.jpg" alt='bg'/>
<img class="bg-image" src="/assets/bg_tapdance_plain.jpg" alt='bg'/>
<a><img class="popup-image" src="/assets/result_overlay.png" alt='bg'/></a>
</div>
src/less/main.less
View file @ 3857a361
......@@ -20,6 +20,8 @@
@import 'variables.less';
@container-width: 320px;
* {
margin: 0;
padding: 0;
......@@ -34,8 +36,9 @@ body {
}
.container {
width: 375px;
margin: 0 auot;
width: @container-width;
margin: 0 auto;
padding: 0 !important;
}
......@@ -152,7 +155,6 @@ h2 {
}
.container {
padding: 0 !important;
}
.game-background {
......@@ -162,28 +164,32 @@ h2 {
img.bg-image {
position: absolute;
left: 0;
height: 667px;
width: auto;
width: 320px;
z-index: -1;
}
.popup-image {
width: 380px;
width: @container-width;
margin-left: auto;
margin-right: auto;
}
.popup {
line-height: 0.5em;
margin-left: auto;
padding: 0.5em 1em 0.5em 1em;
line-height: 1em;
margin-right: auto;
padding: 1.5em;
position: relative;
top: 80px;
width: 300px;
width: 250px;
}
.popup a {
color: white;
font-size: 2.0em;
}
.gold {
-moz-border-radius: 30px;
-webkit-border-radius: 30px;
......@@ -197,17 +203,13 @@ img.bg-image {
}
.button-modal {
margin: 3em 0em 1em 0em;
}
.popup a {
color: white;
font-size: 2em;
margin: 3em 0em 1.6em 0em;
}
.popup a.button {
margin-top: 2em;
padding: 0.5em 2em 0.5em 2em;
margin-bottom: 2em;
padding: 0.3em 1em 0.3em 1em;
}
.white {
......
Markdown is supported
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