<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>スロットゲーム</title>
<style>
body {
background-color: #f2f2f2;
font-family: Arial, sans-serif;
font-size: 16px;
line-height: 1.5;
color: #333;
text-align: center;
margin: 0;
padding: 0;
}
h1 {
font-size: 24px;
font-weight: bold;
margin-top: 30px;
margin-bottom: 10px;
}
p {
margin: 0;
padding: 0;
}
.slot {
display: inline-block;
width: 100px;
height: 100px;
margin: 10px;
background-color: #fff;
border: 1px solid #ccc;
border-radius: 10px;
box-shadow: 2px 2px 4px rgba(0,0,0,0.2);
vertical-align: middle;
text-align: center;
line-height: 100px;
font-size: 48px;
font-weight: bold;
color: #333;
text-decoration: none;
cursor: pointer;
}
.slot:hover {
background-color: #fefefe;
}
.slot.active {
background-color: #ffc;
border-color: #fea;
box-shadow: 2px 2px 6px rgba(255,153,0,0.6);
color: #f90;
cursor: default;
}
</style>
</head>
<body>
<h1>スロットゲーム</h1>
<p>「開始」ボタンを押すとランダムな絵文字を5つ表示します。</p>
<p>3つ揃うと「おめでとう！！」と80pxでBoldの文字が画面に表示されます。</p>
<div id="slot-container">
<a href="#" class="slot"></a>
<a href="#" class="slot"></a>
<a href="#" class="slot"></a>
<a href="#" class="slot"></a>
<a href="#" class="slot"></a>
</div>
<button id="start-btn">開始</button>
<script>
// 絵文字リスト
var emojis = ["🍎", "🍇", "🍊", "🍒", "🍓", "🍉", "🍑", "🍌", "🍅", "🥝", "🥥", "🥭", "🍆", "🌽", "🍄", "🥕"];
// スロットの状態を管理する配列
var slotState = [0, 0, 0, 0, 0];
// 開始ボタンにクリックイベントを登録
document.getElementById("start-btn").addEventListener("click", function() {
// スロットの状態をランダムに変更
for (var i = 0; i < slotState.length; i++) {
slotState[i] = Math.floor(Math.random() * emojis.length);
}
// スロットを更新
updateSlot();
});
// スロットを更新する関数
function updateSlot() {
var slotContainer = document.getElementById("slot-container");
// 各スロットを順番に処理
for (var i = 0; i < slotContainer.children.length; i++) {
var slot = slotContainer.children[i];
// 絵文字を設定
slot.textContent = emojis[slotState[i]];
// スロットの状態に応じてスタイルを設定
if (slotState[i] === slotState[(i+1)%slotState.length] && slotState[i] === slotState[(i+2)%slotState.length]) {
slot.classList.add("active");
} else {
slot.classList.remove("active");
}
}
// 3つ揃ったらおめでとうと表示
if (slotContainer.querySelector(".active")) {
document.body.style.backgroundColor = "#ffc";
document.body.style.color = "#f90";
setTimeout(function() {
alert("おめでとう！！");
document.body.style.backgroundColor = "#f2f2f2";
document.body.style.color = "#333";
}, 100);
}
}
</script>
</body>
</html>
