generated from mrcjbradley/js_project_skeleton
-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
110 lines (100 loc) · 4.6 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" href="./dist/main.css" />
<!-- <link rel="stylesheet" type='text/css' href="./src/styles/all.scss" /> -->
<title>Project Park</title>
<meta property="og:title" content="Project Park" />
<meta property="og:image" content="Project_pic_Javascript.png" />
<meta property="og:description" content="Project Park is an immersive, 3-Dimentional, open world game made from Three.js with Cannon-es as its physics engine. Users can play with props while exploring the author's carrear achivements and resume" />
<meta property="og:url" content="https://github.com/jas-singh-code/ProjectPark2" />
</head>
<body>
<script type="text/javascript" src="js/three.js"></script>
<div id='game'>
<div id='message' class='hidden'>Please Click the Full Screen button twice to Enable it
<div class='cancle'>x</div>
</div>
<div id='score-holder'>Score</div>
<div id='view-fullscreen' class="view-fullscreen">Full Screen</div>
<div id='enable-physics' class="enable-physics">View Physics</div>
<div id='welcome-menu' class='display'>
<div id="cancle">x</div>
<!-- SLIDE 1 -->
<div id='slide-1' class='display'>
<h2 class='heading'>Welcome to Project Park!</h2>
<div>Project Park is an immersive, 3-dimensional world where users can view the author's projects, resume, accomplishments, and much more.</div>
<div class='ready'>Are you ready to interact?</div>
<div class='welcome-actions'>
<div id='begin-action'>Begin Tutorial</div>
<div id='skip-action'>Skip To Game</div>
</div>
</div>
<!-- SLIDE 2 -->
<div id='slide-2' class="hidden">
<h2 class='heading'>Welcome to Project Park!</h2>
<div>You will have your car to rome around the area as you please. Here are the controls:</div>
<div class="game-controls">
<div class='keyboard'>
<img src='keyboard.png' alt='keyboard' class="keyboard-img">
<div class='Forward'>Forward</div>
<div class='Backward'>Backward</div>
<div class='Left'>Left Turn</div>
<div class='Right'>Right Turn</div>
</div>
<div class='w-img'>
<div class='w-key-cap'>Bird's Eye View</div>
<img src='Wkey.png' alt='Wkey' class="W-key">
</div>
<div class='shift'>
<div class="shift-logo">Shift</div>
<div class="shift-cap">Speed Boost</div>
</div>
</div>
<div class="slide-2-actions">
<div id="next">Next ></div>
</div>
<div></div>
</div>
<!-- SLIDE 3 -->
<div id='slide-3' class="hidden slide-3">
<h2 class='heading'>Welcome to Project Park!</h2>
<div class="slide-3-title">Goals:</div>
<div>The arrow hovering on top of your car will always point to the next objective of the game. You must push that object to the goal post to increase your score and see the objects explode!</div>
<div class="game-controls-2">
<img src='score.png' alt='score' class='score-img'>
<img src='arrow_crop.png' alt='arrow' class='arrow-img'>
<img src='arrow_and_goal.png' alt='arrow-goal' class='arrow-goal-img'>
</div>
<div class="slide-3-actions">
<div id="next2">Next ></div>
</div>
<div></div>
</div>
<div id="slide-4" class="hidden slide-4">
<h2 class='heading'>Welcome to Project Park!</h2>
<!-- <div class="slide-3-title">Action Buttons and Infinite game:</div> -->
<div class="game-controls-4">
<div class="slide-4-description">Use the Full Screen button on the top right corner of your screen for best graphics</div>
<img src="full_screen_btn.png" alt='full screen button' class="fullscreen-img">
</div>
<div class="slide-3-actions">
<div id='next3'>Start Game</div>
</div>
</div>
</div>
<canvas id="scene-canvas">
</canvas>
</div>
<script src="./dist/main.js"></script>
<!-- <script>
document.addEventListener("DOMContentLoaded", function () {
const game = new Game();
window.game = game;//For debugging only
});
</script> -->
</body>
</html>