Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse code

Refactoring frogs class

  • Loading branch information...
commit eeabdae4824f7b3b9552a5c0fe6aac7ed4d65289 1 parent 99e7abd
Evgeniy Tsvigun authored

Showing 2 changed files with 94 additions and 27 deletions. Show diff stats Hide diff stats

  1. +27 11 tree-frogs-final.html
  2. +67 16 tree-frogs.html
38 tree-frogs-final.html
... ... @@ -1,34 +1,45 @@
1 1 <!DOCTYPE html>
2 2 <html>
3 3 <head>
4   - <title>jQuery + CoffeeScript tutorial: animation stacking</title>
5   - <script src='http://coffeescript.org/extras/coffee-script.js'></script>
6   - <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script>
  4 + <title>jQuery + CoffeeScript tutorial: animation stacking
  5 + </title>
  6 + <script
  7 + src='http://coffeescript.org/extras/coffee-script.js'>
  8 + </script>
  9 + <script
  10 + src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/
  11 +jquery.min.js'>
  12 + </script>
7 13 </head>
8 14
9 15 <body>
10   -<div id='green-leaf' style='background: #458008; position: relative; width: 200px; height: 200px' ></div>
  16 +<div id='green-leaf'
  17 + style='background: #458008;
  18 + position: relative;
  19 + width: 200px;
  20 + height: 200px' ></div>
11 21
12 22 <script type="text/coffeescript">
13 23 $j = jQuery
14 24
15 25 class Frog
16 26 constructor: ([color, left, top], leaf) ->
17   - @obj = $j "<div style='background: #{color}; left: #{left}px; top:#{top}px; border: 1px solid white; height: 38px; width: 38px; position: absolute;'></div>"
  27 + @obj = $j """<div style='background: #{color};
  28 + left: #{left}px;
  29 + top:#{top}px;
  30 + border: 1px solid white;
  31 + height: 38px; width: 38px; position: absolute;'></div>"""
18 32 @obj.appendTo leaf
19 33 $aniArgs =
20 34 u: [{top: '-=40', height: 78},{height: 38}]
21 35 d: [{height: 78},{top: '+=40', height: 38}]
22 36 l: [{left: '-=40', width: 78}, {width: 38}]
23 37 r: [{width: 78}, {left: '+=40', width: 38}]
24   - jump: (dir, s) ->
  38 + move: (path) ->
25 39 @obj
26 40 .animate($aniArgs[dir][0])
27   - .animate($aniArgs[dir][1]) for i in [1..s]
  41 + .animate($aniArgs[dir][1]) for dir in path
28 42 this
29   - right: (n) ->
30   - jump 'r', n
31   - move: (path) -> this.jump(dir, 1) for dir in path
32 43
33 44 leaf = $j '#green-leaf'
34 45
@@ -42,7 +53,12 @@
42 53 ])
43 54
44 55 $j ->
45   - frogs[i].move(path) for path, i in ['ddddrrrull', 'rrrulluuur', 'lulluuurrd', 'lldrddlluu', 'dluuurrddd']
  56 + frogs[i].move(path) for path, i in [
  57 + 'ddddrrrull'
  58 + 'rrrulluuur'
  59 + 'lulluuurrd'
  60 + 'lldrddlluu'
  61 + 'dluuurrddd']
46 62 </script>
47 63
48 64 </body>
83 tree-frogs.html
@@ -31,6 +31,14 @@
31 31 <input class='button' id='ani3_jump_around' type='button' value='Jump around'>
32 32 <input class='button' id='ani3_reset2' type='button' value='Reset'>
33 33
  34 +<div id="leaf" class='green-leaf' style='background: #458008; position: relative; width: 200px; height: 200px' >
  35 +</div>
  36 +<input class='button' id='ani3_long_jumps' type='button' value='4 jumps in a row'>
  37 +
  38 +<div id="leaf2" class='green-leaf' style='background: #458008; position: relative; width: 200px; height: 200px' >
  39 +</div>
  40 +<input class='button' id='ani3_round_dance' type='button' value='Round dance!'>
  41 +<input class='button' id='ani3_reset3' type='button' value='Reset'>
