Browse files

Refactoring frogs class

  • Loading branch information...
1 parent 99e7abd commit eeabdae4824f7b3b9552a5c0fe6aac7ed4d65289 @utgarda committed Jan 18, 2012
Showing with 94 additions and 27 deletions.
  1. +27 −11 tree-frogs-final.html
  2. +67 −16 tree-frogs.html
View
38 tree-frogs-final.html
@@ -1,34 +1,45 @@
<!DOCTYPE html>
<html>
<head>
- <title>jQuery + CoffeeScript tutorial: animation stacking</title>
- <script src='http://coffeescript.org/extras/coffee-script.js'></script>
- <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script>
+ <title>jQuery + CoffeeScript tutorial: animation stacking
+ </title>
+ <script
+ src='http://coffeescript.org/extras/coffee-script.js'>
+ </script>
+ <script
+ src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/
+jquery.min.js'>
+ </script>
</head>
<body>
-<div id='green-leaf' style='background: #458008; position: relative; width: 200px; height: 200px' ></div>
+<div id='green-leaf'
+ style='background: #458008;
+ position: relative;
+ width: 200px;
+ height: 200px' ></div>
<script type="text/coffeescript">
$j = jQuery
class Frog
constructor: ([color, left, top], leaf) ->
- @obj = $j "<div style='background: #{color}; left: #{left}px; top:#{top}px; border: 1px solid white; height: 38px; width: 38px; position: absolute;'></div>"
+ @obj = $j """<div style='background: #{color};
+ left: #{left}px;
+ top:#{top}px;
+ border: 1px solid white;
+ height: 38px; width: 38px; position: absolute;'></div>"""
@obj.appendTo leaf
$aniArgs =
u: [{top: '-=40', height: 78},{height: 38}]
d: [{height: 78},{top: '+=40', height: 38}]
l: [{left: '-=40', width: 78}, {width: 38}]
r: [{width: 78}, {left: '+=40', width: 38}]
- jump: (dir, s) ->
+ move: (path) ->
@obj
.animate($aniArgs[dir][0])
- .animate($aniArgs[dir][1]) for i in [1..s]
+ .animate($aniArgs[dir][1]) for dir in path
this
- right: (n) ->
- jump 'r', n
- move: (path) -> this.jump(dir, 1) for dir in path
leaf = $j '#green-leaf'
@@ -42,7 +53,12 @@
])
$j ->
- frogs[i].move(path) for path, i in ['ddddrrrull', 'rrrulluuur', 'lulluuurrd', 'lldrddlluu', 'dluuurrddd']
+ frogs[i].move(path) for path, i in [
+ 'ddddrrrull'
+ 'rrrulluuur'
+ 'lulluuurrd'
+ 'lldrddlluu'
+ 'dluuurrddd']
</script>
</body>
View
83 tree-frogs.html
@@ -31,6 +31,14 @@
<input class='button' id='ani3_jump_around' type='button' value='Jump around'>
<input class='button' id='ani3_reset2' type='button' value='Reset'>
+<div id="leaf" class='green-leaf' style='background: #458008; position: relative; width: 200px; height: 200px' >
+</div>
+<input class='button' id='ani3_long_jumps' type='button' value='4 jumps in a row'>
+
+<div id="leaf2" class='green-leaf' style='background: #458008; position: relative; width: 200px; height: 200px' >
+</div>
+<input class='button' id='ani3_round_dance' type='button' value='Round dance!'>
+<input class='button' id='ani3_reset3' type='button' value='Reset'>
<script type="text/coffeescript">
$j = jQuery
@@ -68,22 +76,65 @@
bars2[4].stop(true, true).animate( left: 80, top:80, width:38, height:38 )
class Frog
- constructor: (@obj) ->
- up: ->
- @obj.animate(top: '-=40',height: 78).animate height: 38
- down: ->
- @obj.animate(height: 78).animate top: '+=40',height: 38
- right: ->
- @obj.animate(width: 78).animate left: '+=40', width: 38
- left: ->
- @obj.animate(left: '-=40', width: 78).animate width: 38
-
-$j ->
-# left left up right right right down down down down bars[0]
-# right up up up left left up right right right bars[1]
-# down right right up up up left left up left bars[2]
-# up up left left down down right down left left bars[3]
-# down down down right right up up up left down bars[4]
+ constructor: ([color, left, top], leaf) ->
+ @obj = $j """<div style='background: #{color};
+ left: #{left}px;
+ top:#{top}px;
+ border: 1px solid white;
+ height: 38px; width: 38px; position: absolute;'></div>"""
+ @obj.appendTo leaf
+ $aniArgs =
+ u: [{top: '-=40', height: 78},{height: 38}]
+ d: [{height: 78},{top: '+=40', height: 38}]
+ l: [{left: '-=40', width: 78}, {width: 38}]
+ r: [{width: 78}, {left: '+=40', width: 38}]
+ jump: (dir, s) ->
+ @obj
+ .animate($aniArgs[dir][0])
+ .animate($aniArgs[dir][1]) for i in [1..s]
+ this
+ right: (n) -> this.jump 'r', n
+ left: (n) -> this.jump 'l', n
+ up: (n) -> this.jump 'u', n
+ down: (n) -> this.jump 'd', n
+ move: (path) ->
+ @obj
+ .animate($aniArgs[dir][0])
+ .animate($aniArgs[dir][1]) for dir in path
+ this
+
+frogsData = [
+ ['#FF621D', 0, 0]
+ ['#B1D02C', 0, 160]
+ ['#D5FA6F', 160, 160]
+ ['#89C128', 160, 0]
+ ['#B42002', 80, 80] ]
+
+addFrogs = (leaf) ->
+ ( new Frog( params, leaf ) for params in frogsData )
+removeFrogs = (frogs) ->
+ f.obj.remove() for f in frogs
+
+frogs = addFrogs '#leaf'
+
+$j('#ani3_long_jumps').click ->
+ frogs[0].down(4).right(4).up(4).left(4)
+ frogs[1].right(4).up(4).left(4).down(4)
+ frogs[2].up(4).left(4).down(4).right(4)
+ frogs[3].left(4).down(4).right(4).up(4)
+
+frogs2 = addFrogs '#leaf2'
+
+$j('#ani3_round_dance').click ->
+ frogs2[i].move(path) for path, i in [
+ 'ddddrrrull'
+ 'rrrulluuur'
+ 'lulluuurrd'
+ 'lldrddlluu'
+ 'dluuurrddd']
+$j('#ani3_reset3').click ->
+ removeFrogs frogs2
+ frogs2 = addFrogs '#leaf2'
</script>
</body>

0 comments on commit eeabdae

Please sign in to comment.