-
Notifications
You must be signed in to change notification settings - Fork 2
Expand file tree
/
Copy paththegame.html
More file actions
109 lines (89 loc) · 39.2 KB
/
thegame.html
File metadata and controls
109 lines (89 loc) · 39.2 KB
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
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1 ,user-scalable=no">
<title>CSS 3D Game | LEAP ENABLED</title>
<!--LEAPJS API-->
<script src="leap-0.6.4.js"></script>
<script src="leap-plugins-0.1.6.js"></script>
<!--STYLE SHEETS-->
<link rel="stylesheet" href="xwing.css">
<link rel="stylesheet" href="city.css">
</head>
<body>
<header>
<h1>leap motion enabled css 3d game demo
<img src="assets/leap.png" alt="LEAP DEVICE" />
</h1>
</header>
<!--THE CITY-->
<div id="city">
<!--GRADIENT UP AND LOW AND background MIDDLE-->
<div class="visualizer">
<div class="highs"></div>
<div class="fog"></div>
<div class="lows"></div>
</div>
<div class="container"> <!--container for the plane and buildings-->
<!-- ADDING CITY DETAILS -->
<div id="details">
<div class="left"></div><!-- left is a river-->
<div class="right"></div><!--right is park-->
<div class="middle"><!-- in middle there are roads-->
<div class="straight" ></div>
<div class="straight toleft" ></div>
<div class="straight toright" ></div>
<div class="turnl" ></div>
<div class="turnr" ></div>
</div>
<div class="middle" style='transform:translateY(10px) translateZ(300px)'><!-- in middle there are roads-->
<div class="straight" ></div>
<div class="straight toleft" ></div>
<div class="straight toright" ></div>
</div>
<div id="right_image"></div><!--for the container wall or Apartments-->
<!--back_image container-->
<div id="back_image"></div>
<div id="left_image"></div><!--for the container wall or Apartments-->
</div>
<div id="tridiv">
<div class="scene" style="" id="container">
<div class="shape cuboid-1 cub-1"> <div class="face ft"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div> </div> <div class="face bk"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div> </div> <div class="face rt"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div> </div> <div class="face lt"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div> </div> <div class="face bm"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div> </div> <div class="face tp"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div> </div> </div> <div class="shape prism-1 pri-1"> <div class="face ft"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.0588235);"></div> </div> <div class="face bk"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div> </div> <div class="face-wrapper rt"> <div class="face"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div> </div> </div> <div class="face-wrapper lt"> <div class="face"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div> </div> </div> <div class="face bm"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div> </div> </div> <div class="shape cuboid-2 cub-2"> <div class="face ft"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div> </div> <div class="face bk"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div> </div> <div class="face rt"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div> </div> <div class="face lt"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div> </div> <div class="face bm"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div> </div> <div class="face tp"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div> </div> </div> <div class="shape prism-2 pri-2"> <div class="face ft"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.0901961);"></div> </div> <div class="face bk"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div> </div> <div class="face-wrapper rt"> <div class="face"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div> </div> </div> <div class="face-wrapper lt"> <div class="face"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div> </div> </div> <div class="face bm"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div> </div> </div> <div class="shape prism-3 pri-3"> <div class="face ft"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.0823529);"></div> </div> <div class="face bk"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div> </div> <div class="face-wrapper rt"> <div class="face"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div> </div> </div> <div class="face-wrapper lt"> <div class="face"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div> </div> </div> <div class="face bm"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div> </div> </div> <div class="shape prism-4 pri-4"> <div class="face ft"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.0823529);"></div> </div> <div class="face bk"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div> </div> <div class="face-wrapper rt"> <div class="face"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div> </div> </div> <div class="face-wrapper lt"> <div class="face"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div> </div> </div> <div class="face bm"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div> </div> </div> <div class="shape prism-5 pri-5"> <div class="face ft"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.0392157);"></div> </div> <div class="face bk"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div> </div> <div class="face-wrapper rt"> <div class="face"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div> </div> </div> <div class="face-wrapper lt"> <div class="face"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div> </div> </div> <div class="face bm"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div> </div> </div> <div class="shape cuboid-3 cub-3"> <div class="face ft"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div> </div> <div class="face bk"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div> </div> <div class="face rt"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div> </div> <div class="face lt"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div> </div> <div class="face bm"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div> </div> <div class="face tp"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div> </div> </div> <div class="shape cuboid-4 cub-4"> <div class="face ft"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div> </div> <div class="face bk"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div> </div> <div class="face rt"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div> </div> <div class="face lt"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div> </div> <div class="face bm"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div> </div> <div class="face tp"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div> </div> </div> <div class="shape prism-6 pri-6"> <div class="face ft"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.0980392);"></div> </div> <div class="face bk"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div> </div> <div class="face-wrapper rt"> <div class="face"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div> </div> </div> <div class="face-wrapper lt"> <div class="face"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div> </div> </div> <div class="face bm"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div> </div> </div> <div class="shape prism-7 pri-7"> <div class="face ft"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.0980392);"></div> </div> <div class="face bk"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div> </div> <div class="face-wrapper rt"> <div class="face"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div> </div> </div> <div class="face-wrapper lt"> <div class="face"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div> </div> </div> <div class="face bm"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div> </div> </div> <div class="shape prism-8 pri-8"> <div class="face ft"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.0980392);"></div> </div> <div class="face bk"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div> </div> <div class="face-wrapper rt"> <div class="face"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div> </div> </div> <div class="face-wrapper lt"> <div class="face"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div> </div> </div> <div class="face bm"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div> </div> </div> <div class="shape prism-9 pri-9"> <div class="face ft"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.0980392);"></div> </div> <div class="face bk"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div> </div> <div class="face-wrapper rt"> <div class="face"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div> </div> </div> <div class="face-wrapper lt"> <div class="face"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div> </div> </div> <div class="face bm"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div> </div> </div> <div class="shape cylinder-1 cyl-1"> <div class="face bm"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div> </div> <div class="face tp"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div> </div> <div class="face side s0"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.137255);"></div> </div> <div class="face side s1"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.137255);"></div> </div> <div class="face side s2"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.298039);"></div> </div> <div class="face side s3"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.501961);"></div> </div> <div class="face side s4"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.662745);"></div> </div> <div class="face side s5"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.662745);"></div> </div> <div class="face side s6"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.501961);"></div> </div> <div class="face side s7"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.298039);"></div> </div> </div> <div class="shape cylinder-2 cyl-2"> <div class="face bm"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div> </div> <div class="face tp"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div> </div> <div class="face side s0"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.121569);"></div> </div> <div class="face side s1"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div> </div> <div class="face side s2"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.466667);"></div> </div> <div class="face side s3"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.678431);"></div> </div> <div class="face side s4"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div> </div> <div class="face side s5"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.333333);"></div> </div> </div> <div class="shape prism-10 pri-10"> <div class="face ft"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.141176);"></div> </div> <div class="face bk"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div> </div> <div class="face-wrapper rt"> <div class="face"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div> </div> </div> <div class="face-wrapper lt"> <div class="face"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div> </div> </div> <div class="face bm"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div> </div> </div> <div class="shape cylinder-3 cyl-3"> <div class="face bm"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div> </div> <div class="face tp"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div> </div> <div class="face side s0"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.121569);"></div> </div> <div class="face side s1"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div> </div> <div class="face side s2"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.466667);"></div> </div> <div class="face side s3"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.678431);"></div> </div> <div class="face side s4"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div> </div> <div class="face side s5"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.333333);"></div> </div> </div> <div class="shape cuboid-5 cub-5"> <div class="face ft"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div> </div> <div class="face bk"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div> </div> <div class="face rt"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div> </div> <div class="face lt"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div> </div> <div class="face bm"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div> </div> <div class="face tp"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div> </div> </div> <div class="shape cuboid-6 cub-6"> <div class="face ft"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div> </div> <div class="face bk"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div> </div> <div class="face rt"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div> </div> <div class="face lt"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div> </div> <div class="face bm"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div> </div> <div class="face tp"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div> </div> </div> <div class="shape cylinder-4 cyl-4"> <div class="face bm"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div> </div> <div class="face tp"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div> </div> <div class="face side s0"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.137255);"></div> </div> <div class="face side s1"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.137255);"></div> </div> <div class="face side s2"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.298039);"></div> </div> <div class="face side s3"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.501961);"></div> </div> <div class="face side s4"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.662745);"></div> </div> <div class="face side s5"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.662745);"></div> </div> <div class="face side s6"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.501961);"></div> </div> <div class="face side s7"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.298039);"></div> </div> </div> <div class="shape cylinder-5 cyl-5"> <div class="face bm"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div> </div> <div class="face tp"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div> </div> <div class="face side s0"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.121569);"></div> </div> <div class="face side s1"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div> </div> <div class="face side s2"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.466667);"></div> </div> <div class="face side s3"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.678431);"></div> </div> <div class="face side s4"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div> </div> <div class="face side s5"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.333333);"></div> </div> </div> <div class="shape cylinder-6 cyl-6"> <div class="face bm"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div> </div> <div class="face tp"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div> </div> <div class="face side s0"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.121569);"></div> </div> <div class="face side s1"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div> </div> <div class="face side s2"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.466667);"></div> </div> <div class="face side s3"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.678431);"></div> </div> <div class="face side s4"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div> </div> <div class="face side s5"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.333333);"></div> </div> </div> <div class="shape cuboid-7 cub-7"> <div class="face ft"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div> </div> <div class="face bk"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div> </div> <div class="face rt"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div> </div> <div class="face lt"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div> </div> <div class="face bm"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div> </div> <div class="face tp"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div> </div> </div> <div class="shape prism-11 pri-11"> <div class="face ft"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.141176);"></div> </div> <div class="face bk"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div> </div> <div class="face-wrapper rt"> <div class="face"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div> </div> </div> <div class="face-wrapper lt"> <div class="face"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div> </div> </div> <div class="face bm"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div> </div> </div> <div class="shape cuboid-8 cub-8"> <div class="face ft"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div> </div> <div class="face bk"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div> </div> <div class="face rt"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div> </div> <div class="face lt"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div> </div> <div class="face bm"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div> </div> <div class="face tp"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div> </div> </div> <div class="shape cuboid-9 cub-9"> <div class="face ft"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div> </div> <div class="face bk"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div> </div> <div class="face rt"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div> </div> <div class="face lt"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div> </div> <div class="face bm"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div> </div> <div class="face tp"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div> </div> </div> <div class="shape cylinder-7 cyl-7"> <div class="face bm"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div> </div> <div class="face tp"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div> </div> <div class="face side s0"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.137255);"></div> </div> <div class="face side s1"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.137255);"></div> </div> <div class="face side s2"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.298039);"></div> </div> <div class="face side s3"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.501961);"></div> </div> <div class="face side s4"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.662745);"></div> </div> <div class="face side s5"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.662745);"></div> </div> <div class="face side s6"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.501961);"></div> </div> <div class="face side s7"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.298039);"></div> </div> </div> <div class="shape cylinder-8 cyl-8"> <div class="face bm"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div> </div> <div class="face tp"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div> </div> <div class="face side s0"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.121569);"></div> </div> <div class="face side s1"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div> </div> <div class="face side s2"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.466667);"></div> </div> <div class="face side s3"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.678431);"></div> </div> <div class="face side s4"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div> </div> <div class="face side s5"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.333333);"></div> </div> </div> <div class="shape cylinder-9 cyl-9"> <div class="face bm"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div> </div> <div class="face tp"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div> </div> <div class="face side s0"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.121569);"></div> </div> <div class="face side s1"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div> </div> <div class="face side s2"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.466667);"></div> </div> <div class="face side s3"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.678431);"></div> </div> <div class="face side s4"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div> </div> <div class="face side s5"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.333333);"></div> </div> </div> <div class="shape cylinder-10 cyl-10"> <div class="face bm"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div> </div> <div class="face tp"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div> </div> <div class="face side s0"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.137255);"></div> </div> <div class="face side s1"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.137255);"></div> </div> <div class="face side s2"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.298039);"></div> </div> <div class="face side s3"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.501961);"></div> </div> <div class="face side s4"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.662745);"></div> </div> <div class="face side s5"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.662745);"></div> </div> <div class="face side s6"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.501961);"></div> </div> <div class="face side s7"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.298039);"></div> </div> </div> <div class="shape prism-12 pri-12"> <div class="face ft"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.0509804);"></div> </div> <div class="face bk"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div> </div> <div class="face-wrapper rt"> <div class="face"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div> </div> </div> <div class="face-wrapper lt"> <div class="face"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div> </div> </div> <div class="face bm"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div> </div> </div> <div class="shape cuboid-10 cub-10"> <div class="face ft"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div> </div> <div class="face bk"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div> </div> <div class="face rt"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div> </div> <div class="face lt"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div> </div> <div class="face bm"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div> </div> <div class="face tp"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div> </div> </div> <div class="shape cylinder-11 cyl-11"> <div class="face bm"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div> </div> <div class="face tp"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div> </div> <div class="face side s0"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.121569);"></div> </div> <div class="face side s1"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div> </div> <div class="face side s2"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.466667);"></div> </div> <div class="face side s3"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.678431);"></div> </div> <div class="face side s4"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div> </div> <div class="face side s5"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.333333);"></div> </div> </div> <div class="shape cylinder-12 cyl-12"> <div class="face bm"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div> </div> <div class="face tp"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div> </div> <div class="face side s0"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.121569);"></div> </div> <div class="face side s1"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div> </div> <div class="face side s2"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.466667);"></div> </div> <div class="face side s3"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.678431);"></div> </div> <div class="face side s4"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div> </div> <div class="face side s5"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.333333);"></div> </div> </div> <div class="shape cuboid-11 cub-11"> <div class="face ft"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div> </div> <div class="face bk"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div> </div> <div class="face rt"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div> </div> <div class="face lt"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div> </div> <div class="face bm"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div> </div> <div class="face tp"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div> </div> </div> <div class="shape cuboid-12 cub-12"> <div class="face ft"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div> </div> <div class="face bk"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div> </div> <div class="face rt"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div> </div> <div class="face lt"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div> </div> <div class="face bm"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div> </div> <div class="face tp"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div> </div> </div> <div class="shape prism-13 pri-13"> <div class="face ft"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.141176);"></div> </div> <div class="face bk"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div> </div> <div class="face-wrapper rt"> <div class="face"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div> </div> </div> <div class="face-wrapper lt"> <div class="face"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div> </div> </div> <div class="face bm"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div> </div> </div> <div class="shape prism-14 pri-14"> <div class="face ft"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.141176);"></div> </div> <div class="face bk"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div> </div> <div class="face-wrapper rt"> <div class="face"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div> </div> </div> <div class="face-wrapper lt"> <div class="face"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div> </div> </div> <div class="face bm"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div> </div> </div> <div class="shape prism-15 pri-15"> <div class="face ft"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.0901961);"></div> </div> <div class="face bk"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div> </div> <div class="face-wrapper rt"> <div class="face"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div> </div> </div> <div class="face-wrapper lt"> <div class="face"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div> </div> </div> <div class="face bm"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div> </div> </div> <div class="shape prism-16 pri-16"> <div class="face ft"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.0901961);"></div> </div> <div class="face bk"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div> </div> <div class="face-wrapper rt"> <div class="face"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div> </div> </div> <div class="face-wrapper lt"> <div class="face"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div> </div> </div> <div class="face bm"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div> </div> </div> <div class="shape prism-17 pri-17"> <div class="face ft"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.0901961);"></div> </div> <div class="face bk"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div> </div> <div class="face-wrapper rt"> <div class="face"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div> </div> </div> <div class="face-wrapper lt"> <div class="face"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div> </div> </div> <div class="face bm"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div> </div> </div> <div class="shape cuboid-13 cub-13"> <div class="face ft"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div> </div> <div class="face bk"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div> </div> <div class="face rt"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div> </div> <div class="face lt"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div> </div> <div class="face bm"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div> </div> <div class="face tp"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div> </div> </div> <div class="shape cuboid-14 cub-14"> <div class="face ft"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div> </div> <div class="face bk"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div> </div> <div class="face rt"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div> </div> <div class="face lt"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div> </div> <div class="face bm"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div> </div> <div class="face tp"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div> </div> </div> <div class="shape cuboid-15 cub-15"> <div class="face ft"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div> </div> <div class="face bk"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div> </div> <div class="face rt"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div> </div> <div class="face lt"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div> </div> <div class="face bm"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div> </div> <div class="face tp"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div> </div> </div> <div class="shape cuboid-16 cub-16"> <div class="face ft"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div> </div> <div class="face bk"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div> </div> <div class="face rt"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div> </div> <div class="face lt"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div> </div> <div class="face bm"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div> </div> <div class="face tp"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div> </div> </div> <div class="shape cuboid-17 cub-17"> <div class="face ft"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div> </div> <div class="face bk"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div> </div> <div class="face rt"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div> </div> <div class="face lt"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div> </div> <div class="face bm"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div> </div> <div class="face tp"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div> </div> </div> <div class="shape cuboid-18 cub-18"> <div class="face ft"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div> </div> <div class="face bk"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div> </div> <div class="face rt"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div> </div> <div class="face lt"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div> </div> <div class="face bm"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div> </div> <div class="face tp"> <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div> </div> </div>
</div><!--SCENE ENDS-->
</div> <!--TRIDIV OR X-WING ENDS-->
<div id="bld" ></div><!--Buildings container-->
</div><!--CONTAINER ENDS-->
</div> <!-- THE CITY ENDS-->
<!--Show off-->
<footer>
<figure id="pec">
<img src="assets/pec_logo.jpg" alt="pec_logo">
<figcaption>
<span>Vikas Bansal</span><br>
PEC University of Technology
</figcaption>
</figure>
<figure id="sna">
<img src="assets/snapower.jpg" alt="SNA POWER | Soft Division">
</figure>
<input type="button" id="stopbtn" onClick="stopEverything()" value="Stop!" style="display:none">
<span id="output1" style="display:none">output1</span>
</footer>
<!--xwingjs uses LEAPJS
gamejs does everything else
-->
<script src="thegame.js"></script>
<script src="xwing.js"></script>
<script src="day-night.js"></script>
<div class="loader">
<h1>Loading...<br>
<pre>
leap motion enabled
css 3d game demo
<pre>
</h1>
<img src='assets/loader.gif'>
</div>
</body>
</html>