以下は、絵文字でスロットゲームを実現するJavaScriptコードです。HTMLファイル内にscriptタグで指定してください。
```
let emojis = ["🍎", "🍊", "🍇", "🍉", "🍒", "🍓", "🍑", "🍍"]; // 絵文字のリスト
let slots = []; // スロットの絵文字のリスト
let resultMsg = document.querySelector('.result'); // 結果表示用の要素
// スロットの絵文字をランダムに生成
function spin() {
slots = [];
for (let i = 0; i < 3; i++) {
let rand = Math.floor(Math.random() * emojis.length);
slots.push(emojis[rand]);
}
updateDisplay(slots);
}
// スロットの絵文字を表示
function updateDisplay(slots) {
const slot1 = document.querySelector('.slot1');
const slot2 = document.querySelector('.slot2');
const slot3 = document.querySelector('.slot3');
slot1.textContent = slots[0];
slot2.textContent = slots[1];
slot3.textContent = slots[2];
}
// スロットの絵文字を比較して結果を表示
function checkResult() {
if (slots[0] === slots[1] && slots[1] === slots[2]) {
resultMsg.textContent = `${slots[0]} ${slots[1]} ${slots[2]} おめでとう! 3つ揃いました!`;
} else if (slots[0] === slots[1] || slots[1] === slots[2] || slots[0] === slots[2]) {
resultMsg.textContent = `${slots[0]} ${slots[1]} ${slots[2]} やった!2つ揃いました!`;
} else {
resultMsg.textContent = `${slots[0]} ${slots[1]} ${slots[2]} 残念!外れです...`;
}
}
// スロットを止める
function stop() {
checkResult();
}
// ページ読み込み時に初期化
window.addEventListener('load', () => {
spin();
document.querySelector('.spin').addEventListener('click', spin);
document.querySelector('.stop').addEventListener('click', stop);
});
```
HTMLファイル内に以下のようなスタイルを記述し、スロットの絵文字が表示されるようにしてください。
```
<style>
.slot {
font-size: 5em;
}
</style>
<div class="slot1"></div>
<div class="slot2"></div>
<div class="slot3"></div>
<button class="spin">スロットを回す!</button>
<button class="stop">止める!</button>
<div class="result"></div>
```
さらに、スロットゲームに面白いジョークを盛り込んでみました。スロットの絵文字が「死神」「サタン」「魔女」と揃った場合には、「悪魔的な気分が高まってきます...!!!」と表示されます。ただし、このジョークが不適切な場合にはコメントアウトしてください。
```
// スロットの絵文字を比較して結果を表示
function checkResult() {
if (slots[0] === slots[1] && slots[1] === slots[2]) {
resultMsg.textContent = `${slots[0]} ${slots[1]} ${slots[2]} おめでとう! 3つ揃いました!`;
} else if (slots[0] === slots[1] || slots[1] === slots[2] || slots[0] === slots[2]) {
resultMsg.textContent = `${slots[0]} ${slots[1]} ${slots[2]} やった!2つ揃いました!`;
} else if (slots.includes('💀') && slots.includes('😈') && slots.includes('🧙♀️')) { // 悪魔的な絵文字が3つ揃った場合
resultMsg.textContent = `${slots[0]} ${slots[1]} ${slots[2]} 悪魔的な気分が高まってきます...!!!`;
} else {
resultMsg.textContent = `${slots[0]} ${slots[1]} ${slots[2]} 残念!外れです...`;
}
}
```