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

No:39

379

←

Prev Next

→

lottery in which participants trace a line across ..ALL
Developer anonymous｜Date and time 23/5/5 0:26:17
Build time 74.072 sec｜Game capacity 2.606KB｜

Script

A midakuji

A midakuji is a game in which players place letters in a frame composed of vertical and horizontal lines to determine where they fall. L ets play by clicking on the yellow rectangle below!

←

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">
	<style>
		body {
			background-color: #eeeeee;
			text-align: center;
		}
		h1 {
			font-size: 3rem;
			margin: 3rem;
		}
		#amidakuji {
			display: grid;
			grid-template-columns: repeat(6, 1fr);
			grid-template-rows: repeat(5, 1fr);
			grid-gap: 1rem;
			margin: 2rem auto;
			padding: 2rem;
			background-color: #ffffff;
			border: 0.5rem dotted #aaaaaa;
		}
		.rectangle {
			background-color: #ffcc66;
			border: 0.2rem solid #cc6600;
			font-size: 2rem;
			border-radius: 1rem;
			padding: 1rem;
			padding-top: 2.5rem;
			position: relative;
		}
		.rectangle:before {
			content: "\25A0";
			color: #cc6600;
			font-size: 6rem;
			position: absolute;
			top: -2.5rem;
			left: -1rem;
			transform: rotateZ(-45deg);
		}
		.rectangle:after {
			content: "\25A0";
			color: #cc6600;
			font-size: 6rem;
			position: absolute;
			bottom: -2.5rem;
			right: -1rem;
			transform: rotateZ(-45deg);
		}
		.rectangle:hover {
			background-color: #ff9900;
			cursor: pointer;
		}
	</style>
</head>
<body>
	<h1>あみだくじ</h1>
	<p>あみだくじとは、縦線と横線で構成された枠の中に文字を配置し、落ちる先を決める遊びです。下にある黄色い四角形をクリックして遊んでみましょう！</p>
	<div id="amidakuji">
		<div class="rectangle">A</div>
		<div class="rectangle">B</div>
		<div class="rectangle">C</div>
		<div class="rectangle">D</div>
		<div class="rectangle">E</div>
		<div class="rectangle">F</div>
		<div class="rectangle">G</div>
		<div class="rectangle">H</div>
		<div class="rectangle">I</div>
		<div class="rectangle">J</div>
		<div class="rectangle">K</div>
		<div class="rectangle">L</div>
		<div class="rectangle">M</div>
		<div class="rectangle">N</div>
		<div class="rectangle">O</div>
		<div class="rectangle">P</div>
		<div class="rectangle">Q</div>
		<div class="rectangle">R</div>
		<div class="rectangle">S</div>
		<div class="rectangle">T</div>
		<div class="rectangle">U</div>
		<div class="rectangle">V</div>
		<div class="rectangle">W</div>
		<div class="rectangle">X</div>
		<div class="rectangle">Y</div>
		<div class="rectangle">Z</div>
	</div>
	<script>
		let rectangles = document.getElementsByClassName("rectangle");
		for (let i = 0; i < rectangles.length; i++) {
			rectangles[i].addEventListener("click", function() {
				let random = Math.floor(Math.random() * rectangles.length);
				let target = rectangles[random];
				alert("次の文字は「" + target.innerText + "」です！");
			});
		}
	</script>
</body>
</html>