-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
52 lines (44 loc) · 2.02 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
<!-- Graphics Example Code.
index.html - The web page document containing the canvas (drawing surface). It launches your JavaScript files.
-->
<!DOCTYPE html>
<html lang="En">
<head>
<meta charset="UTF-8"/>
<link href="assets/fav.ico" rel="icon">
<link href="https://fonts.googleapis.com/css?family=Press+Start+2P" rel="stylesheet">
<title>Guitar Hero</title>
</head>
<link href="https://fonts.googleapis.com/css?family=Press+Start+2P" rel="stylesheet">
<body style="background: Black; margin: 0px">
<link rel="stylesheet" type="text/css" href="style.css">
<!-- Begin typing your web page here. -->
<!-- The following code embeds a WebGL canvas panel, loads certain scene(s), and displays panel(s) of their controls.-->
<div class="canvas-widget" id="main-canvas"></div>
<div id="title">Welcome to Guitar Hero!</div>
<div id="subtitle">Back in Black</div>
<div id="controls">Controls:</div>
<div id="green">'A' - Green</div>
<div id="red">'S' - Red</div>
<div id="yellow">'D' - Yellow</div>
<div id="blue">'F' - Blue</div>
<div id="rock">ROCK ON!</div>
<button id="start-game" class="button" style="horizontal-align:middle">Start Game</button>
<script type=module>
import {Main_Scene, Additional_Scenes, Canvas_Widget} from './main-scene.js';
// ** THE ENTRY POINT OF YOUR WHOLE PROGRAM STARTS HERE **
// Indicate which element on the page you want the Canvas_Widget to replace with a 3D WebGL area:
document.getElementById("start-game").addEventListener("click", startgame, false);
function startgame(){
const element_to_replace = document.querySelector("#main-canvas");
const removeButton = document.getElementById("start-game");
removeButton.remove();
// Import the file that defines a scene.
const scenes = [Main_Scene, ...Additional_Scenes].map(scene => new scene());
// This line creates your scene.
new Canvas_Widget(element_to_replace, scenes, {make_controls: true, show_explanation: false,
make_editor: false, make_code_nav: false});
}
</script>
</body>
</html>