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つ」としています。