Skip to content

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

Update game

parent f1d6db9d
Hide whitespace changes
Inline Side-by-side
Showing with 182 additions and 131 deletions
src/app/game/tapdance/tapdance-game.js
View file @ 19b995ea
......@@ -50,6 +50,10 @@ angular.module('Interactive.game.tapdance.game', [
controller: function($scope, $element, $attrs, $document, $window) {
var stage = new PIXI.Container();
var graphics = new PIXI.Graphics();
var runtime = game.played === 0 ? 5000 : 10000;
var loader_speed = game.played === 0 ? 0.9 : 0.45;
game.clicks = 0;
var stage_objects = {
bg_white: PIXI.Sprite.fromImage('/assets/jeans_bg_white.png'),
......@@ -71,7 +75,7 @@ angular.module('Interactive.game.tapdance.game', [
stage_objects.loader.y = 0;
stage_objects.loader.x = 0;
stage_objects.loader.height = 21;
stage_objects.loader.height = 17;
//stage_objects.water.y = renderer.height / 2;
stage.addChild(stage_objects.bg_white);
......@@ -88,12 +92,17 @@ angular.module('Interactive.game.tapdance.game', [
return renderer;
};
var animate = function() {
if ($scope.game) {
stage_objects.water.position.y -= 0.2;
stage_objects.loader.position.x += 0.55;
// dont move it too far
if (stage_objects.water.position.y >= -50) {
stage_objects.water.position.y -= 0.2;
}
stage_objects.loader.position.x -= loader_speed;
if((Date.now() - $scope.start_time) > 10000 ) {
if((Date.now() - $scope.start_time) > runtime) {
$scope.game = false;
$scope.$apply();
......@@ -116,10 +125,10 @@ angular.module('Interactive.game.tapdance.game', [
};
$element = $element[0];
var game_div = document.getElementsByClassName('container')[0];
var width = game_div.scrollWidth;
var height = 569;
var game_div = document.getElementsByClassName('container')[0];
var width = 260;
var height = 462;
renderer = init(stage, width, height, stage_objects);
graphics.beginFill();
......@@ -132,14 +141,13 @@ angular.module('Interactive.game.tapdance.game', [
graphics.interactive = true;
var buttonsClick = function(event) {
var inc = stage_objects.water.position <= 0 ? 0 : 5;
var inc = stage_objects.water.position <= 0 ? 0 : 3;
stage_objects.water.position.y += inc;
game.clicks += 2;
game.clicks += 1;
};
graphics.on('mousedown', buttonsClick);
graphics.on('touchstart', buttonsClick);
stage.addChild(graphics);
animate();
......
src/app/game/tapdance/tapdance-game.tpl.html
View file @ 19b995ea
......@@ -2,8 +2,10 @@
<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="popup-content">
<p class="text-center">Before you start dancing</p>
<p class="text-center">try out how it's done</p>
</div>
<div class="button-modal button-go">
<a ng-click="start_button.click($event)" class="button">LET'S GO</a>
......@@ -13,8 +15,10 @@
<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="popup-content">
<p class="text-center">Now it's time to show your</p>
<p class="text-center">moves and win some points</p>
</div>
<div class="button-modal button-go">
<a ng-click="start_button.click($event)"
......
src/app/game/tapdance/tapdance-index.tpl.html
View file @ 19b995ea
......@@ -2,8 +2,10 @@
<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</p>
<p class="text-center">and save water</p>
<div class="popup-content">
<p class="text-center">Help your conscience</p>
<p class="text-center">and save water</p>
</div>
<div class="button-modal button-play">
<a ui-sref='game-tapdance-how2play' class="button">PLAY NOW</a>
......
src/app/game/tapdance/tapdance-info.js
View file @ 19b995ea
......@@ -26,6 +26,7 @@ angular.module('Interactive.game.tapdance.info', [
$scope.info_popup.click = function(event) {
$scope.show_info = false;
$scope.show_bg = true;
setTimeout(function() {
$scope.show_bye = true;
$scope.$apply();
......
src/app/game/tapdance/tapdance-info.tpl.html
View file @ 19b995ea
......@@ -5,25 +5,25 @@
<h1 >DID YOU KNOW</h1>
</div>
<div class="popup-info-content">
<p>In 2014 H&M launched its first Conscious Denim collection that
on average uses 56% less water and 58% less engery than comparable
denim.
<p> In 2014 H&M launched its first Conscious Denim collection that on
average uses 56% less water and 58% less energy
than comparable denim.
</p>
</div>
</div>
<img ng-show="show_bg" class="bg-image" src="/assets/bg_better.jpg" alt='bg'/>
<div ng-show="show_bye" ng-click="bye_button.click($event)" class="popup-info" >
<div ng-show="show_bye" ng-click="bye_button.click($event)" class="see-later popup-info" >
<div class="popup-info-header">
<h1>SEE YOU LATER</h1>
</div>
<div class="popup-info-content">
<p> You helped your conscience and it now lives in a greener
environment.Tomorrow you will have anotherchance to improve it even
<p>You helped your conscience and it now lives in a greener
environment.Tomorrow you will have another chance to improve it even
more and get a happier conscience.
</p>
<div class="">
<a class="button">BYE BYE</a>
<div class="button-modal">
<a ui-sref='game-tapdance' class="button">BYE BYE</a>
</div>
</div>
</div>
......
src/app/game/tapdance/tapdance-result.js
View file @ 19b995ea
......@@ -21,9 +21,28 @@ angular.module('Interactive.game.tapdance.result', [
);
})
.controller( 'resultCtrl', function IndexController($scope, game) {
.controller( 'resultCtrl', function IndexController($scope, game, $state) {
var transition_time = Date.now();
$scope.result_popup = {};
var result_info = {
0: "",
3: "You didn't use that much water in the production of your jeans, which saved some natural resources.",
5: "You didn't use a lot of water in the production of your jeans, which saved some natural resources.",
7: "You almost didn't use any water in the production of your jeans, which saved a lot of natural resources.",
10: "You didn't use any water in the production of your jeans, which saved a lot of natural resources."
};
$scope.result_popup.click = function(event) {
// may only transition after 3seconds
if ((Date.now() - transition_time) > 3000) {
$state.go('game-tapdance-info');
}
};
var points = [0, 3, 5, 7, 10];
var max_clicks = 600;
var max_clicks = 160;
var clicks = game.clicks;
// cap it to max clicks
......@@ -31,10 +50,9 @@ angular.module('Interactive.game.tapdance.result', [
var ratio = points.length / (max_clicks / calc_clicks);
var result = points[Math.ceil(ratio) - 1];
console.log(clicks);
console.log(ratio);
result = 3;
$scope.points = result;
$scope.clicks = clicks;
$scope.result_info = result_info[result];
});
src/app/game/tapdance/tapdance-result.tpl.html
View file @ 19b995ea
<div class="game-background">
<img class="bg-image" src="/assets/bg_tapdance_plain.jpg" alt='bg'/>
<div>
<h1 class="points">+<span class="number">{{points}}</span> points</span></h1>
<a ui-sref="game-tapdance-info"><img class="popup-image" src="/assets/result_overlay.png" alt='bg'/></a>
<h1 class="">+<span class="number">{{clicks}}</span></span></h1>
<a ng-click="result_popup.click($event)">
<img class="popup-image" src="/assets/result_overlay.png" alt='bg'/>
</a>
<div class="popup-image-content">
<h1 class="points">+ <span class="number">{{points}}</span> POINTS</span></h1>
<p>{{result_info}} </p>
<div>
</div>
src/index.html
View file @ 19b995ea
......@@ -4,9 +4,6 @@
<title ng-bind="pageTitle"></title>
<meta name="viewport" content="width=device-width, minimal-ui, initial-scale=1, maximum-scale=1, user-scalable=no">
<!-- font awesome from BootstrapCDN -->
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
<!-- compiled CSS --><% styles.forEach( function ( file ) { %>
<link rel="stylesheet" type="text/css" href="<%= file %>" /><% }); %>
......
src/less/main.less
View file @ 19b995ea
......@@ -20,7 +20,12 @@
@import 'variables.less';
@container-width: 320px;
@container-width: 260px;
@popup-width: @container-width - 20px;
p {
margin: 0 !important;
}
* {
margin: 0;
......@@ -83,56 +88,6 @@ h2 {
color: #666;
}
/**
* Navigation
*/
.navbar {
margin-top: 20px;
small {
font-size: 60%;
}
}
/**
* Footer
*/
.footer {
margin-top: 80px;
.footer-inner {
padding: 40px 0;
border-top: 1px solid #DDD;
}
.social {
float: right;
margin: 0;
list-style: none;
li {
float: left;
margin-left: 20px;
a, a:visited {
color: @gray-light;
text-decoration: none;
font-size: 40px;
.transition( 250ms ease-in-out );
&:hover {
color: @gray;
}
}
}
}
}
/**
* Now that all app-wide styles have been applied, we can load the styles for
* all the submodules and components we are using.
......@@ -155,6 +110,7 @@ h2 {
}
.container {
}
.game-background {
......@@ -164,7 +120,7 @@ h2 {
img.bg-image {
position: absolute;
left: 0;
width: 320px;
width: @container-width;
z-index: -1;
}
......@@ -182,7 +138,7 @@ img.bg-image {
padding: 0.5em 1em 0.5em 1em;
position: relative;
top: 80px;
width: 250px;
width: @popup-width
}
......@@ -191,13 +147,22 @@ img.bg-image {
font-size: 2.0em;
}
.popup p {
font-weight: 500;
}
.gold {
-moz-border-radius: 30px;
-webkit-border-radius: 30px;
-webkit-border-top-left-radius: 20px;
-webkit-border-top-right-radius: 20px;
-moz-border-radius-topleft: 20px;
-moz-border-radius-topright: 20px;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
border-radius: 20px;
background: #e7d878;
border-radius: 30px;
color: white;
padding: 1em;
}
.gold a.button {
......@@ -205,20 +170,41 @@ img.bg-image {
}
.button-modal {
margin: 3em 0em 1.6em 0em;
margin: 1.8em 0em 1em 0em;
}
.popup a.button {
margin-top: 2em;
margin-bottom: 2em;
padding: 0.3em 1em 0.3em 1em;
padding: 0.4em 1em 0.3em 1em;
color: white;
font-weight: 600;
}
.popup-image-content {
top: 150px;
margin-left: auto;
margin-right: auto;
position: absolute;
left: 13%;
}
.popup-image-content p {
color: white;
margin-top: 1.3em;
width: 191px;
position: relative;
font-family: Helvetica;
font-size: 1em;
font-weight: 600;
line-height: 1.3em;
}
.popup-info {
margin-left: auto;
margin-right: auto;
padding: 1em 1em 0.3em 1em;
top: 55px;
top: 40px;
position: relative;
width: @container-width - 20px;
}
......@@ -231,55 +217,91 @@ img.bg-image {
font-weight: 600;
}
.see-later {
top: 25px;
}
.see-later .popup-info-header h1 {
font-size: 1.7em;
}
.see-later .popup-info-content {
font-size: 0.9em;
padding-bottom: 1em;
}
.see-later .popup-info-content p {
padding-bottom: 0.5em;
}
.popup-info-header h1 {
background-color: #d0b745;
color: white;
font-size: 1.9em;
font-size: 1.8em;
font-weight: 900;
line-height: 1em;
margin: 0;
padding: 0.8em 0.2em 0.5em 0.2em;
padding: 0.8em 0.2em 0.2em 0.2em;
-webkit-border-top-left-radius: 20px;
-webkit-border-top-right-radius: 20px;
-moz-border-radius-topleft: 20px;
-moz-border-radius-topright: 20px;
-webkit-border-top-left-radius: 30px;
-webkit-border-top-right-radius: 30px;
-moz-border-radius-topleft: 30px;
-moz-border-radius-topright: 30px;
border-top-left-radius: 30px;
border-top-right-radius: 30px;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
}
.popup-info-content {
color: white;
background: #e7d878;
-webkit-border-bottom-right-radius: 30px;
-webkit-border-bottom-left-radius: 30px;
-moz-border-radius-bottomright: 30px;
-moz-border-radius-bottomleft: 30px;
border-bottom-right-radius: 30px;
border-bottom-left-radius: 30px;
padding: 1em;
font-size: 1.1em;
}
-moz-border-radius-bottomleft: 20px;
-moz-border-radius-bottomright: 20px;
-webkit-border-bottom-left-radius: 20px;
-webkit-border-bottom-right-radius: 20px;
background: #e7d878;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
color: white;
font-size: 1em;
font-weight: 600;
line-height: 1.2em;
padding: 1em 1em 1.2em 1em;
}
.white {
-moz-border-radius: 30px;
-webkit-border-radius: 30px;
-webkit-border-bottom-right-radius: 20px;
-webkit-border-bottom-left-radius: 20px;
-moz-border-radius-bottomright: 20px;
-moz-border-radius-bottomleft: 20px;
border-bottom-right-radius: 20px;
border-bottom-left-radius: 20px;
border-radius: 20px;
background: white;
border-radius: 30px;
color: #d0b745;
padding: 1em;
}
.white h1 {
font-weight: bold;
.popup-content {
padding: 0.5em;
}
.popup-content p {
line-height: 1.3em;
}
.white h1, .popup h1 {
font-weight: 600;
margin-bottom: 0;
margin-top: 0.2em;
font-size: 2em;
}
.white .button {
background-color: #e7d878;
color: white;
font-weight: 600;
}
@media only screen
......@@ -297,17 +319,17 @@ canvas.tapdance {
z-index: 2;
}
.points {
color: white;
top: 180px;
margin-left: auto;
margin-right: auto;
position: absolute;
width: @container-width;
font-size: 2em;
font-weight: 100;
font-size: 1.3em;
font-weight: 500;
margin-top: 0.5em;
margin-bottom: 1.5em;
}
span.number {
font-weight: 900;
font-size: 1.2em;
}
src/less/variables.less
View file @ 19b995ea
......@@ -6,6 +6,3 @@
/**
* Typography-related.
*/
@sansFontFamily: 'Roboto', sans-serif;
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