Piano-Game/index.js at main · Mahred1/Piano-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
114
115
116
var black = document.querySelectorAll(".black-key");

var white= document.querySelectorAll(".white-key");

black.forEach(element =>
    element.addEventListener("click",function(){
        element.classList.add("pressed-w");
        setTimeout(() => {
            element.classList.remove("pressed-w");
        }, 100);
    })
)
white.forEach(element =>
    element.addEventListener("click",function(){
        element.classList.add("pressed");
        setTimeout(() => {
            element.classList.remove("pressed");
        }, 100);
    })
)
black.forEach(element => {
    switch (element.classList[1]) {
        case "Do":
            element.addEventListener("click",function(){
                var audio = new Audio(element.classList[1]+".mp3");
                audio.play();
            })
            break;
        case "Mi":
            element.addEventListener("click",function(){
                var audio = new Audio(element.classList[1]+".mp3");
                audio.play();
            })
            break;
        case "So":
            element.addEventListener("click",function(){
                var audio = new Audio(element.classList[1]+".mp3");
                audio.play();
            })
            break;
        case "Ti":
            element.addEventListener("click",function(){
                var audio = new Audio(element.classList[1]+".mp3");
                audio.play();
            })
            break;

        default:
            break;
    }
});
white.forEach(element => {
    switch (element.classList[1]) {
        case "Re":
            element.addEventListener("click",function(){
                var audio = new Audio(element.classList[1]+".mp3");
                audio.play();
            })
            break;
        case "Fa":
            element.addEventListener("click",function(){
                var audio = new Audio(element.classList[1]+".mp3");
                audio.play();
            })
            break;
        case "La":
            element.addEventListener("click",function(){
                var audio = new Audio(element.classList[1]+".mp3");
                audio.play();
            })
            break;
        case "Dow":
            element.addEventListener("click",function(){
                var audio = new Audio("Do.mp3");
                audio.play();
            })
            break;

        default:
            break;
    }
});
document.querySelector("body").addEventListener("keypress",function(event){
    switch (event.key) {
        case "a":
            document.querySelector(".Do").click();
            break;
        case "s":
            document.querySelector(".Re").click();
            break;
        case "d":
            document.querySelector(".Mi").click();
            break;
        case "f":
            document.querySelector(".Fa").click();
            break;
        case "j":
            document.querySelector(".So").click();
            break;
        case "k":
            document.querySelector(".La").click();
            break;
        case "l":
            document.querySelector(".Ti").click();
            break;
        case ";":
            document.querySelector(".Dow").click();
            break;
        case " ":

            break;

        default:
            break;
    }
})