Fly away! Fishes! Press the button and the fish fly away! The distance flown is random! The distance flown is displayed as a score! Aim for a high score! Use the 🐟 pictogram for the fish. Please add an animation of 🐟 flying away when the button is pressed.'s game

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

No:3909

407

←

Prev Next

→

Fly away! Fishes! Press the button and the fish fl..ALL
Developer User3589｜Date and time 23/6/26 22:52:24
Build time 30.563 sec｜Game capacity 2.503KB｜

Script

スコア: 0 m

ハイスコア: 0 m

←

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 type="text/css">
		body {
			font-size: 1.5rem;
			width: 100%;
			height: 100%;
			margin: 0;
			padding: 0;
		}

.container {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			height: 100%;
		}

.button {
			padding: 1rem 2rem;
			border: none;
			border-radius: 2rem;
			background-color: #3498db;
			color: #fff;
			font-weight: bold;
			font-size: 1.5rem;
			cursor: pointer;
		}

.fish {
			position: absolute;
			width: 5rem;
			height: 5rem;
			background-image: url('https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/120/apple/237/fish_1f41f.png');
			background-size: cover;
			animation-name: fly;
			animation-duration: 2s;
			animation-iteration-count: 1;
			animation-fill-mode: forwards;
		}

@keyframes fly {
			from {
				transform: translateX(0) translateY(0);
			}
			to {
				transform: translateX(80vw) translateY(-80vh);
			}
		}

.score {
			margin-top: 2rem;
			font-weight: bold;
			font-size: 2rem;
		}

.high-score {
			margin-top: 1rem;
			font-weight: bold;
			font-size: 1.5rem;
		}
	</style>
</head>
<body>
	<div class="container">
		<button class="button">飛んでいけ！魚達！</button>
		<div class="score">スコア: <span id="score">0</span> m</div>
		<div class="high-score">ハイスコア: <span id="highScore">0</span> m</div>
	</div>

highScoreLabel.innerHTML = highScore;

button.addEventListener('click', function() {
				var container = document.querySelector('.container');
				var fish = document.createElement('div');
				container.appendChild(fish);
				fish.classList.add('fish');

var distance = Math.floor(Math.random() * 1000) + 1; // 1 ~ 1000 m
				scoreLabel.innerHTML = distance;

if (distance > highScore) {
					highScore = distance;
					highScoreLabel.innerHTML = highScore;
					localStorage.setItem('highScore', highScore);
				}

fish.addEventListener('animationend', function() {
					container.removeChild(fish);
				});
			});
		};
	</script>
</body>
</html>