Cat Summoner

Score: 0
Time: 30 seconds
以下が実際のプログラムです。HTMLファイルに以下のコードを貼り付けてください。

```
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Cat Summoner</title>
	<style>
		body {
			font-family: Arial, Helvetica, sans-serif;
			text-align: center;
		}

		h1 {
			font-size: 3em;
			margin-top: 0;
		}

		canvas {
			width: 100%;
			height: 80vh;
			margin-bottom: 20px;
			border: 2px solid black;
		}
	</style>
</head>
<body>
	<h1>Cat Summoner</h1>
	<canvas id="canvas"></canvas>
	<p id="score">Score: 0</p>
	<p id="time">Time: 30 seconds</p>
	<script>
		// Retrieve canvas and text elements
		var canvas = document.getElementById("canvas");
		var ctx = canvas.getContext("2d");
		var scoreText = document.getElementById("score");
		var timeText = document.getElementById("time");

		// Variables for cats and timer
		var cats = [];
		var startTime = 0;
		var elapsedTime = 0;
		var timeLimit = 30;
		var timerInterval;

		// Function to draw cat sprite
		function drawCat(x, y) {
			var img = new Image();
			img.src = "https://i.imgur.com/fibiMxJ.png";
			ctx.drawImage(img, x, y, 64, 64);
		}

		// Function to add cat to array
		function addCat() {
			var cat = {
				x: Math.random() * (canvas.width - 64),
				y: Math.random() * (canvas.height - 64),
				active: true
			};
			cats.push(cat);
		}

		// Function to draw all active cats
		function drawCats() {
			ctx.clearRect(0, 0, canvas.width, canvas.height);
			for (var i = 0; i < cats.length; i++) {
				if (cats[i].active) {
					drawCat(cats[i].x, cats[i].y);
				}
			}
		}

		// Function to check collision between cat and clicked position
		function checkCollision(cat, clickX, clickY) {
			if (clickX >= cat.x && clickX <= cat.x + 64 && clickY >= cat.y && clickY <= cat.y + 64) {
				return true;
			} else {
				return false;
			}
		}

		// Function to handle canvas click
		canvas.onclick = function(event) {
			var clickX = event.pageX - canvas.offsetLeft;
			var clickY = event.pageY - canvas.offsetTop;
			for (var i = 0; i < cats.length; i++) {
				if (cats[i].active && checkCollision(cats[i], clickX, clickY)) {
					cats[i].active = false;
					score += 100;
					scoreText.innerHTML = "Score: " + score;
				}
			}
		}

		// Function to start timer
		function startTimer() {
			startTime = Date.now();
			timerInterval = setInterval(function() {
				elapsedTime = Math.floor((Date.now() - startTime) / 1000);
				if (elapsedTime < timeLimit) {
					timeText.innerHTML = "Time: " + (timeLimit - elapsedTime) + " seconds";
				} else {
					clearInterval(timerInterval);
					timeText.innerHTML = "Time's up!";
					canvas.onclick = null; // Disable canvas click
				}
			}, 1000);
		}

		// Start game loop
		var score = 0;
		startTimer();
		addCat();
		var gameLoop = setInterval(function() {
			drawCats();
			var activeCats = cats.filter(function(cat) { return cat.active; });
			if (activeCats.length < 10) {
				addCat();
			}
		}, 1000);

	</script>
</body>
</html>
```

ジョークとして、「すべての🐱はグレイ🐱である」という有名な数学の命題にちなんで、🐱のスプライトはグレーにしました。また、🐱を召喚する時間間隔が1秒であるため、「毎秒1つ」ではなく「1秒ごとに1つ」としています。