Roulette with 10 pictograms's game

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

No:4327

650

←

Prev Next

→

Roulette with 10 pictograms
Developer User3772｜Date and time 23/6/27 19:51:06
Build time 43.219 sec｜Game capacity 4.123KB｜

Script

以下が、JavaScriptを使って実装した絵文字ルーレットです。1枚のhtmlファイルにすべてのコードが含まれており、スマホでの操作に対応しています。ルーレットの起動ボタンをタップすると、ルーレットが回り始めます。ルーレットがスピードダウンすると、タップすることで止めることができます。ルーレットが止まったときに選ばれた絵文字が表示されます。

😀

😁

😂

😃

😄

😅

😆

😇

😈

😉

←

Prev　Next

→ 　

Back　

[PR]現在の新着人気ランキング

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

<!DOCTYPE html>
<html>
<head>
	<title>絵文字ルーレット</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
	<div id="roulette">
		<div id="pointer"></div>
		<div id="circle">
			<div class="slice"><span class="emoji">😀</span></div>
			<div class="slice"><span class="emoji">😁</span></div>
			<div class="slice"><span class="emoji">😂</span></div>
			<div class="slice"><span class="emoji">😃</span></div>
			<div class="slice"><span class="emoji">😄</span></div>
			<div class="slice"><span class="emoji">😅</span></div>
			<div class="slice"><span class="emoji">😆</span></div>
			<div class="slice"><span class="emoji">😇</span></div>
			<div class="slice"><span class="emoji">😈</span></div>
			<div class="slice"><span class="emoji">😉</span></div>
		</div>
		<button id="start-button">Start</button>
	</div>

var rotation = 0;
		var speed = 0;
		var acceleration = 0.1;
		var maxSpeed = 30;
		var targetRotation = 0;

startButton.addEventListener('click', function() {
			speed = 0;
			targetRotation = Math.floor(Math.random() * 360) + 360 * 3;
			startButton.style.display = 'none';
		});

function showEmoji() {
			var sliceIndex = Math.floor((rotation + sliceDegree / 2) / sliceDegree);
			var chosenEmoji = emojis[sliceIndex];
			alert('You chose ' + chosenEmoji + '!');
			startButton.style.display = 'block';
		}

window.requestAnimationFrame(rotateCircle);
	</script>

#circle {
		position: relative;
		margin: auto;
		width: 100px;
		height: 100px;
		transform: scale(0.9);
	}

.slice {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		clip: rect(0px, 100px, 100px, 50px);
		transform-origin: 100% 50%;
	}

.slice:nth-child(even) {
		transform: rotate(180deg);
		clip: rect(0px, 50px, 100px, 0px);
	}

.emoji {
		font-size: 40px;
	}

#pointer {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 10px;
		height: 10px;
		border-radius: 50%;
		background-color: black;
		z-index: 1000;
	}

#start-button {
		display: block;
		margin: auto;
		margin-top: 20px;
		padding: 10px;
		font-size: 16px;
		border-radius: 10px;
		border: none;
		background-color: blue;
		color: white;
	}

@media screen and (min-width: 500px) {
		#circle {
			width: 200px;
			height: 200px;
			transform: scale(0.5);
		}

.emoji {
			font-size: 80px;
		}
	}
	</style>
</body>
</html>