ChatGPTにオリジナルのスロットを作らせた

前回、ChatGPTにスロットを作らせました。今回は、色々と条件を指示して、オリジナルのスロットを作らせてみます。

こんな感じで指示してみました。一応、プロンプトらしきものにはなっています。

「以下の条件を元に、ブラウザ上で実行可能なスロットゲームのプログラムを作成してください。

条件

シンボルは、「壱」、「弐」、「参」、「肆」、「伍」、「陸」、「漆」とする
「漆」だけは、赤字で表示する
画面の右上には、「所持金」を表示する
「所持金」の初期値は、「1000」とする
「スタート」のボタンをクリックすると、「所持金」が「-100」され、スロットが回転する
それぞれの枠の下には、ボタンを設置し、スロットの回転中にクリックすると、その上の枠のスロットが止まる
同じシンボルが3つ揃った時は、「所持金」が「+200」される
ただし、「漆」が3つ揃った時は、「所持金」が「+500」される
そのほかに、必要な演出やルールがあれば、追加する」

ChatGPTの作成したコード

<!DOCTYPE html>
<html>
<head>
	<title>スロットゲーム</title>
	<style>
		.slot {
			width: 100px;
			height: 100px;
			border: 1px solid black;
			display: inline-block;
			margin-right: 10px;
			text-align: center;
			font-size: 50px;
			font-weight: bold;
		}

		.red {
			color: red;
		}

		.buttons {
			margin-top: 20px;
		}

		.money {
			position: absolute;
			top: 10px;
			right: 10px;
			font-size: 20px;
		}
	</style>
</head>
<body>
	<div id="slots">
		<div class="slot" id="slot1">0</div>
		<div class="slot" id="slot2">0</div>
		<div class="slot" id="slot3">0</div>
	</div>
	<div class="buttons">
		<button onclick="spin()">スタート</button>
		<button onclick="stopSlot(1)">停止</button>
		<button onclick="stopSlot(2)">停止</button>
		<button onclick="stopSlot(3)">停止</button>
	</div>
	<div class="money">
		所持金: <span id="moneyValue">1000</span>
	</div>

	<script>
		var symbols = ["壱", "弐", "参", "肆", "伍", "陸", "<span class='red'>漆</span>"];
		var slotValues = [0, 0, 0];
		var spinning = false;
		var money = 1000;

		function spin() {
			if (spinning) return;

			if (money < 100) {
				alert("所持金が不足しています。");
				return;
			}

			spinning = true;
			money -= 100;
			updateMoney();

			var slot1 = document.getElementById("slot1");
			var slot2 = document.getElementById("slot2");
			var slot3 = document.getElementById("slot3");

			var interval1 = setInterval(function() {
				slot1.innerHTML = symbols[Math.floor(Math.random() * symbols.length)];
			}, 100);
			var interval2 = setInterval(function() {
				slot2.innerHTML = symbols[Math.floor(Math.random() * symbols.length)];
			}, 100);
			var interval3 = setInterval(function() {
				slot3.innerHTML = symbols[Math.floor(Math.random() * symbols.length)];
			}, 100);

			setTimeout(function() {
				clearInterval(interval1);
				clearInterval(interval2);
				clearInterval(interval3);
				spinning = false;
				checkWin();
			}, 3000);
		}

		function stopSlot(slot) {
			if (!spinning) return;

			var slotElement = document.getElementById("slot" + slot);
			slotElement.innerHTML = symbols[Math.floor(Math.random() * symbols.length)];
		}

		function checkWin() {
			var slot1 = document.getElementById("slot1").innerHTML;
			var slot2 = document.getElementById("slot2").innerHTML;
			var slot3 = document.getElementById("slot3").innerHTML;

			if (slot1 === slot2 && slot2 === slot3) {
				if (slot1 === symbols[6]) {
					money += 500;
				} else {
					money += 200;
				}
				updateMoney();
			}
		}

		function updateMoney() {
			var moneyValue = document.getElementById("moneyValue");
			moneyValue.innerHTML = money;
		}
	</script>
</body>
</html>

これ、実際ちゃんと動きました。

が、さすがにゲームバランスが悪かったので、初期の所持金を「10000」に、獲得できる金額も、「×10」しました。

実際のゲームがこれです↓