fatass-horse/index.html at main · nexpid/fatass-horse · 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
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
<!DOCTYPE html>
<html lang="en" class="reduce-motion">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fat Horse</title>
    <style>
        body {
            background-color: #323133;
            color: white;
        }
    </style>
</head>

<body>
    <h1>Hello!</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam tincidunt nunc sit amet nisl semper, et aliquam nisi
        sollicitudin. Donec vestibulum leo non nunc hendrerit, at auctor nisi ornare. Nullam laoreet suscipit laoreet.
        Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nullam pellentesque
        diam vel velit dictum, vitae auctor leo egestas. Ut ornare metus lectus, in dignissim dui vulputate ac. Ut
        fringilla velit quis sem sagittis sollicitudin. Vestibulum dictum risus ut nunc rhoncus sollicitudin. Nulla
        pulvinar convallis vulputate. Mauris a augue et nulla hendrerit hendrerit et non ipsum. Cras non quam at diam
        ullamcorper pharetra. Nulla dictum dolor eget mauris semper vestibulum. Maecenas aliquam a lorem et feugiat.
        Phasellus suscipit ante lacus, a blandit metus egestas non. Phasellus condimentum volutpat arcu ut hendrerit.
        Vivamus maximus neque vel lorem pulvinar consequat.</p>

    <p>Nunc eu mauris justo. Nunc lacinia purus rhoncus mi dapibus, eu tincidunt mauris vehicula. Aliquam erat volutpat.
        Duis imperdiet sem cursus semper pulvinar. Donec laoreet risus nec orci laoreet mollis vitae et orci. Praesent
        interdum hendrerit lorem, vel iaculis tellus tincidunt a. Duis in nibh at ex dapibus sollicitudin non ut velit.
        Integer maximus interdum mi, eget convallis ligula mattis sed. Aliquam lectus quam, finibus ac erat vel,
        pulvinar aliquam quam. Nam fermentum ac enim sit amet convallis. In mollis cursus pretium. In eget magna sit
        amet enim laoreet molestie non non urna. Nulla a ipsum dignissim, laoreet felis quis, accumsan tellus. Orci
        varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc nec justo nisl.</p>

    <p>Cras vitae vehicula leo, vel mattis lacus. Praesent tempus efficitur sollicitudin. Quisque ut felis eu magna
        euismod rhoncus aliquet malesuada arcu. Sed rhoncus ut nunc vel pulvinar. Vivamus quis consectetur mauris.
        Curabitur auctor rhoncus ligula ac venenatis. Praesent vitae mi diam. Aenean fermentum ipsum et justo pretium
        finibus. Sed nec quam lacus.</p>

    <p>Praesent sollicitudin nisl risus, vulputate congue erat porta quis. Aenean facilisis, mauris id ullamcorper
        volutpat, turpis lectus viverra ante, eu placerat metus arcu at nisl. Suspendisse potenti. Duis gravida pulvinar
        nunc vitae vehicula. Fusce viverra auctor nulla eu convallis. Donec sit amet eleifend orci. Sed in volutpat
        mauris. Nunc eu varius justo, eu egestas arcu.</p>

    <p>Ut iaculis venenatis interdum. Donec eleifend non neque vel ullamcorper. Integer gravida urna euismod, mattis
        magna quis, condimentum tellus. Curabitur nisi enim, aliquam non blandit ac, ornare in felis. Sed egestas
        maximus velit, quis tincidunt arcu egestas eu. Maecenas at eros ac elit iaculis commodo in vel erat. Donec
        pharetra nibh id dolor ultricies auctor. Integer et cursus urna. Phasellus porttitor magna vitae cursus
        fermentum. Donec risus dolor, pellentesque et aliquet sit amet, dignissim sit amet neque. Donec ornare blandit
        diam nec pulvinar.</p>
    <pre><span id="debug"></span></pre>
    <div>
        <input type="range" name="speed" id="speed" min="10" max="500" value="30" step="5" />
        <label for="speed">Speed</label>
    </div>
    <div>
        <input type="range" name="fps" id="fps" min="2" max="120" value="24" step="2" />
        <label for="fps">Framerate</label>
    </div>
    <div>
        <input type="range" name="size" id="size" min="10" max="500" value="120" step="5" />
        <label for="size">Size</label>
    </div>
    <div>
        <input type="checkbox" name="shake" id="shake">
        <label for="shake">Shake</label>
    </div>
    <div>
        <input type="checkbox" name="fade" id="fade" checked>
        <label for="fade">Fade</label>
    </div>
    <div>
        <input type="checkbox" name="freeroam" id="freeroam" checked>
        <label for="freeroam">Freeroam</label>
    </div>
    <div id="draw" aria-hidden="true"
        style="position: fixed; background-color: red; width: 8px; height: 8px; z-index: 2147483647; pointer-events: none; border-radius: 4px; transform: translate(-50%, -50%)">
    </div>

    <script src="./horse.js"></script>
    <script>
        let pos = { x: 0, y: 0 };

        function update() {
            document.querySelector("label[for=speed]").textContent = `Speed: ${speed.value}`;
            document.querySelector("label[for=fps]").textContent = `Framerate: ${fps.value}`;
            document.querySelector("label[for=size]").textContent = `Size: ${size.value}`;

            pos = fathorse({
                speed: speed.value,
                fps: fps.value,
                size: size.value,
                fade: fade.checked,
                freeroam: freeroam.checked,
                shake: shake.checked,
            });
            document.getElementById("fathorse").style.backgroundImage = 'url("./sheet.png")';
        }

        update();
        speed.addEventListener("change", update);
        fps.addEventListener("change", update);
        size.addEventListener("change", update);
        shake.addEventListener("change", update);
        freeroam.addEventListener("change", update);
        fade.addEventListener("change", update);

        function refresh() {
            draw.style.left = `${pos.x}px`;
            draw.style.top = `${pos.y}px`;
            requestAnimationFrame(refresh);
        }
        requestAnimationFrame(refresh);
    </script>
</body>

</html>