-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
72 lines (71 loc) · 3.71 KB
/
index.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
66
67
68
69
70
71
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Transtellar</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"/>
<link href="css/main.css" rel="stylesheet" type="text/css">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://cdn.bootcss.com/phaser/2.6.2/phaser.min.js"></script>
<script src="https://cdn.bootcss.com/lodash.js/4.17.4/lodash.min.js"></script>
<script src="https://cdn.bootcss.com/vue/2.5.13/vue.min.js"></script></script>
<script src="js/util_fun.js"></script>
<script src="js/smoother.js"></script>
</head>
<body>
<div id="canvas-wrapper"></div>
<div id="ui"></div>
<script type="text/x-template" id="vue-root">
<div id="ui">
<div class="ui-overlay" v-if="state === 'gaming'">
<div class="arrow-line" :class="{hard : bHard}">
<div v-for="(one,index) in arrowArr" :class='[one, index < iSingleTransIndex ? "finish" : ""]' class="marker">
</div>
</div>
<div class="time-line" ref="timeLine">
Time Left: {{nowTime.toFixed(1)}}
</div>
<div class="loading" v-if="loadingActive">Loading...</div>
</div>
<div class="dead-overlay" v-if="state === 'dead'">
<img class="cute-alien" src="assets/cute-alien.png">
<div class="result-text" v-if="iFinishPlant"> Congrats! <br> {{iFinishPlant}} planets have known your civilization. </div>
<div class="result-text" v-else> No planets have known your civilization. But you are not alone.Try Harder !</div>
<button class="bt bt-yellow btn-restart" @click="onBtRestart">Restart</button>
<button class="bt bt-blue btn-gohome" @click="onBtnGoHome">Back Home</button>
</div>
<div class="page intro" v-if="state === 'intro'" :class="{'active':introActive}">
<div class="logo-wrapper" ref="logoWrapper">
<div class="planet-wrapper">
<div class="planet" style="background-image: url('/assets/img/title-planet.png')">
</div>
</div>
<div class="title-1-wrapper">
<div class="title title-1" style="background-image: url('/assets/img/title-1.png')">
</div>
</div>
<div class="title-2-wrapper">
<div class="title title-2" style="background-image: url('/assets/img/title-2.png')">
</div>
</div>
<div class="pc-wrapper pc-1-wrapper">
<div class="pc pc-1" style="background-image: url('/assets/img/pc-1.png')"></div>
</div>
<div class="pc-wrapper pc-2-wrapper">
<div class="pc pc-2" style="background-image: url('/assets/img/pc-2.png')"></div>
</div>
<div class="pc-wrapper pc-3-wrapper">
<div class="pc pc-3" style="background-image: url('/assets/img/pc-3.png')"></div>
</div>
<button class="bt bt-blue" id="bt-start" ref="btStart" @click="onBtStartClick">Start Game</button>
<button class="bt bt-yellow" id="bt-hard" @click="onHardStartClick">Hard Mode</button>
</div>
</div>
<div class="page" v-if="state === 'over'"></div>
</div>
</script>
<script src="js/hammer.js"></script>
<script src="js/ui.js"></script>
<script src="js/game.js"></script>
</body>
</html>