🎯 ルーレット設定 🎯
🌀
```html
<!DOCTYPE html>
<html>
<head>
<style>
/* Animation Styles */
@keyframes bounce {
0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
40% { transform: translateY(-10px); }
60% { transform: translateY(-5px); }
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
@keyframes shake {
0% { transform: translate(1px, 1px) rotate(0deg); }
10% { transform: translate(-1px, -2px) rotate(-1deg); }
20% { transform: translate(-3px, 0px) rotate(1deg); }
30% { transform: translate(3px, 2px) rotate(0deg); }
40% { transform: translate(1px, -1px) rotate(1deg); }
50% { transform: translate(-1px, 2px) rotate(-1deg); }
60% { transform: translate(-3px, 1px) rotate(0deg); }
70% { transform: translate(3px, 1px) rotate(-1deg); }
80% { transform: translate(-1px, -1px) rotate(1deg); }
90% { transform: translate(1px, 2px) rotate(0deg); }
100% { transform: translate(1px, -2px) rotate(-1deg); }
}
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.1); }
100% { transform: scale(1); }
}
@keyframes swing {
0% { transform: rotate(0deg); }
25% { transform: rotate(15deg); }
50% { transform: rotate(-15deg); }
75% { transform: rotate(10deg); }
100% { transform: rotate(0deg); }
}
/* Spinner Animation */
.spinning {
animation: spin 2s linear infinite;
}
/* Hide elements initially */
.hidden {
display: none;
}
</style>
</head>
<body>
<div id="container" style="width: 100%; max-width:400px; height: 100vh; max-height:400px; margin:0 auto; overflow:hidden; position:relative; font-family: sans-serif; background-color: #f0f8ff;">
<!-- Start Screen -->
<div id="start-screen" style="display: flex; justify-content: center; align-items: center; height:100%;">
<input type="button" id="start-button" value="🌟 スタート！🌟" style="width:150px; height:50px; font-size:18px; cursor:pointer; animation: bounce 2s infinite;">
</div>
<!-- Settings Screen -->
<div id="settings-screen" class="hidden" style="display: flex; flex-direction: column; align-items: center; padding:20px; animation: fadeIn 1s;">
<div style="font-size:22px; color:black; margin-bottom:10px;">🎯 ルーレット設定 🎯</div>
<div style="margin:5px; width:100%; text-align: left;">
<label><input type="checkbox" id="show-prefectures" checked> 🗾 47都道府県名を表示</label>
</div>
<div style="margin:5px; width:100%; text-align: left;">
<label><input type="checkbox" id="hide-prefectures"> ⛔️ ルーレット時都道府県名を非表示</label>
</div>
<div style="margin:5px; width:100%; text-align: left;">
<label><input type="checkbox" id="add-all-prefectures"> ➕ 全都道府県をルーレットに追加</label>
</div>
<div style="margin:5px; width:100%; text-align: left;">
<label><input type="checkbox" id="show-result" checked> 📊 ルーレットの結果を下に表示！</label>
</div>
<div style="margin:5px; width:100%; text-align: left;">
<label>⏱️ ルーレットの秒数を変更：
<select id="spin-duration" style="margin-left:5px; padding:2px;">
<option value="1000">1秒</option>
<option value="3000" selected>3秒</option>
<option value="5000">5秒</option>
<option value="7000">7秒</option>
<option value="10000">10秒</option>
<option value="15000">15秒</option>
</select>
</label>
</div>
<input type="button" id="settings-complete" value="✅ 設定完了！" style="width:120px; height:40px; font-size:16px; cursor:pointer; background-color:gray; color:white; margin-top:20px; animation: pulse 2s infinite;">
</div>
<!-- Roulette Screen -->
<div id="roulette-screen" class="hidden" style="display: flex; flex-direction: column; align-items: center; padding:10px; animation: fadeIn 1s;">
<div id="roulette-wheel" style="width:200px; height:200px; border-radius:50%; border:5px solid #000; position:relative; background:conic-gradient(
red, orange, yellow, green, blue, indigo, violet, red
); display: flex; justify-content: center; align-items: center; font-size:24px; color:black;">
🌀
</div>
<input type="button" id="spin-button" value="🎲 Spin! 🎲" style="width:100px; height:50px; font-size:18px; cursor:pointer; background-color:red; color:white; margin-top:20px; animation: swing 2s infinite;">
<div id="result" style="margin-top:20px; font-size:20px; color:yellow;"></div>
</div>
</div>
<script>
// Prefectures List
const prefectures = ["北海道","青森県","岩手県","宮城県","秋田県","山形県","福島県","茨城県","栃木県","群馬県","埼玉県","千葉県","東京都","神奈川県","新潟県","富山県","石川県","福井県","山梨県","長野県","岐阜県","静岡県","愛知県","三重県","滋賀県","京都府","大阪府","兵庫県","奈良県","和歌山県","鳥取県","島根県","岡山県","広島県","山口県","徳島県","香川県","愛媛県","高知県","福岡県","佐賀県","長崎県","熊本県","大分県","宮崎県","鹿児島県","沖縄県"];
const container = document.getElementById('container');
const startScreen = document.getElementById('start-screen');
const startButton = document.getElementById('start-button');
const settingsScreen = document.getElementById('settings-screen');
const settingsComplete = document.getElementById('settings-complete');
const rouletteScreen = document.getElementById('roulette-screen');
const spinButton = document.getElementById('spin-button');
const rouletteWheel = document.getElementById('roulette-wheel');
const resultDiv = document.getElementById('result');
let rouletteOptions = {
showPrefectures: true,
hidePrefectures: false,
addAllPrefectures: false,
showResult: true,
spinDuration: 3000
};
let currentPrefectures = [...prefectures];
// Start Button Click
startButton.addEventListener('click', () => {
startScreen.classList.add('hidden');
settingsScreen.classList.remove('hidden');
});
// Settings Complete Click
settingsComplete.addEventListener('click', () => {
// Get settings values
rouletteOptions.showPrefectures = document.getElementById('show-prefectures').checked;
rouletteOptions.hidePrefectures = document.getElementById('hide-prefectures').checked;
rouletteOptions.addAllPrefectures = document.getElementById('add-all-prefectures').checked;
rouletteOptions.showResult = document.getElementById('show-result').checked;
rouletteOptions.spinDuration = parseInt(document.getElementById('spin-duration').value);
// Update prefectures list if adding all
currentPrefectures = [...prefectures];
if (rouletteOptions.addAllPrefectures) {
// Example: Adding duplicates or additional logic
// Here, we'll just add Hokkaido and Okinawa again between their original positions
currentPrefectures.splice(1, 0, "北海道🌟");
currentPrefectures.splice(currentPrefectures.length -1, 0, "沖縄県🌴");
}
settingsScreen.classList.add('hidden');
rouletteScreen.classList.remove('hidden');
});
// Spin Button Click
spinButton.addEventListener('click', () => {
if (rouletteWheel.classList.contains('spinning')) return; // Prevent multiple spins
// Start spinning animation
rouletteWheel.classList.add('spinning');
// Play sound - simple beep using Web Audio API
const audioCtx = new (window.AudioContext || window.webkitAudioContext)();
const oscillator = audioCtx.createOscillator();
oscillator.type = 'sine';
oscillator.frequency.setValueAtTime(440, audioCtx.currentTime);
oscillator.connect(audioCtx.destination);
oscillator.start();
// Stop spinning after duration
setTimeout(() => {
rouletteWheel.classList.remove('spinning');
oscillator.stop();
// Select a random prefecture
const selected = currentPrefectures[Math.floor(Math.random() * currentPrefectures.length)];
if (rouletteOptions.showResult) {
resultDiv.textContent = `🎉 結果: ${selected} 🎉`;
resultDiv.style.animation = 'shake 0.5s';
setTimeout(() => {
resultDiv.style.animation = '';
}, 500);
}
}, rouletteOptions.spinDuration);
});
</script>
</body>
</html>
```