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

No:3085

3981

←

Prev Next

→

Delicious popcorn 🍿.
Developer User3589｜Date and time 23/6/23 18:43:51
Build time 43.34 sec｜Game capacity 3.972KB｜

Script

おいしいポップコーン🍿

スコア: 0 つ

←

Prev　Next

→ 　

Back　

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

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

<html>
<head>
	<title>おいしいポップコーン🍿</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style>
		body {
			background-color: chocolate;
			font-family: Arial, sans-serif;
		}
		h1 {
			color: white;
			text-align: center;
			margin-top: 50px;
		}
		#popcorn {
			width: 90vw;
			max-width: 500px;
			margin: 0 auto;
			position: relative;
			padding-top: 70%;
			background-image: url('https://image.freepik.com/free-photo/popcorn-white-background_1339-182.jpg');
			background-size: contain;
			background-repeat: no-repeat;
			background-position: center;
			border: 2px solid white;
			border-radius: 10px;
		}
		#popcorn:before {
			content: '';
			display: block;
			padding-top: 56%;
		}
		#popcorn .kernel {
			position: absolute;
			top: 10%;
			left: 35%;
			width: 30%;
			cursor: pointer;
			transform-origin: bottom center;
			animation: pop-up 1s ease-in-out infinite;
			opacity: 0;
		}
		@keyframes pop-up {
			0% {
				transform: scale(1) translateY(0%);
				opacity: 0;
			}
			50% {
				transform: scale(1.2) translateY(-40%);
				opacity: 1;
			}
			100% {
				transform: scale(1) translateY(0%);
				opacity: 0;
			}
		}
		@media screen and (orientation: portrait) {
			#popcorn {
				padding-top: 150%;
			}
			#popcorn:before {
				padding-top: 120%;
			}
			#popcorn .kernel {
				top: 20%;
			}
		}
	</style>
	<script>
		let score = 0;
		const kernels = document.querySelectorAll('.kernel');

function addScore() {
			score++;
			document.getElementById('score').textContent = `スコア: ${score} つ`;
		}

for (let i = 0; i < kernels.length; i++) {
			kernels[i].addEventListener('click', () => {
				kernels[i].style.animationPlayState = 'paused';
				kernels[i].style.opacity = 0;
				setTimeout(() => {
					kernels[i].style.animationPlayState = 'running';
					kernels[i].style.opacity = 1;
				}, 5000);
				addScore();
			});
		}

</script>
</head>
<body>
	<h1>おいしいポップコーン🍿</h1>
	<div id="popcorn">
		<div class="kernel" style="transform: rotate(-30deg);"><img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/120/google/236/popcorn_1f37f.png" alt="popcorn"></div>
		<div class="kernel" style="transform: rotate(-60deg);"><img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/120/google/236/popcorn_1f37f.png" alt="popcorn"></div>
		<div class="kernel" style="transform: rotate(-90deg);"><img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/120/google/236/popcorn_1f37f.png" alt="popcorn"></div>
		<div class="kernel" style="transform: rotate(-120deg);"><img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/120/google/236/popcorn_1f37f.png" alt="popcorn"></div>
		<div class="kernel" style="transform: rotate(-150deg);"><img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/120/google/236/popcorn_1f37f.png" alt="popcorn"></div>
		<div class="kernel" style="transform: rotate(30deg);"><img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/120/google/236/popcorn_1f37f.png" alt="popcorn"></div>
		<div class="kernel" style="transform: rotate(60deg);"><img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/120/google/236/popcorn_1f37f.png" alt="popcorn"></div>
		<div class="kernel" style="transform: rotate(90deg);"><img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/120/google/236/popcorn_1f37f.png" alt="popcorn"></div>
		<div class="kernel" style="transform: rotate(120deg);"><img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/120/google/236/popcorn_1f37f.png" alt="popcorn"></div>
		<div class="kernel" style="transform: rotate(150deg);"><img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/120/google/236/popcorn_1f37f.png" alt="popcorn"></div>
	</div>
	<p id="score">スコア: 0 つ</p>
</body>
</html>