-
Notifications
You must be signed in to change notification settings - Fork 6
/
index.html
154 lines (134 loc) · 5.31 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
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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>MazeGame</title>
<meta name="description" content="MazeGame - Fun Trivia Maze Game built on A-frame & Three.js">
<!--Libraries & external scripts Import-->
<script src="libs/aframe.js"></script> <!--Aframe.js(v0.3.0) Library-->
<script src="libs/aframe-extras.js"></script> <!--Aframe-extras.js(v2.6.1) Library-->
<script src="libs/aframe-text-component.min.js"></script> <!--Aframe library used for rendering text-->
<script src="libs/lz-string.min.js"></script> <!--LZ-based compression algorithm for JavaScript-->
<script src="libs/aframe-bmfont-text-component.js"></script> <!--Aframe library used for rendering bitmap font text-->
<script src="src/common.js"></script> <!--JavaScript for the game-->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/aframe-glow-component.js"></script>
</head>
<body>
<!--Anchored VR Design-->
<!--Aframe scene starts here-->
<a-scene fog="type: linear; color: #AAB; near: 0; far:10;" physics id="scene" >
<!--Importing Assets-->
<!--Diegetic UI Elements-->
<a-assets>
<img src="assets/door.png" id="door">
<img src="assets/wall.jpg" id="asset_wall">
<img src="assets/roof.jpg" id="asset_roof">
<img src="assets/ground.jpg" id="asset_ground">
<img src="assets/instruction.jpg" id="asset_instruction">
<img src="assets/reload.png" id="asset_reload">
</a-assets>
<!--Entity to add background noise-->
<a-entity sound="src: url(assets/audio/backgroundnoise.mp3); autoplay: true; loop:true; distanceModel:linear">
</a-entity>
<!--Camera/Player body Entity-->
<a-entity static-body
sound="src: url(assets/audio/bat.mp3); on: collide; volume:0.01;"
velocity="0 0 0"
rotation="0 0 0"
position="0 1.6 -2"
id="camera"
camera=""
kinematic-body
universal-controls>
<!--Entity to create a crosshair-->
<!--Crosshair is a Non-Diegetic UI Element-->
<a-entity cursor="fuse: true; fuseTimeout: 500"
position="0 0 -1"
geometry="primitive: ring; radiusInner: 0.02; radiusOuter: 0.03"
material="color:#20639B; shader: flat">
</a-entity>
<!--Entity for Timer-->
<!--Timer is a Non-Diegetic UI Element-->
<a-entity text="text: Time;fnt:assets/SourceCodePro.fnt;size:.09;height:0.001" material="color:#ff3232" position="-0.1 -0.7 -1" id="board"></a-entity>
<!--Entity for Winner text-->
<a-entity text="text: ;size:0.1;height:0.001" material="color:#f4ff61" position="-0.3 0 -1" id="winner"></a-entity>
</a-entity>
</a-scene>
<!--Aframe scene ends here-->
<!--JavaScript Starts here-->
<script>
// Reload Game Component
AFRAME.registerComponent('on-click', {
init: function () {
this.el.addEventListener('click', function (evt) {
location.reload();
});
}
});
// Instructions Glow Component
AFRAME.registerComponent('on-gaze', {
init: function () {
this.el.addEventListener('mouseenter', function (evt) {
var glow = document.getElementById("instruction");
glow.setAttribute('glow','side: front; scale: 2; color: #e8cd00; c: 0.1; p: 3.5;');
});
this.el.addEventListener('mouseleave', function (evt) {
var glow = document.getElementById("instruction");
glow.setAttribute('glow','enabled:false');
});
}
});
/* Maze formation */
var maze;
// Player body collision with the Door & Winner Text display
var cam = document.getElementById('camera');
cam.addEventListener('collide', function (e) {
if(e.detail.body.el.getAttribute('id')=='price'){
clearInterval(counter);
var winner = document.getElementById('winner');
var attr_text = winner.getAttribute('text');
attr_text.text = "Hurray! You Win!";
winner.setAttribute('text', attr_text);
}
});
var seconds = 0;
var counter;
// Creating a maze array
function init(width,height){
clearInterval(counter);
maze = new Array(parseInt(height));
for (var i = 0; i < maze.length; i++){
maze[i] = [].repeat(0, width);
}
// Randomized path generation
buildPath(maze,[0,0]);
if(typeof QueryString.maze == 'undefined'){
window.location.hash += '&maze='+LZString.compressToBase64(JSON.stringify(maze));
}else{
maze = JSON.parse(LZString.decompressFromBase64(QueryString.maze))
}
paintMaze(maze);
// Timer Function
seconds = 0;
counter = setInterval(function(){
var board = document.getElementById('board');
var attr_text = board.getAttribute('text');
attr_text.text = seconds++;
var sec = attr_text;
board.setAttribute('text',attr_text);
},1000);
}
// Maze Width & Height
var width = QueryString.width;
var height = QueryString.height;
if(typeof width == 'undefined'){
width = 18;
}
if(typeof height == 'undefined'){
height = 14;
}
init(width,height);
</script>
<!--JavaScript ends here-->
</body>
</html>