beasavior/index.html at master · alixf/beasavior · GitHub

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
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
<html>
    <head>
        <title>BeASaviour - The serious game in which you can help !</title>
        <meta charset="utf8" />
        <style>
            body
            {
                margin: 0;
                background-image: url("textures/cartographer.png");
                background-repeat: repeat;
                color: white;
                font-family : "Trebuchet MS", serif;
            }
            canvas
            {
                width: 100%;
                height: 100%;
            }
            #WebGL
            {
                width: 1000px;
                height: 562px;
                border : 2px solid black;
                box-shadow : 0px 0px 15px #000;
                margin : auto;
            }
            h1
            {
                margin : 50px auto;
                max-width : 800px;
            }
            h1 img
            {
                max-width : 800px;
            }
            p
            {
                max-width : 800px;
                margin : 30px auto;
                font-size : 1.5em;
                text-align : justify;
            }
            p.right
            {
                text-align : right;
            }
            a
            {
                text-decoration : none;
                color : #0080FF;
            }
            section
            {
                max-width : 1000px;
                margin : 30px auto;
                background: rgba(0,0,0,0.33);
                box-shadow : 0px 0px 10px #000;
                padding : 30px;
            }
            #rules img
            {
                float : left;
                margin-right : 30px;
            }
            #rules img.right
            {
                float : right;
                margin-left : 30px;
            }
            h2
            {
                text-align : center;
                margin : 30px 0px;
                font-size : 2.5em;
            }
            .clear
            {
                clear : both;
            }
            input[type="range"]
            {
                -webkit-appearance: slider-vertical;
            }
            footer
            {
                text-align : center;
                font-weight: bold;
                color : grey;
                text-shadow : 0px 1px 0px #000;
                margin : 50px;
                font-size : 1.33em;
            }
        </style>

        <!--Libs-->
        <script src="libs/three.min.js"></script>
        <script src="libs/OrbitControls.js"></script>
        <script src="libs/jquery-2.1.1.js"></script>

        <!--Scripts-->
        <script src="scripts/Main.js"></script>
        <script src="scripts/sounds/crisis.js"></script>
        <script src="scripts/sounds/resources.js"></script>
        <script src="scripts/Area.js"></script>
        <script src="scripts/Skydome.js"></script>
        <script src="scripts/Path.js"></script>
    </head>
    <body class="text-center">
        <h1><img src="images/logo.png" alt="Be A Savior"></h1>
        <p>Be A Savior, l'application où vous pouvez sauver des vies ! Envoyez les ressources de la planète pour résoudre les crises humanitaires. Si votre stratégie fonctionne, vous pouvez faire un don et le répartir entre les différentes crises en temps réel !</p>
        <p class="right">Vous êtes nouveau ? <a href="#rules">Lisez les règles !</a></p>
        <div id="WebGL"></div>
        <div id="music">
            <h2>Réglages du Son</h2>
            <section style="text-align : center;">
                <input id="slider1" type="range" min="0" max="50" value="0.5" step="1" />
                <input id="slider2" type="range" min="0" max="50" value="0.5" step="1" />
                <input id="slider3" type="range" min="0" max="50" value="0.5" step="1" />
            </section>
        </div>
        <div id="rules">
            <h2>Règles</h2>
            <section>
                <img src="images/tuto1.png" alt="" />
                Vous pouvez vous déplacer sur la planète Terre avec votre souris, cliquez et maintenez enfoncé tout en vous déplaçant pour tourner autour du globe.
                <div class="clear"></div>
            </section>
            <section>
                <img src="images/tuto2.png" class="right" alt="" />
                Des ressource humanitaires apparaissent de temps en temps à la surface du globe, elles correspondent aux réserves de médicament ou aux dons envers le ONG lors d'évènement ou de campagne par exemple.
                <div class="clear"></div>
            </section>
            <section>
                <img src="images/tuto3.png" alt="" />
                Des crises humanitaires apparaissent également ! Guerres civiles, épidémies, catastrophes naturelles, c'est à vous de trouver la meilleur stratégie pour résoudre ces problèmes.
                <div class="clear"></div>
            </section>
            <section>
                <img src="images/tuto4.png" class="right" alt="" />
                Pour cela, tracez des liens entre les ressources et les crises humanitaires en cliquant sur le premier puis le deuxième. Attention ! Certaines crises s'étendent plus rapidement que d'autres !
                <div class="clear"></div>
            </section>
            <section>
                Les fonctionnalités suivantes n'ont malheureusement pas pu être implémentés:
                <ul>
                    <li>Des points de vie pour les endroits de ressources et de crises. Les lieux de crises reliés à des ressources verraient leurs points de vie diminuer, et les ressources s'épuiseraient avec l'utilisation et le temps.</li>
                    <li>Une fonction de reroll pour recréer la nouvelle crise/ressource si jamais le lieu choisi par la generation automatique est déjà occupé.</li>
                    <li><span style="font-weight:bold;">Une version avec laquelle les utilisateurs peuvent manipuler leurs propres dons et résoudre les crises en temps réel.</span></li>
                </ul>
                <div class="clear"></div>
            </section>
        </div>
        <footer>
            Jeu réalisé par l'équipe "Les Programmateurs" pour la Nuit de l'Info 2014 !
        </footer>
    </body>
</html>