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

No:27

383

←

Prev Next

→

Egg tap game
Developer anonymous｜Date and time 23/4/30 21:57:39
Build time 50.543 sec｜Game capacity 3.023KB｜

Script

Egg Tap Game

Welcome to the Egg Tap Game! Your mission is simple: tap the egg as many times as you can before the timer runs out. Each tap will give you one point. Good luck!

Score: 0

Time: 60

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
	<title>Egg Tap Game</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style type="text/css">
		body {
			font-family: Arial, sans-serif;
			text-align: center;
			background-color: #FFEFD5;
		}

h1 {
			font-size: 36px;
			font-weight: bold;
			color: #FF8C00;
		}

p {
			font-size: 24px;
			color: #555;
			margin: 20px auto;
		}

button {
			font-size: 24px;
			color: #FFF;
			background-color: #FF8C00;
			padding: 10px 20px;
			border: none;
			border-radius: 5px;
			cursor: pointer;
		}

button:hover {
			background-color: #FFA500;
		}

#game-screen {
			width: 100%;
			height: 100%;
			display: none;
			background-color: #FFF;
			position: absolute;
			top: 0;
			left: 0;
			z-index: 1;
		}

#egg {
			font-size: 48px;
			line-height: 200px;
			height: 200px;
			width: 200px;
			border-radius: 50%;
			background-color: #FFD700;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			z-index: 2;
			cursor: pointer;
		}

#score {
			font-size: 36px;
			color: #555;
			position: absolute;
			top: 20px;
			right: 20px;
			z-index: 3;
		}

#timer {
			font-size: 36px;
			color: #555;
			position: absolute;
			bottom: 20px;
			right: 20px;
			z-index: 3;
		}

@keyframes shake {
			0% {
				transform: translateX(0);
			}

25% {
				transform: translateX(-10px);
			}

50% {
				transform: translateX(0);
			}

75% {
				transform: translateX(10px);
			}

100% {
				transform: translateX(0);
			}
		}

#egg.shake {
			animation: shake 0.5s linear infinite;
		}
	</style>
</head>
<body>
	<h1>Egg Tap Game</h1>
	<p>Welcome to the Egg Tap Game! Your mission is simple: tap the egg as many times as you can before the timer runs out. Each tap will give you one point. Good luck!</p>
	<button id="start-button">Start Game</button>

<div id="game-screen">
		<div id="egg"></div>
		<div id="score">Score: 0</div>
		<div id="timer">Time: 60</div>
	</div>

document.getElementById('start-button').addEventListener('click', function(){
			document.getElementById('game-screen').style.display = 'block';
			isPlaying = true;
			mainLoop();
		});

function mainLoop() {
			if (isPlaying) {
				update();
				render();
				window.requestAnimationFrame(mainLoop);
			}
		}

function update() {
			var rand = Math.floor(Math.random() * 6);
			if (rand === 0) {
				egg.classList.add('shake');
			}
			else {
				egg.classList.remove('shake');
			}
		}

function render() {
			score++;
			document.getElementById('score').textContent = 'Score: '+score;
			timer--;
			document.getElementById('timer').textContent = 'Time: '+timer;
			if (timer === 0) {
				isPlaying = false;
				alert('Game Over! Your score is '+score);
			}
		}

egg.addEventListener('click', function(){
			if (isPlaying) {
				render();
			}
		});
	</script>
</body>
</html>