34 42
35 43 <script type="text/coffeescript">
36 44 $j = jQuery
@@ -68,22 +76,65 @@
68 76 bars2[4].stop(true, true).animate( left: 80, top:80, width:38, height:38 )
69 77
70 78 class Frog
71   - constructor: (@obj) ->
72   - up: ->
73   - @obj.animate(top: '-=40',height: 78).animate height: 38
74   - down: ->
75   - @obj.animate(height: 78).animate top: '+=40',height: 38
76   - right: ->
77   - @obj.animate(width: 78).animate left: '+=40', width: 38
78   - left: ->
79   - @obj.animate(left: '-=40', width: 78).animate width: 38
80   -
81   -$j ->
82   -# left left up right right right down down down down bars[0]
83   -# right up up up left left up right right right bars[1]
84   -# down right right up up up left left up left bars[2]
85   -# up up left left down down right down left left bars[3]
86   -# down down down right right up up up left down bars[4]
  79 + constructor: ([color, left, top], leaf) ->
  80 + @obj = $j """<div style='background: #{color};
  81 + left: #{left}px;
  82 + top:#{top}px;
  83 + border: 1px solid white;
  84 + height: 38px; width: 38px; position: absolute;'></div>"""
  85 + @obj.appendTo leaf
  86 + $aniArgs =
  87 + u: [{top: '-=40', height: 78},{height: 38}]
  88 + d: [{height: 78},{top: '+=40', height: 38}]
  89 + l: [{left: '-=40', width: 78}, {width: 38}]
  90 + r: [{width: 78}, {left: '+=40', width: 38}]
  91 + jump: (dir, s) ->
  92 + @obj
  93 + .animate($aniArgs[dir][0])
  94 + .animate($aniArgs[dir][1]) for i in [1..s]
  95 + this
  96 + right: (n) -> this.jump 'r', n
  97 + left: (n) -> this.jump 'l', n
  98 + up: (n) -> this.jump 'u', n
  99 + down: (n) -> this.jump 'd', n
  100 + move: (path) ->
  101 + @obj
  102 + .animate($aniArgs[dir][0])
  103 + .animate($aniArgs[dir][1]) for dir in path
  104 + this
  105 +
  106 +frogsData = [
  107 + ['#FF621D', 0, 0]
  108 + ['#B1D02C', 0, 160]
  109 + ['#D5FA6F', 160, 160]
  110 + ['#89C128', 160, 0]
  111 + ['#B42002', 80, 80] ]
  112 +
  113 +addFrogs = (leaf) ->
  114 + ( new Frog( params, leaf ) for params in frogsData )
  115 +removeFrogs = (frogs) ->
  116 + f.obj.remove() for f in frogs
  117 +
  118 +frogs = addFrogs '#leaf'
  119 +
  120 +$j('#ani3_long_jumps').click ->
  121 + frogs[0].down(4).right(4).up(4).left(4)
  122 + frogs[1].right(4).up(4).left(4).down(4)
  123 + frogs[2].up(4).left(4).down(4).right(4)
  124 + frogs[3].left(4).down(4).right(4).up(4)
  125 +
  126 +frogs2 = addFrogs '#leaf2'
  127 +
  128 +$j('#ani3_round_dance').click ->
  129 + frogs2[i].move(path) for path, i in [
  130 + 'ddddrrrull'
  131 + 'rrrulluuur'
  132 + 'lulluuurrd'
  133 + 'lldrddlluu'
  134 + 'dluuurrddd']
  135 +$j('#ani3_reset3').click ->
  136 + removeFrogs frogs2
  137 + frogs2 = addFrogs '#leaf2'
87 138 </script>
88 139
89 140 </body>

0 comments on commit eeabdae

Please sign in to comment.
Something went wrong with that request. Please try again.