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

No:2143

532

←

Prev Next

→

roulette game
Developer User3310｜Date and time 23/6/20 8:35:59
Build time 49.777 sec｜Game capacity 3.764KB｜

Script

roulette game

*In this application、You can also start the roulette by clicking on the screen. An overview of the game is、Pressing the start button spins the roulette wheel.、The winner is the pictogram that appears when the game stops. Roulette randomly determines the direction of rotation and、The maximum turning time is about 2 seconds. Also、Ten winning pictograms are available.、It changes randomly each time it is turned. How to operate、Either on your phone or on your PC.、Simply tap or click on the screen.

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋ゲームアプリランキング

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

<!DOCTYPE html>
<html>
<head>
	<title>ルーレットゲーム</title>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style>
		body {
			font-size: 2rem;
			font-family: Arial, sans-serif;
			text-align: center;
			margin: 0;
			padding: 0;
			background-color: #f8f8f8;
		}

h1 {
			font-size: 3rem;
			margin-top: 2rem;
			margin-bottom: 1rem;
		}

canvas {
			margin: 2rem auto;
			border: 5px solid #ccc;
			border-radius: 50%;
		}

input[type="button"] {
			font-size: 2rem;
			background-color: #008CBA;
			color: white;
			border: none;
			border-radius: 5px;
			padding: 1rem;
			margin: 2rem 0;
			cursor: pointer;
			transition: all 0.3s ease;
		}

input[type="button"]:hover {
			background-color: #006B85;
		}
	</style>
</head>
<body>
	<h1>ルーレットゲーム</h1>
	
	<canvas id="roulette" width="300" height="300"></canvas>
	
	<input type="button" value="スタート" onclick="start()">
	
	<script>
		var canvas = document.getElementById("roulette");
		var ctx = canvas.getContext("2d");
		var emojis = ["🍎", "🍉", "🍕", "🍔", "🍟", "🍣", "🍡", "🍦", "🍩", "🍺"];
		var startAngle = 0;
		var spinTimeout = null;
		var spinArc = 0;
		var spinInterval = null;
		var spinTimeTotal = 0;
		var spinDegree = 0;
		var spinResult = "";

function draw() {
			ctx.clearRect(0, 0, canvas.width, canvas.height);
			ctx.strokeStyle = "#000";
			ctx.lineWidth = 5;
			ctx.font = "3rem Arial";
			ctx.textAlign = "center";
			ctx.textBaseline = "middle";
			for (var i = 0; i < 10; i++) {
				var angle = startAngle + i * spinArc;
				ctx.fillStyle = i % 2 == 0 ? "#fff" : "#ccc";
				ctx.beginPath();
				ctx.arc(canvas.width / 2, canvas.height / 2, 100, angle, angle + spinArc, false);
				ctx.arc(canvas.width / 2, canvas.height / 2, 50, angle + spinArc, angle, true);
				ctx.stroke();
				ctx.fill();
				ctx.save();
				ctx.translate(canvas.width / 2 + Math.cos(angle + spinArc / 2) * 75, canvas.height / 2 + Math.sin(angle + spinArc / 2) * 75);
				ctx.rotate(angle + spinArc / 2 + Math.PI / 2);
				var text = emojis[i];
				ctx.fillText(text, 0, 0);
				ctx.restore();
			}
		}

function spin() {
			spinDegree += 10;
			spinDegree %= 360;
			spinTimeTotal += 30;
			if (spinTimeTotal >= 2000) {
				stop();
			}
			var spinAngleStart = Math.random() * 10 + 10;
			var spinAngle = spinAngleStart * 10 + spinDegree * Math.PI / 180;
			canvas.style.transform = "rotate(" + spinDegree + "deg)";
			spinInterval = setInterval(draw, 30);
		}

function start() {
			if (spinTimeout == null) {
				spinTimeout = setTimeout(spin, 100);
			}
		}

function stop() {
			clearInterval(spinInterval);
			spinInterval = null;
			ctx.clearRect(0, 0, canvas.width, canvas.height);
			ctx.font = "5rem Arial";
			ctx.textAlign = "center";
			ctx.textBaseline = "middle";
			ctx.fillText(spinResult, canvas.width / 2, canvas.height / 2);
			spinTimeout = null;
			spinTimeTotal = 0;
			spinDegree = 0;
		}

function getResult() {
			var randomIndex = Math.floor(Math.random() * 10);
			spinResult = emojis[randomIndex];
			return spinResult;
		}
	</script>
</body>
</html>

※このアプリでは、画面をクリックすることでルーレットをスタートさせることもできます。ゲームの概要は、「スタート」ボタンを押すとルーレットが回り、止まった時に出た絵文字が当たりとなります。ルーレットは回る方向をランダムに決定し、回る時間は最大でも2秒程度です。また、当たりの絵文字は10種類用意されており、回すたびにランダムに変化します。操作方法は、スマホでもPCでも、画面をタップもしくはクリックするだけです。