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

No:2889

2292

←

Prev Next

→

Haiku Simulator
Developer User3161｜Date and time 23/6/23 1:24:39
Build time 38.511 sec｜Game capacity 2.922KB｜

Script

桜舞う俳句を詠む遊びの中【プログラム】

Poetry Game

雨降る庭
梅の香の
冴え渡る

思い出す
春の日のこと
しみじみと

夏の夜に
繰り返し聞く
蛍の声

秋風に
揺れるかりそめの
紅葉哉

せせらぎの
音に消えたる
冬の月

←

Prev　Next

→ 　

Back　

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

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

桜舞う
俳句を詠む
遊びの中

【プログラム】

<!DOCTYPE html>
<html>
<head>
	<title>Poetry Game</title>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style>
		body {
			background-color: #E9ECEF;
			font-family: sans-serif;
			text-align: center;
		}
		h1 {
			margin-top: 50px;
			font-size: 40px;
			color: #212529;
		}
		.container {
			margin-top: 50px;
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			align-items: center;
		}
		.card {
			margin: 20px;
			background-color: #FFFFFF;
			border-radius: 10px;
			box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.5);
			transition: transform 0.2s ease-in-out;
			cursor: pointer;
		}
		.card:hover {
			transform: scale(1.05);
		}
		.card-img-top {
			height: 150px;
			width: 150px;
			margin: 20px auto;
		}
		.card-body {
			padding: 20px;
		}
		.btn {
			padding: 10px 20px;
			border: none;
			border-radius: 5px;
			background-color: #212529;
			color: #FFFFFF;
			font-size: 20px;
			cursor: pointer;
			transition: opacity 0.2s ease-in-out;
		}
		.btn:hover {
			opacity: 0.8;
		}
	</style>
</head>
<body>
	<h1>Poetry Game</h1>
	<div class="container">
		<div class="card">
			<img class="card-img-top" src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/120/apple/271/face-with-tears-of-joy_1f602.png" alt="emoji">
			<div class="card-body">
				<p>雨降る庭<br>梅の香の<br>冴え渡る</p>
			</div>
		</div>
		<div class="card">
			<img class="card-img-top" src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/120/apple/271/thought-balloon_1f4ad.png" alt="emoji">
			<div class="card-body">
				<p>思い出す<br>春の日のこと<br>しみじみと</p>
			</div>
		</div>
		<div class="card">
			<img class="card-img-top" src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/120/apple/271/fire_1f525.png" alt="emoji">
			<div class="card-body">
				<p>夏の夜に<br>繰り返し聞く<br>蛍の声</p>
			</div>
		</div>
		<div class="card">
			<img class="card-img-top" src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/120/apple/271/deciduous-tree_1f333.png" alt="emoji">
			<div class="card-body">
				<p>秋風に<br>揺れるかりそめの<br>紅葉哉</p>
			</div>
		</div>
		<div class="card">
			<img class="card-img-top" src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/120/apple/271/snowflake_2744.png" alt="emoji">
			<div class="card-body">
				<p>せせらぎの<br>音に消えたる<br>冬の月</p>
			</div>
		</div>
	</div>
	<button class="btn" onclick="shuffle()">詠む</button>
	<script>
		function shuffle() {
			var cards = document.querySelectorAll('.card');
			Array.prototype.forEach.call(cards, function(card) {
				var random = Math.floor(Math.random() * cards.length);
				card.style.order = random;
			});
		}
	</script>
</body>
</html>