-
Notifications
You must be signed in to change notification settings - Fork 0
/
hello.html
151 lines (125 loc) · 5.26 KB
/
hello.html
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
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
<!DOCTYPE html>
<html>
<head>
<title>슬롯 머신 이미지 뽑기</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f2f2f2;
}
.container {
text-align: center;
margin-top: 200px;
}
h1 {
color: #333333;
}
.image-container {
display: flex;
justify-content: center;
margin-top: 20px;
}
.slot-image {
max-width: 300px;
max-height: 300px;
margin: 10px;
position: relative;
transform: scale(1);
transition: transform 0.5s;
}
#file-input {
display: none;
}
#file-label, #spin-button {
display: inline-block;
padding: 10px 20px;
background-color: #333333;
color: #ffffff;
cursor: pointer;
}
.slot-image.show-effect {
transform: scale(1.2);
}
</style>
</head>
<body>
<div class="container">
<h1>슬롯 머신 이미지 뽑기</h1>
<div class="image-container">
<!-- 이미지를 추가하기 위한 버튼과 input 필드 -->
<label id="file-label" for="file-input">이미지 추가하기</label>
<input id="file-input" type="file" accept="image/*" multiple>
</div>
<div class="image-container" id="preview-container">
<!-- 추가된 이미지들을 미리 볼 수 있는 영역 -->
</div>
<div class="image-container">
<!-- 슬롯 머신 동작을 제어하는 버튼 -->
<button id="spin-button">이미지 뽑기</button>
</div>
<div class="image-container" id="result-container">
<!-- 슬롯 머신 결과를 보여줄 영역 -->
</div>
</div>
<script>
const fileInput = document.getElementById('file-input');
const previewContainer = document.getElementById('preview-container');
const spinButton = document.getElementById('spin-button');
const resultContainer = document.getElementById('result-container');
fileInput.addEventListener('change', handleFileSelect);
spinButton.addEventListener('click', handleSpin);
let images = []; // 추가된 이미지들을 저장하는 배열
function handleFileSelect(event) {
const files = event.target.files;
for (let i = 0; i < files.length; i++) {
const file = files[i];
const reader = new FileReader();
reader.onload = function (event) {
const imageUrl = event.target.result;
const imageElement = document.createElement('img');
imageElement.classList.add('slot-image');
imageElement.src = imageUrl;
previewContainer.appendChild(imageElement);
images.push(imageUrl); // 이미지를 배열에 저장
};
reader.readAsDataURL(file);
}
}
function handleSpin() {
if (images.length > 0) {
const spinDuration = 3000; // 슬롯 머신 동작 시간 (3초)
const interval = 100; // 이미지 변경 간격 (0.1초)
let spins = spinDuration / interval; // 동작 횟수
let currentImageIndex = 0; // 현재 이미지 인덱스
const spinInterval = setInterval(() => {
// 이미지 변경
resultContainer.innerHTML = '';
const imageElement = document.createElement('img');
imageElement.classList.add('slot-image');
imageElement.src = images[currentImageIndex];
resultContainer.appendChild(imageElement);
currentImageIndex = (currentImageIndex + 1) % images.length; // 다음 이미지 인덱스
spins--;
if (spins === 0) {
clearInterval(spinInterval); // 슬롯 머신 동작 종료
// 랜덤 이미지 뽑기
const randomIndex = Math.floor(Math.random() * images.length);
resultContainer.innerHTML = '';
const resultImageElement = document.createElement('img');
resultImageElement.classList.add('slot-image');
resultImageElement.src = images[randomIndex];
resultContainer.appendChild(resultImageElement);
// 이미지 크기 변환 효과
setTimeout(() => {
resultImageElement.classList.add('show-effect');
}, 100); // 효과가 잘 보이도록 약간의 딜레이 추가
setTimeout(() => {
resultImageElement.classList.remove('show-effect');
}, 2000); // 2초 후에 이미지 크기 변환 효과 제거
}
}, interval);
}
}
</script>
</body>
</html>