HTML5-game/start.html at master · Deepak7-new/HTML5-game · 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
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>Game Canvas</title>
    <iframe width="0" height="0" frameborder="0" allowfullscreen></iframe>
</head>
<style>
    html {
        height: 100%
    }

    body {
        height: 100%;
        background: url(assets/blur.jpg) center center no-repeat;
        background-size: cover;
        display: flex;
        justify-content: center;
        align-items: center;
        font-family: sans-serif;
        margin: 0;
        overflow: hidden;
    }

    #brand {
        text-align: center;
        cursor: pointer;
    }

    #brand img {
        display: block;
        width: 50vw;
        max-width: 500px;
        height: auto;
        transition: 0.2s
    }

    #brand a {
        display: block;
        font-family: 'Passion One';
        font-size: 3em;
        color: #333;
        font-weight: 800;
        text-decoration: none;
        background: rgba(0, 0, 40, 0);
        padding: 5px 15px;
        transition: 0.4s
    }

    #brand:hover a {
        color: rgba(200, 80, 50, 1);
        text-shadow: 2px 5px 0 rgba(0, 0, 0, 0.6)
    }

    audio {
        position: absolute;
        top: 307px;
        left: 160px;
    }
</style>

<body>
    <audio id="audio" autoplay src="assets\sound.mp3">
    </audio>
    <div id="brand">
        <img src="assets\L.png">
        <a href="game.html">PRESS START</a>
    </div>
    <script>

        s = document.getElementById("audio");
        function playBackgroundMusic() {
            s.play();
        }
        setInterval(playBackgroundMusic, 100);
        let start = document.querySelector('#brand');
        let ex = 10;
        function swing(element) {
            function update(time) {
                const x = Math.sin(time / 1231) * ex;
                const y = Math.sin(time / 1458) * ex;
                element.style.transform = [
                    `rotateX(${x}deg)`,
                    `rotateY(${y}deg)`
                ].join(' ');

                requestAnimationFrame(update);
            }
            update(0);
        }
        swing(start);

        let start_button = start.querySelector('a');
        let og_color = start_button.style.color;
        let inter = 0;

        start.addEventListener('mouseover', (e) => {
            ex = 20;
            inter = setInterval(() => {
                start_button.style.color = '#' + Math.floor(Math.random() * 16777215).toString(16);
            }, 1000);
        });
        start.addEventListener('mouseout', (e) => {
            ex = 10;
            clearInterval(inter);
            start_button.style.color = og_color;
        });

    </script>
</body>

</html>