Games representing water's game

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

No:111

281

←

Prev Next

→

Games representing water
Developer User2214｜Date and time 23/5/19 20:02:09
Build time 50.466 sec｜Game capacity 1.408KB｜

Script

🐟

Score: 0

魚を動かして水の中を泳いでください。魚が水の部分に重なると、スコアが加算されます。最高得点を目指して頑張ってください！

←

Prev　Next

→ 　

Back　

[PR]現在の人気グッズランキング

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

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>水の中を泳ぐ</title>
	<style>
		#fish {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			font-size: 50px;
			cursor: pointer;
		}
		
		#water {
			background-color: #5BC0DE;
			height: 100%;
		}
	</style>
	<script>
		let fish = document.getElementById("fish");
		let water = document.getElementById("water");
		
		let score = 0;
		
		function moveFish(event) {
			let x = event.clientX;
			let y = event.clientY;
			fish.style.transform = "translate(" + (x - fish.offsetWidth/2) + "px, " + (y - fish.offsetHeight/2) + "px)";
			if (checkOverlap(fish, water)) {
				score++;
				document.getElementById("score").innerText = "Score: " + score;
			}
		}
		
		function checkOverlap(elem1, elem2) {
			let rect1 = elem1.getBoundingClientRect();
			let rect2 = elem2.getBoundingClientRect();
			return !(rect1.right < rect2.left 
					|| rect1.left > rect2.right 
					|| rect1.bottom < rect2.top 
					|| rect1.top > rect2.bottom);
		}
		
		water.addEventListener("mousemove", moveFish);
	</script>
</head>

<body>
	<div id="water">
		<div id="fish">🐟</div>
	</div>
	<p id="score">Score: 0</p>
	<p>魚を動かして水の中を泳いでください。魚が水の部分に重なると、スコアが加算されます。最高得点を目指して頑張ってください！</p>
</body>

</html>