Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Support
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
A
Angular-Pixijs-Game
Project overview
Project overview
Details
Activity
Releases
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Issues
0
Issues
0
List
Boards
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Analytics
Analytics
CI / CD
Repository
Value Stream
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
Richard Torenvliet
Angular-Pixijs-Game
Commits
3857a361
Commit
3857a361
authored
Jun 14, 2015
by
Richard Torenvliet
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
Update game - now interactive
parent
164057e3
Changes
12
Show whitespace changes
Inline
Side-by-side
Showing
12 changed files
with
177 additions
and
83 deletions
+177
-83
bower.json
bower.json
+1
-1
build.config.js
build.config.js
+1
-1
makefile
makefile
+1
-1
src/app/game/tapdance/tapdance-game-play.tpl.html
src/app/game/tapdance/tapdance-game-play.tpl.html
+30
-0
src/app/game/tapdance/tapdance-game.js
src/app/game/tapdance/tapdance-game.js
+102
-51
src/app/game/tapdance/tapdance-game.tpl.html
src/app/game/tapdance/tapdance-game.tpl.html
+14
-2
src/app/game/tapdance/tapdance-how2play.tpl.html
src/app/game/tapdance/tapdance-how2play.tpl.html
+2
-3
src/app/game/tapdance/tapdance-index.tpl.html
src/app/game/tapdance/tapdance-index.tpl.html
+3
-4
src/app/game/tapdance/tapdance-result.js
src/app/game/tapdance/tapdance-result.js
+4
-3
src/app/game/tapdance/tapdance-result.tpl.html
src/app/game/tapdance/tapdance-result.tpl.html
+1
-1
src/assets/bg_tapdance_plain.jpg
src/assets/bg_tapdance_plain.jpg
+0
-0
src/less/main.less
src/less/main.less
+18
-16
No files found.
bower.json
View file @
3857a361
...
@@ -7,7 +7,7 @@
...
@@ -7,7 +7,7 @@
"bootstrap"
:
"~3.1"
,
"bootstrap"
:
"~3.1"
,
"angular-bootstrap"
:
"~0.10.0"
,
"angular-bootstrap"
:
"~0.10.0"
,
"angular-ui-router"
:
"~0.2"
,
"angular-ui-router"
:
"~0.2"
,
"pixi.js"
:
"~
2.2.7
"
"pixi.js"
:
"~
3.0.6
"
},
},
"dependencies"
:
{}
"dependencies"
:
{}
}
}
...
...
build.config.js
View file @
3857a361
...
@@ -67,7 +67,7 @@ module.exports = {
...
@@ -67,7 +67,7 @@ module.exports = {
'
vendor/placeholders/angular-placeholders-0.0.1-SNAPSHOT.min.js
'
,
'
vendor/placeholders/angular-placeholders-0.0.1-SNAPSHOT.min.js
'
,
'
vendor/angular-ui-router/release/angular-ui-router.js
'
,
'
vendor/angular-ui-router/release/angular-ui-router.js
'
,
'
vendor/angular-ui-utils/modules/route/route.js
'
,
'
vendor/angular-ui-utils/modules/route/route.js
'
,
'
vendor/pixi.js/bin/pixi.
dev.
js
'
'
vendor/pixi.js/bin/pixi.js
'
],
],
css
:
[
css
:
[
],
],
...
...
makefile
View file @
3857a361
...
@@ -9,7 +9,7 @@ build:
...
@@ -9,7 +9,7 @@ build:
docker build
-t
pixi-game .
docker build
-t
pixi-game .
run
:
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
# inside docker
install
:
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', [
...
@@ -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
.
start_button
=
{};
$scope
.
game
=
false
;
$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
.
start_button
.
click
=
function
(
event
)
{
$scope
.
game
=
true
;
$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
{
return
{
restrict
:
'
A
'
,
restrict
:
'
A
'
,
scope
:
true
,
scope
:
true
,
controller
:
function
(
$scope
,
$element
,
$attrs
,
$document
,
$window
)
{
controller
:
function
(
$scope
,
$element
,
$attrs
,
$document
,
$window
)
{
// init the first element
var
stage
=
new
PIXI
.
Container
();
$element
=
$element
[
0
];
var
graphics
=
new
PIXI
.
Graphics
();
var
game_div
=
document
.
getElementsByClassName
(
'
game-background
'
)[
0
];
var
stage_objects
=
{
var
width
=
game_div
.
scrollWidth
;
bg_white
:
PIXI
.
Sprite
.
fromImage
(
'
/assets/jeans_bg_white.png
'
),
var
height
=
660
;
jeans
:
PIXI
.
Sprite
.
fromImage
(
'
/assets/jeans_plane.png
'
),
bg
:
PIXI
.
Sprite
.
fromImage
(
'
/assets/jeans_cutout.png
'
),
console
.
log
(
width
,
height
);
water
:
PIXI
.
Sprite
.
fromImage
(
'
/assets/water.png
'
),
loader
:
PIXI
.
Sprite
.
fromImage
(
'
/assets/loader.png
'
)
// TODO: set color from options
};
var
stage
=
new
PIXI
.
Stage
();
var
init
=
function
(
stage
,
width
,
height
,
stage_objects
)
{
// create the root of the scene graph
// create the root of the scene graph
var
renderer
=
PIXI
.
autoDetectRenderer
(
width
,
height
,
var
renderer
=
PIXI
.
autoDetectRenderer
(
width
,
height
,
{
view
:
$element
,
{
view
:
$element
,
transparent
:
true
});
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
;
jeans
.
width
=
renderer
.
width
;
for
(
var
key
in
stage_objects
)
{
jeans
.
height
=
renderer
.
height
;
stage_objects
[
key
].
width
=
renderer
.
width
;
stage_objects
[
key
].
height
=
renderer
.
height
;
water
.
width
=
renderer
.
width
;
}
water
.
height
=
renderer
.
height
;
loader
.
y
=
0
;
stage_objects
.
loader
.
y
=
0
;
loader
.
x
=
0
;
stage_objects
.
loader
.
x
=
0
;
loader
.
height
=
24
;
stage_objects
.
loader
.
height
=
21
;
stage_objects
.
water
.
y
=
renderer
.
height
/
2
;
stage
.
addChild
(
bg_white
);
stage
.
addChild
(
stage_objects
.
bg_white
);
stage
.
addChild
(
jeans
);
stage
.
addChild
(
stage_objects
.
jeans
);
stage
.
addChild
(
water
);
stage
.
addChild
(
stage_objects
.
water
);
stage
.
addChild
(
bg
)
;
stage_objects
.
bg
.
interactive
=
true
;
stage
.
addChild
(
bg_white
);
stage
.
addChild
(
stage_objects
.
bg
);
stage
.
addChild
(
loader
);
animate
();
stage
.
addChild
(
stage_objects
.
bg_white
);
stage
.
addChild
(
stage_objects
.
loader
);
function
animate
()
{
return
renderer
;
renderer
.
render
(
stage
);
};
requestAnimFrame
(
animate
);
var
animate
=
function
()
{
if
(
$scope
.
game
)
{
if
(
$scope
.
game
)
{
water
.
position
.
y
+
=
1
;
stage_objects
.
water
.
position
.
y
-
=
1
;
loader
.
position
.
x
+=
0.
5
;
stage_objects
.
loader
.
position
.
x
+=
0.5
5
;
if
(
water
.
position
.
y
>
520
)
{
if
((
Date
.
now
()
-
$scope
.
start_time
)
>
10000
)
{
$scope
.
$apply
(
function
()
{
$scope
.
game
=
false
;
$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) {
//var init = function(rendererType, transparent, antialias, element) {
// if (!stage) {
// if (!stage) {
...
...
src/app/game/tapdance/tapdance-game.tpl.html
View file @
3857a361
<div
class=
"game-background"
>
<div
class=
"game-background"
>
<img
ng-show=
'
!game
'
class=
"bg-image"
src=
"/assets/jeans_bg.jpg"
alt=
'bg'
/>
<img
ng-show=
'
trial
'
class=
"bg-image"
src=
"/assets/jeans_bg.jpg"
alt=
'bg'
/>
<div
ng-show=
'
!game
'
class=
"popup gold"
>
<div
ng-show=
'
trial
'
class=
"popup gold"
>
<h1
class=
"text-center"
>
TRYOUT
</h1>
<h1
class=
"text-center"
>
TRYOUT
</h1>
<p
class=
"text-center"
>
Before you start dancing
</p>
<p
class=
"text-center"
>
Before you start dancing
</p>
<p
class=
"text-center"
>
try out how it's done
</p>
<p
class=
"text-center"
>
try out how it's done
</p>
...
@@ -11,6 +11,18 @@
...
@@ -11,6 +11,18 @@
</div>
</div>
</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"
>
<div
ng-show=
'game'
class=
"game"
>
<canvas
pixi=
"stage"
class=
"tapdance"
pixi-render=
"pixiRender"
<canvas
pixi=
"stage"
class=
"tapdance"
pixi-render=
"pixiRender"
pixi-transparent=
"true"
pixi-renderer=
"'webgl'"
></canvas>
pixi-transparent=
"true"
pixi-renderer=
"'webgl'"
></canvas>
...
...
src/app/game/tapdance/tapdance-how2play.tpl.html
View file @
3857a361
<div
class=
"game-background"
>
<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
ui-sref=
'game-tapdance-game'
><img
class=
"popup-image"
src=
"/assets/how2play.png"
alt=
'bg'
/>
<a
ui-sref=
'game-tapdance-game'
><img
class=
"popup-image"
src=
"/assets/how2play.png"
alt=
'bg'
/>
</a>
</a>
</div>
</div>
src/app/game/tapdance/tapdance-index.tpl.html
View file @
3857a361
...
@@ -2,12 +2,11 @@
...
@@ -2,12 +2,11 @@
<img
class=
"bg-image"
src=
"/assets/bg.jpg"
alt=
'bg'
/>
<img
class=
"bg-image"
src=
"/assets/bg.jpg"
alt=
'bg'
/>
<div
class=
"popup white"
>
<div
class=
"popup white"
>
<h1
class=
"text-center"
>
TAP DANCE
</h1>
<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"
>
<div
class=
"button-modal button-play"
>
<a
ui-sref=
'game-tapdance-how2play'
<a
ui-sref=
'game-tapdance-how2play'
class=
"button"
>
PLAY NOW
</a>
class=
"button"
>
LET'S GO
</a>
</div>
</div>
</div>
</div>
</div>
</div>
src/app/game/tapdance/tapdance-result.js
View file @
3857a361
angular
.
module
(
'
Interactive.game.tapdance.result
'
,
[
angular
.
module
(
'
Interactive.game.tapdance.result
'
,
[
'
ui.router
'
,
'
ui.router
'
,
'
ui.bootstrap
'
'
ui.bootstrap
'
,
'
Interactive.game.tapdance.game
'
])
])
.
config
(
function
(
$stateProvider
)
{
.
config
(
function
(
$stateProvider
)
{
...
@@ -19,6 +20,6 @@ angular.module('Interactive.game.tapdance.result', [
...
@@ -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"
>
<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>
<a><img
class=
"popup-image"
src=
"/assets/result_overlay.png"
alt=
'bg'
/></a>
</div>
</div>
src/assets/bg_tapdance_plain.jpg
0 → 100644
View file @
3857a361
24.4 KB
src/less/main.less
View file @
3857a361
...
@@ -20,6 +20,8 @@
...
@@ -20,6 +20,8 @@
@import 'variables.less';
@import 'variables.less';
@container-width: 320px;
* {
* {
margin: 0;
margin: 0;
padding: 0;
padding: 0;
...
@@ -34,8 +36,9 @@ body {
...
@@ -34,8 +36,9 @@ body {
}
}
.container {
.container {
width: 375px;
width: @container-width;
margin: 0 auot;
margin: 0 auto;
padding: 0 !important;
}
}
...
@@ -152,7 +155,6 @@ h2 {
...
@@ -152,7 +155,6 @@ h2 {
}
}
.container {
.container {
padding: 0 !important;
}
}
.game-background {
.game-background {
...
@@ -162,28 +164,32 @@ h2 {
...
@@ -162,28 +164,32 @@ h2 {
img.bg-image {
img.bg-image {
position: absolute;
position: absolute;
left: 0;
left: 0;
height: 667px;
width: 320px;
width: auto;
z-index: -1;
z-index: -1;
}
}
.popup-image {
.popup-image {
width:
380px
;
width:
@container-width
;
margin-left: auto;
margin-left: auto;
margin-right: auto;
margin-right: auto;
}
}
.popup {
.popup {
line-height: 0.5em;
margin-left: auto;
margin-left: auto;
padding: 0.5em 1em 0.5em 1em;
line-height: 1em;
margin-right: auto;
margin-right: auto;
padding: 1.5em;
position: relative;
position: relative;
top: 80px;
top: 80px;
width:
30
0px;
width:
25
0px;
}
}
.popup a {
color: white;
font-size: 2.0em;
}
.gold {
.gold {
-moz-border-radius: 30px;
-moz-border-radius: 30px;
-webkit-border-radius: 30px;
-webkit-border-radius: 30px;
...
@@ -197,17 +203,13 @@ img.bg-image {
...
@@ -197,17 +203,13 @@ img.bg-image {
}
}
.button-modal {
.button-modal {
margin: 3em 0em 1em 0em;
margin: 3em 0em 1.6em 0em;
}
.popup a {
color: white;
font-size: 2em;
}
}
.popup a.button {
.popup a.button {
margin-top: 2em;
margin-top: 2em;
padding: 0.5em 2em 0.5em 2em;
margin-bottom: 2em;
padding: 0.3em 1em 0.3em 1em;
}
}
.white {
.white {
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment