-
Notifications
You must be signed in to change notification settings - Fork 6
/
tree-frogs-final.html
65 lines (58 loc) · 1.53 KB
/
tree-frogs-final.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
<!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>
</head>
<body>
<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.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}]
move: (path) ->
@obj
.animate($aniArgs[dir][0])
.animate($aniArgs[dir][1]) for dir in path
this
leaf = $j '#green-leaf'
#Array comprehension, here it goes!
frogs = ( new Frog( params, leaf ) for params in [
['#FF621D', 0, 0]
['#B1D02C', 0, 160]
['#D5FA6F', 160, 160]
['#89C128', 160, 0]
['#B42002', 80, 80]
])
$j ->
frogs[i].move(path) for path, i in [
'ddddrrrull'
'rrrulluuur'
'lulluuurrd'
'lldrddlluu'
'dluuurrddd']
</script>
</body>
</html>