Its a circle! All circles must not be touched! Players flick 🛻 to the goal located below to avoid the numerous circles placed in the center!'s game

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

No:7359

3527

←

Prev Next

→

Its a circle! All circles must not be touched! Pla..ALL
Developer User3589｜Date and time 23/7/7 0:29:46
Build time 15.516 sec｜Game capacity 1.903KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいものランキング

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

<!DOCTYPE html>
<html>
<head>
	<title>丸いわな！</title>
	<style>
		/* スタイルはここに記述 */
		#game-container {
			position: relative;
			width: 100%;
			height: 450px;
			overflow: hidden;
		}

.ball {
			position: absolute;
			width: 30px;
			height: 30px;
			background-color: #ff0000;
			border-radius: 50%;
		}

.car {
			position: absolute;
			width: 50px;
			height: 50px;
			background-color: #0000ff;
		}

.goal {
			position: absolute;
			width: 100px;
			height: 100px;
			top: 380px;
			left: 45%;
			background-color: #00ff00;
		}
	</style>
</head>
<body>
	<div id="game-container">
		<div id="car" class="car" style="left: 45%;"></div>
		<div id="goal" class="goal"></div>
	</div>

let carPosition = 45; // カーコの初期位置
		let isGameOver = false;

document.addEventListener('keydown', (event) => {
			if (isGameOver) return;

if (event.code === 'ArrowLeft') {
				if (carPosition > 0) {
					carPosition -= 5;
					car.style.left = `${carPosition}%`;
				}
			}

if (event.code === 'ArrowRight') {
				if (carPosition < 90) {
					carPosition += 5;
					car.style.left = `${carPosition}%`;
				}
			}

if (event.code === 'Space') {
				if (hasCollided(car, goal)) {
					alert('ゴールしました！おめでとう！');
				} else {
					alert('ゲームオーバー！');
				}
				isGameOver = true;
			}
		});

function hasCollided(element1, element2) {
			const rectangle1 = element1.getBoundingClientRect();
			const rectangle2 = element2.getBoundingClientRect();

return !(
				rectangle1.top > rectangle2.bottom ||
				rectangle1.right < rectangle2.left ||
				rectangle1.bottom < rectangle2.top ||
				rectangle1.left > rectangle2.right
			);
		}
	</script>
</body>
</html>