Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

fixed up sprite directives

  • Loading branch information...
commit fc84b5d4ff26882bbcb07f7fcdffc7f061b036da 1 parent 6911b4b
@seanhess authored
View
3  public/controllers/GameCtrl.ts
@@ -102,6 +102,7 @@ angular.module('controllers')
var position = Board.move(players.current, direction)
if (!position) return
+ // the x and y change
players.current.x = position.x
players.current.y = position.y
players.current.direction = position.direction
@@ -122,7 +123,7 @@ angular.module('controllers')
//}, 500);
/*players.current[location.axis] = location.location;
- players.current.facing = location.facing;
+ players.current.direction = location.direction;
players.move(players.current);*/
// WILL I HIT ANY OTHER PLAYERS?
View
17 public/css/main.css
@@ -89,26 +89,10 @@ html {
-o-transition-duration: 500ms;
-ms-transition-duration: 500ms;
transition-duration: 500ms;
- background: url("/images/player1.png") no-repeat -150px -150px;
position: absolute;
width: 50px;
height: 50px;
}
-#game #board .player2 {
- background: url("/images/player2.png") no-repeat -150px -150px;
-}
-#game #board .player3 {
- background: url("/images/player3.png") no-repeat -150px -150px;
-}
-#game #board .player4 {
- background: url("/images/player4.png") no-repeat -150px -150px;
-}
-#game #board .player5 {
- background: url("/images/player5.png") no-repeat -150px -150px;
-}
-#game #board .player6 {
- background: url("/images/player6.png") no-repeat -150px -150px;
-}
#game #board .missile {
position: absolute;
width: 50px;
@@ -204,6 +188,7 @@ html {
height: 89px;
margin-top: 16px;
}
+.avatar,
.avatar.player1 {
background: url("/images/player1.png") no-repeat center bottom;
}
View
21 public/css/main.styl
@@ -83,26 +83,10 @@ body, html
-ms-transition-property top, left
-o-transition-property top, left
transition-duration(500ms)
- background url(/images/player1.png) no-repeat -150px -150px
position absolute
width 50px
height 50px
- .player2
- background url(/images/player2.png) no-repeat -150px -150px
-
- .player3
- background url(/images/player3.png) no-repeat -150px -150px
-
- .player4
- background url(/images/player4.png) no-repeat -150px -150px
-
- .player5
- background url(/images/player5.png) no-repeat -150px -150px
-
- .player6
- background url(/images/player6.png) no-repeat -150px -150px
-
.missile
position absolute
width 50px
@@ -176,7 +160,10 @@ body, html
height 89px
margin-top 16px
-.avatar.player1
+
+// Directions
+
+.avatar, .avatar.player1
background url(/images/player1.png) no-repeat center bottom
.avatar.player2
View
125 public/directives/sprite.ts
@@ -1,77 +1,84 @@
///<reference path="../def/angular.d.ts"/>
-angular.module('directives')
+/*
-.directive('sprite', function($parse) {
- return function(scope:ng.IScope, element:JQuery, attrs) {
- // element is the player div
- // attrs.sprite is "player1"
+// sprite-walking="player.walking"
+// sprite: generic, plays through different sprites on a sheet
+// hmm... I'd like to reuse some stuff
- var isWalking;
- function setFacing(facing) {
- var facing = (typeof facing == 'undefined') ? "down" : facing;
+SPRITES: in general, make them change vertically, so you just change the background-y
- if(facing == "up") {
- element.css('backgroundPositionY', '-100px');
- }
+... this should be defined in the CSS, no?
- if(facing == "right") {
- element.css('backgroundPositionY', '-50px');
- }
+PERSON: bind to direction
+PERSON: play through multiple states
+*/
- if(facing == "down") {
- element.css('backgroundPositionY', '-150px');
- }
- if(facing == "left") {
- element.css('backgroundPositionY', '0px');
- }
- }
+angular.module('directives')
+
+// simple directive that updates the background-y given a direction
+// shouldn't some of this be in the css instead? Should this have the knowledge
+// of the background size?
+
+.directive('spriteDirection', function(Board:IBoard) {
+ return {
+ restrict:'A',
+ link:function(scope:ng.IScope, element:JQuery, attrs) {
+ scope.$watch(attrs.spriteDirection, function(direction) {
+ direction = direction || Board.DOWN
+
+ if(direction == Board.UP)
+ element.css('backgroundPositionY', '-100px');
+
+ else if(direction == Board.RIGHT)
+ element.css('backgroundPositionY', '-50px');
+
+ else if(direction == Board.DOWN)
+ element.css('backgroundPositionY', '-150px');
- function walking() {
- var i = 0;
- var animateWalk = function() {
- return setTimeout(function(){
- setSprite(++i % 3);
- if(isWalking) {
- animateWalk();
- }
- }, 70);
- }
-
- return animateWalk();
+ else if(direction == Board.LEFT)
+ element.css('backgroundPositionY', '0px');
+ })
}
+ }
+})
+
+// Now, sprite-walking. I need to know when either x or y changes
+.directive('spriteWalking', function(Board:IBoard) {
+ return function(scope:ng.IScope, element:JQuery, attrs) {
+
+ var ANIMATE_DURATION = 500
+ var FRAME_DURATION = 70
+ var TOTAL_FRAMES = Math.ceil(ANIMATE_DURATION / FRAME_DURATION)
- function setSprite(sprite) {
- if(sprite == 0) {
- element.css('backgroundPositionX', '0');
- }
+ // animate up to a certain number of times
+ // well, until css transition end, really
+ // you need to know the duration, so you can set a timer
- if(sprite == 1) {
- element.css('backgroundPositionX', '-50px');
- }
+ var interval;
+ var frame;
+
+ function startWalking() {
+ frame = 0
+ stopWalking() // don't double animate!
+ interval = setInterval(animateFrame, FRAME_DURATION)
+ }
+
+ function stopWalking() {
+ frame = 0
+ clearInterval(interval)
+ }
- if(sprite == 2) {
- element.css('backgroundPositionX', '-100px');
- }
+ function animateFrame() {
+ var sprite = frame++ % 3
+ if(sprite == 0) element.css('backgroundPositionX', '0');
+ else if(sprite == 1) element.css('backgroundPositionX', '-50px');
+ else if(sprite == 2) element.css('backgroundPositionX', '-100px');
+ if (frame >= TOTAL_FRAMES) stopWalking()
}
- scope.$watch(attrs.sprite, function(val) {
- setSprite(val);
- })
-
- scope.$watch(attrs.spriteFacing, function(val) {
- setFacing(val);
- })
-
- scope.$watch(attrs.spriteWalking, function(val) {
- if(val) {
- isWalking = true;
- walking();
- } else {
- isWalking = false;
- }
- })
+ scope.$watch(attrs.spriteWalking, startWalking)
}
})
View
10 public/partials/game.html
@@ -30,13 +30,15 @@
<h1 class="winner" ng-show="players.winner">{{players.winner.name}} Wins!</h1>
- <div class="player {{player.avatar}}"
+ <div class="player avatar {{player.avatar}}"
ng-repeat="player in players.all | filter:{state:'alive'}"
ng-style="player | position"
- sprite="player.sprite"
- sprite-facing="player.facing"
- sprite-walking="player.walking"
+ sprite-direction="player.direction"
+ sprite-walking="player.x"
>
+
+ <!--sprite-walking="player.x + player.y"-->
+
<div class="taunt triangle-border left" ng-show="players.taunt">{{players.taunt}}</div>
</div>
<div ng-repeat="missile in missiles.all">
View
3  public/services/Players.ts
@@ -129,9 +129,6 @@ angular.module('services')
}
// what can change on a person?
- // position = {x, y, facing}
- // then you can bind to it separately
-
function onJoin(state:IPlayerState, player:IPlayer) {
if (!state.current && player.name == state.myname) {
state.current = player
Please sign in to comment.
Something went wrong with that request. Please try again.