CS174A-Project/index.html at main · jonathan-c-lai/CS174A-Project · GitHub

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
<!-- 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">
    <title>Tiny Graphics</title>
</head>
<!-- Begin typing your web page here. -->
<body style="background: White">
<!-- 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 style="color:white; font-family: 'Comic Sans MS', 'Comic Sans', serif; font-size:22px">
    <div style="position: absolute; left: 18%; top:30px;"> Score:
        <span id="score"></span>
    </div>
    <div style="position: absolute; right: 18%; top:30px;">
        <span> Lives:

        </span>
        <span id="health">

        </span>
        <!--        <span id="health" style="height: 30px; color: rgb(255, 0, 0);"> </span> <img src="assets/heart.png" style="background-color: transparent;"> <img src="assets/heart.png"> <img src="assets/heart.png">-->
    </div>
</div>

<!--<div style="position: absolute; left: 25px; top:15px">-->
<!--    "Score: "-->
<!--    <span id="score"></span>-->
<!--</div>-->

<script type=module>
    // ********************* 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:
    const element_to_replace = document.querySelector("#main-canvas");
    import {Main_Scene, Additional_Scenes, Canvas_Widget} from './main-scene.js';
    // 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);
</script>

</body>
</html>