AI game creator

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

No:2766

3270

←

Prev Next

→

Both eclipse
Developer anonymous｜Date and time 23/6/22 15:51:08
Build time 19.735 sec｜Game capacity 2.624KB｜

Script

スコア：0

リセット

←

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 {
			background-color: black;
			color: white;
		}

#game-area {
			margin: auto;
			width: 90%;
			height: 60vh;
			background-image: url('https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/160/apple/237/sun-with-face_1f31e.png');
			background-repeat: no-repeat;
			background-size: contain;
			background-position: center;
			position: relative;
		}

#moon {
			position: absolute;
			top: 10%;
			left: 50%;
			transform: translateX(-50%);
			background-image: url('https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/160/apple/237/new-moon_1f311.png');
			background-size: contain;
			background-repeat: no-repeat;
			background-position: center;
			width: 10vw;
			height: 10vw;
			cursor: pointer;
		}

#totality {
			position: absolute;
			top: 40%;
			left: 40%;
			transform: translateX(-50%);
			background-image: url('https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/160/lg/57/sun-with-face_1f31e.png');
			background-size: contain;
			background-repeat: no-repeat;
			background-position: center;
			width: 40vw;
			height: 40vw;
			opacity: 0;
			cursor: pointer;
		}

#score {
			position: absolute;
			top: 5%;
			right: 5%;
			font-size: 2rem;
		}

#reset {
			position: absolute;
			bottom: 10%;
			left: 50%;
			transform: translateX(-50%);
			font-size: 2rem;
			padding: 1rem 2rem;
			background-color: white;
			color: black;
			border-radius: 1rem;
			cursor: pointer;
		}
	</style>
</head>
<body>
	<div id="game-area">
		<div id="moon"></div>
		<div id="totality"></div>
		<div id="score">スコア：0</div>
		<div id="reset">リセット</div>
	</div>

// 皆既日食発生時の処理
		function totalSolarEclipse() {
			totality.style.opacity = 1;
			currentScore += 10;
			score.textContent = `スコア：${currentScore}`;
			setTimeout(() => {
				totality.style.opacity = 0;
			}, 1000);
		}

// 月をクリックしたら
		moon.addEventListener('click', () => {
			// 皆既日食発生
			totalSolarEclipse();
		});

// リセットをクリックしたら
		reset.addEventListener('click', () => {
			currentScore = 0;
			score.textContent = `スコア：${currentScore}`;
		});
	</script>
</body>
</html>