drift/index.html at master · abstractstudio/drift · 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
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
<html>
    <head>

        <title>Chincoteague Drift</title>
        <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=0">
        <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet" type="text/css">
        <link rel="stylesheet" type="text/css" href="styles.css">

        <script type="text/javascript" src="drift.min.js"></script>

    </head>
    <body>

        <!-- The canvas for the engine. -->
        <canvas width=500 height=600 id="canvas">HTML5 unavailable</canvas>

        <!-- The description of drift. -->
        <div id="description">
            <p style="clear: both;">
                <b>About</b><br>
                Chincoteague Drift is a skill-based boating game where you must use the slow,
                trundling drift of the research barge to dodge the dangerous obstacles. See how far you can drift!
                <a href="more.html">More &rarr;</a><br>
            </p>
            <p>
                <b>Gameplay</b><br>
                Use <b>A</b> or <b>&larr;</b> to turn left and <b>D</b> or <b>&rarr;</b> to turn right. <b>W</b> or <b>&uarr;</b> boost the boat.
                Bonuses are awarded for narrowly skirting around obstacle.
            </p>
            <p>
                <b>Features</b><br>
                Realistic drift physics&nbsp;&bull;
                Particle effects&nbsp;&bull;
                Boost balance&nbsp;&bull;
                Skill detection&nbsp;&bull;
                Impossibility prevention&nbsp;&bull;
                Better pause&nbsp;&bull;
                Firefox support&nbsp;&bull;
                Better webpage layout&nbsp;&bull;
                Running in the 90's&nbsp;&bull;
                I love you&nbsp;&bull;
                Pew pew<br>
            </p>
            <p>
                <b>Credits</b><br>
                Art by Dylan Kim and Noah Kim<br>
                Developed for the Abstract Engine<br>
                By Noah Kim and Arman Siddique as <a href="https://github.com/abstractstudio">Abstract Studio</a><br>
            </p>
        </div>

        <!-- A little button. -->
        <div id="button" onclick="javascript: toggleDescription();">
            &darr;
        </div>

        <!-- Pretty formatting. -->
        <script type="text/javascript">
            var hidden = false;
            var description = document.getElementById("description");
            var button = document.getElementById("button");

            function hideDescription() {
                hidden = true;
                description.style.transform = "";
                button.style.transform = "";
            }

            function showDescription() {
                hidden = false;
                description.style.transform = "translate(0, -100%)";
                button.style.transform = "rotate(180deg)";
            }

            function toggleDescription() {
                if (hidden) showDescription();
                else hideDescription();
            }

            document.addEventListener("mousewheel", function(e) {
                if (e.wheelDelta > 0) hideDescription();
                else if (e.wheelDelta < 0) showDescription();
            });
        </script>

    </body>
</html>