-
Notifications
You must be signed in to change notification settings - Fork 0
/
main.js
120 lines (102 loc) · 3.27 KB
/
main.js
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
119
120
// Main page, show menu
let buttonStart = document.getElementById('button-start')
let showMenu = 0;
buttonStart.addEventListener('click', function(){
let menu = document.getElementById('menu-bg');
showMenu++;
if(showMenu % 2 != 0){
menu.style.transform = "translateY(0)"
menu.style.opacity = "1"
}
else{
menu.style.transform = "translateY(127px)"
menu.style.opacity = "0"
}
})
// Choose background -> section
let buttonScene1 = document.getElementById('button-scene1')
let buttonScene2 = document.getElementById('button-scene2')
let buttonScene3 = document.getElementById('button-scene3')
let buttonScene4 = document.getElementById('button-scene4')
let scene = document.getElementById('scene')
scene.style.display = "none";
let i;
function changeBg(i){
scene.style.animation = "fadeIn 0.8s linear";
scene.style.display = "block";
scene.style.background = "url(./assets/cover" + i + ".jpg)";
scene.style.backgroundSize = "cover";
}
buttonScene1.addEventListener('click', function(){
i = 1;
changeBg(i);
})
buttonScene2.addEventListener('click', function(){
i = 2;
changeBg(i);
})
buttonScene3.addEventListener('click', function(){
i = 3;
changeBg(i);
})
buttonScene4.addEventListener('click', function(){
i = 4;
changeBg(i);
})
// Each section = each scene
// let section = document.querySelector('section');
scene.addEventListener('click', function(e){
let bullet = document.createElement('span');
bullet.classList.add('bullet'); //Add class="bullet" for span element
let x = e.offsetX;
let y = e.offsetY;
bullet.style.left = x + 'px';
bullet.style.top = y + 'px';
scene.appendChild(bullet);
//Add sound on click
let sound = document.getElementById('shortgun-sound');
sound.play()
//Add random blood imanges
let bloodImages = [
'url("./assets/blood1.png")',
'url("./assets/blood2.png")',
'url("./assets/blood3.png")',
'url("./assets/blood4.png")',
]
//Blood appear on screen
let blood = document.createElement('span');
blood.classList.add('blood');
let bg = bloodImages[Math.floor(Math.random() * bloodImages.length)]; //Rounding integer math random
blood.style.backgroundImage = bg;
blood.style.left = Math.random() * innerWidth + 'px';
blood.style.top = Math.random() *innerHeight + 'px';
scene.appendChild(blood);
//Remove bullet and blood after 4s
setTimeout(function(){
bullet.remove();
blood.remove();
}, 4000)
})
/* Setting box */
let setting = document.getElementById("button-setting");
let dropdown = document.getElementById("drop-down");
let undo = document.getElementById("undo");
let volume = document.getElementById("volume");
let exit = document.getElementById("exit");
// Show dropdown box
dropdown.style.display = "none";
let show = 0;
setting.addEventListener("click", function(){
show++;
if(show % 2 !== 0) {
dropdown.style.animation = "fadeIn 0.4s ease 1"
dropdown.style.display = "block";
}
else dropdown.style.display = "none";
})
// Set function for dropdown box
exit.addEventListener("click", function(){
scene.style.animation = "fadeOut 0.8s linear";
scene.style.display = "none";
dropdown.style.display = "none";
})