青いベンチ/サスケ スロットアプリ
青いベンチ/サスケ
以下が実装例です。
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>青いベンチ/サスケ スロットアプリ</title>
<style>
body {
font-size: 20px;
margin: 0;
padding: 0;
text-align: center;
background-color: #fafafa;
}
#slot-text {
margin-top: 50px;
}
button {
padding: 10px 20px;
border-radius: 5px;
background-color: #3498db;
color: #fff;
border: none;
font-size: 18px;
cursor: pointer;
margin: 30px 0;
}
button:hover {
background-color: #2980b9;
}
</style>
</head>
<body>
<h1>青いベンチ/サスケ スロットアプリ</h1>
<p id="slot-text">青いベンチ/サスケ</p>
<button id="spin-btn">並べ替える</button>
<script>
const slotChars = ['青', 'い', 'ベ', 'ン', 'チ', '/', 'サ', 'ス', 'ケ'];
const slotText = document.getElementById('slot-text');
document.getElementById('spin-btn').addEventListener('click', () => {
// 一文字一文字をスロットに変換する
const textArr = slotText.textContent.split('');
const slots = textArr.map((char) => {
if (!slotChars.includes(char)) {
return char;
}
return [`[ ${slotChars[Math.floor(Math.random()*slotChars.length)]} ]`, char];
}).flat();
// スロットを表示する
slotText.textContent = '';
slots.forEach((char) => {
slotText.innerHTML += char;
});
});
</script>
</body>
</html>
```
並べ替えるボタンをクリックすると、それぞれの文字がスロットになります。ランダムでスロットが回り、最終的に表示される文字が変わります。
「青いベンチ」と「サスケ」という文字列は、どちらも日本の有名なジョークの一つです。スロットを回すためには、そのジョークに出てくる文字が必要なので採用しました。