MechaPirates/index.html at main · Supernova0417/MechaPirates · 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 lang="ko">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="styles-index.css">
        <script src="sounds/audioContext.js"></script>
    </head>
    <body>
        <div class="container">
            <div class="genre-list" id="genreList">
                <button class="genre-item" data-href='game-pikachu-hwang.html'>
                    <div class="genre-image-container">
                        <img src="images/games/pikachu.jpg" alt="피카츄 배구" class="button-image">
                    </div>
                    <div class="genre-text">피카츄 배구</div>
                </button>
                <button class="genre-item" data-href='game-tetris.html'>
                    <div class="genre-image-container">
                        <img src="images/games/tetris.jpg" alt="테트리스" class="button-image">
                    </div>
                    <div class="genre-text">테트리스</div>
                </button>
                <button class="genre-item" data-href='game-geometry-dash.html'>
                    <div class="genre-image-container">
                        <img src="images/games/square.jpg" alt="네모 뛰기" class="button-image">
                    </div>
                    <div class="genre-text">네모 뛰기</div>
                </button>
                <button class="genre-item" data-href='game-shooting.html'>
                    <div class="genre-image-container">
                        <img src="images/games/shoot.jpg" alt="사격 게임" class="button-image">
                    </div>
                    <div class="genre-text">사격 게임</div>
                </button>
            </div>
        </div>
        <div class="start-button-container">
            <img src="whitebutton.jpg" alt="Start Button" class="white-button">
            <div class="start-text">시작하기</div>
        </div>

        <script>
            document.addEventListener('DOMContentLoaded', function() {
    const buttons = document.querySelectorAll('.genre-item');
    let currentIndex = 0;

    // 첫 번째 버튼에 초기 포커스
    buttons[currentIndex].focus();

    document.addEventListener('keydown', function(e) {
        switch (e.key) {
            case 'ArrowRight':
                e.preventDefault();
                if (currentIndex % 2 === 0 && currentIndex + 1 < buttons.length) {
                    currentIndex++;
                }
                break;

            case 'ArrowLeft':
                e.preventDefault();
                if (currentIndex % 2 !== 0) {
                    currentIndex--;
                }
                break;

            case 'ArrowDown':
                e.preventDefault();
                if (currentIndex + 2 < buttons.length) {
                    currentIndex += 2;
                }
                break;

            case 'ArrowUp':
                e.preventDefault();
                if (currentIndex - 2 >= 0) {
                    currentIndex -= 2;
                }
                break;

            case 'Enter':
                e.preventDefault();
                const href = buttons[currentIndex].getAttribute('data-href');
                if (href) {
                    window.location.href = href;
                }
                break;
        }
        buttons[currentIndex].focus();
    });

    // 마우스 클릭 이벤트도 유지
    buttons.forEach(button => {
        button.addEventListener('click', function() {
            const href = this.getAttribute('data-href');
            if (href) {
                window.location.href = href;
            }
        });

        // 키보드 포커스 시 테두리 강조 효과 추가
        button.addEventListener('focus', function() {
            this.classList.add('highlight-border');
        });
        button.addEventListener('blur', function() {
            this.classList.remove('highlight-border');
        });
    });
});
            </script>
    </body>
</html>