Commit 893c4e9ab54cda78b09942d77c3efb2bb67d392b
1 parent
04bb6896
Stars
Showing
4 changed files
with
35 additions
and
1 deletions
Show diff stats
public/index.html
@@ -11,6 +11,8 @@ | @@ -11,6 +11,8 @@ | ||
11 | <script type="text/javascript" src="/main.js"></script> | 11 | <script type="text/javascript" src="/main.js"></script> |
12 | </head> | 12 | </head> |
13 | <body> | 13 | <body> |
14 | + <div id="stars"> | ||
15 | + </div> | ||
14 | <div id="header" class="row"> | 16 | <div id="header" class="row"> |
15 | <div class="col-md-4"> | 17 | <div class="col-md-4"> |
16 | <p>Un seul objectif : battre le meilleur score dans l'aventure épique de Trosh !<br/> | 18 | <p>Un seul objectif : battre le meilleur score dans l'aventure épique de Trosh !<br/> |
public/main.js
@@ -71,7 +71,13 @@ $(function() { | @@ -71,7 +71,13 @@ $(function() { | ||
71 | var x = Math.round((2*Math.random()-1)*thresold); | 71 | var x = Math.round((2*Math.random()-1)*thresold); |
72 | var y = Math.round((2*Math.random()-1)*thresold); | 72 | var y = Math.round((2*Math.random()-1)*thresold); |
73 | $('body').css('transform', 'translate('+x+'px, '+y+'px)'); | 73 | $('body').css('transform', 'translate('+x+'px, '+y+'px)'); |
74 | + } | ||
75 | + | ||
76 | + var h = $('#stars').height(); | ||
77 | + var w = $('#stars').width(); | ||
74 | 78 | ||
79 | + for (var i = 0; i < 10; i++) { | ||
80 | + $('#stars').append($('<img>').attr('src', 'graphics/star.png').css('top', (Math.random() * h) + 'px')) | ||
75 | } | 81 | } |
76 | 82 | ||
77 | (function anim() { | 83 | (function anim() { |
@@ -88,6 +94,18 @@ $(function() { | @@ -88,6 +94,18 @@ $(function() { | ||
88 | shake(Math.exp(10 * (shakeStart - now) / SHAKE_DURATION) * SHAKE_MAX_THRESOLD) | 94 | shake(Math.exp(10 * (shakeStart - now) / SHAKE_DURATION) * SHAKE_MAX_THRESOLD) |
89 | } | 95 | } |
90 | 96 | ||
97 | + // Stars | ||
98 | + $('#stars img').each(function(i, el) { | ||
99 | + var e = $(el); | ||
100 | + var pos = e.position() | ||
101 | + if (pos.top > h) { | ||
102 | + e.css('top', '0px'); | ||
103 | + e.css('left', Math.floor(Math.random() * w) + 'px'); | ||
104 | + } else { | ||
105 | + e.css('top', (pos.top + 100) + 'px'); | ||
106 | + } | ||
107 | + }); | ||
108 | + | ||
91 | requestAnimationFrame(anim); | 109 | requestAnimationFrame(anim); |
92 | 110 | ||
93 | })(); | 111 | })(); |
public/style.css
@@ -10,6 +10,20 @@ body { | @@ -10,6 +10,20 @@ body { | ||
10 | font-size: 17pt; | 10 | font-size: 17pt; |
11 | } | 11 | } |
12 | 12 | ||
13 | +#stars { | ||
14 | + position: fixed; | ||
15 | + top: 0px; | ||
16 | + left: 0px; | ||
17 | + right: 0px; | ||
18 | + bottom: 0px; | ||
19 | +} | ||
20 | + | ||
21 | +#stars img { | ||
22 | + position: absolute; | ||
23 | + width: 100px; | ||
24 | + image-rendering: -moz-crisp-edges; | ||
25 | +} | ||
26 | + | ||
13 | #header { | 27 | #header { |
14 | margin-top: 15px; | 28 | margin-top: 15px; |
15 | } | 29 | } |
@@ -66,7 +80,6 @@ body { | @@ -66,7 +80,6 @@ body { | ||
66 | 80 | ||
67 | #footer p { | 81 | #footer p { |
68 | margin-top: 50px; | 82 | margin-top: 50px; |
69 | - font-size: 75%; | ||
70 | text-align: center; | 83 | text-align: center; |
71 | } | 84 | } |
72 | 85 |