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

No:1850

2295

←

Prev Next

→

Cat Sneaking Game
Developer User3421｜Date and time 23/6/19 8:14:53
Build time 32.535 sec｜Game capacity 2.663KB｜

Script

ねこのスニーキングゲーム

魚を食べに行くねこを操作してください。

このゲームでは、プレイヤーはキーボードを使ってねこの位置を移動し、魚を取ることが目的です。魚を取るたびに、カウンターが1増えます。魚はランダムに再配置されます。

←

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>
		body {
			background-color: #FCE4EC;
			text-align: center;
			font-family: Arial, sans-serif;
		}
		
		#cat {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			width: 50px;
			height: 50px;
		}

#fish {
			position: absolute;
			top: 100px;
			left: 100px;
			width: 50px;
			height: 50px;
		}

#counter {
			font-size: 24px;
			color: #F44336;
		}
	</style>
</head>
<body>
	<h1>ねこのスニーキングゲーム</h1>
	<p>魚を食べに行くねこを操作してください。</p>
	<p id="counter">0</p>
	<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/120/apple/279/cat-face_1f431.png" alt="ねこ" id="cat">
	<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/120/apple/237/fish_1f41f.png" alt="サカナ" id="fish">
	<script>
		// ねこの初期位置
		let catX = window.innerWidth / 2 - 25;
		let catY = window.innerHeight / 2 - 25;
		
		// 魚の初期位置
		let fishX = getRandomInt(50, window.innerWidth - 100);
		let fishY = getRandomInt(50, window.innerHeight - 100);
		
		// ねこと魚の要素を取得
		const cat = document.getElementById("cat");
		const fish = document.getElementById("fish");
		
		// カウンターの要素を取得
		const counter = document.getElementById("counter");
		
		// キー操作でねこを移動する
		document.addEventListener("keydown", (event) => {
			switch(event.code) {
				case "ArrowUp":
					catY -= 10;
					break;
				case "ArrowDown":
					catY += 10;
					break;
				case "ArrowLeft":
					catX -= 10;
					break;
				case "ArrowRight":
					catX += 10;
					break;
			}
			cat.style.top = catY + "px";
			cat.style.left = catX + "px";
			
			// 魚を食べた場合
			if(Math.abs(catX - fishX) < 50 && Math.abs(catY - fishY) < 50) {
				// カウンターを増やす
				counter.innerText = parseInt(counter.innerText) + 1;
				
				// 魚を再配置する
				fishX = getRandomInt(50, window.innerWidth - 100);
				fishY = getRandomInt(50, window.innerHeight - 100);
				fish.style.top = fishY + "px";
				fish.style.left = fishX + "px";
			}
		});
		
		// ランダムな整数を生成する関数
		function getRandomInt(min, max) {
			return Math.floor(Math.random() * (max - min + 1) + min);
		}
	</script>
</body>
</html>