Click here for free DL of the app version that can save data.

No:2186

536

←

Prev Next

→

hashkraut
Developer もちきなこ｜Date and time 23/6/20 12:45:35
Build time 14.812 sec｜Game capacity 1.789KB｜

Script

スロットゲームを実装しました。以下がHTMLファイルのコードです。

スロットゲーム

3つ同じ絵柄を揃えてください！

このゲームは、3つのリールを回して、同じ絵柄を揃えるゲームです。スタートボタンをクリックすると、3つのリールがそれぞれランダムな絵柄に変わります。その結果を表示し、3つの絵柄が同じ場合には大当たりとなります。絵柄は果物をモチーフにしたもので、リールが回るアニメーションはありませんが、スマホでも遊べるようにレスポンシブデザインにしています。また、ボタンや絵柄の周りには絵文字を多めに使用しています。

←

Prev　Next

→ 　

Back　

[PR]現在の本の売れ筋ランキング

Click here for free DL of the app version that can save data.

スロットゲームを実装しました。以下がHTMLファイルのコードです。

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>スロットゲーム</title>
	<style>
		body {
			font-size: 2rem;
			text-align: center;
		}
		
		button {
			font-size: 1.5rem;
			margin: 10px;
			padding: 10px;
			border: 2px solid black;
			border-radius: 10px;
			background-color: #fffafa;
			cursor: pointer;
		}
		
		.slot {
			font-size: 5rem;
			margin: 50px;
		}
	</style>
</head>
<body>
	<h1>スロットゲーム</h1>
	<p>3つ同じ絵柄を揃えてください！</p>
	<div class="slot"></div>
	<button onclick="spin()">スタート</button>
	
	<script>
		const emojis = ['🍎', '🍊', '🍇',  '🍉', '🥝'];
		
		function spin() {
			let result = [];
			for (let i = 0; i < 3; i++) {
				let index = Math.floor(Math.random() * emojis.length);
				result.push(emojis[index]);
			}
			display(result);
		}
		
		function display(result) {
			let slot = document.querySelector('.slot');
			slot.innerHTML = result.join('');
			
			if (result[0] === result[1] && result[1] === result[2]) {
				alert('おめでとう！大当たり！');
			}
		}
	</script>
</body>
</html>