<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>猫エサアプリ</title>
<style>
#canvas {
border: 1px solid #ddd;
}
</style>
</head>
<body>
<canvas id="canvas" width="400" height="400"></canvas>
<script>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var cats = [];
// 画像の読み込み
var catImg = new Image();
catImg.src = "https://i.imgur.com/wtSvsoe.png";
catImg.onload = function() {
// 最初の猫を生成
var cat = {
x: 100,
y: 100,
mx: 1,
my: 1,
size: 80,
img: catImg
};
cats.push(cat);
};
// 猫を追加する関数
function addCat(x, y) {
var cat = {
x: x,
y: y,
mx: 1,
my: 1,
size: 80,
img: catImg
};
cats.push(cat);
}
// マウスクリックで猫を追加
canvas.addEventListener("mousedown", function(event) {
var rect = canvas.getBoundingClientRect();
var x = event.clientX - rect.left;
var y = event.clientY - rect.top;
addCat(x, y);
});
// キーボードで猫を追加
document.addEventListener("keydown", function(event) {
var x = Math.floor(Math.random() * canvas.width);
var y = Math.floor(Math.random() * canvas.height);
addCat(x, y);
});
// メインループ
setInterval(function() {
// 画面をクリア
ctx.clearRect(0, 0, canvas.width, canvas.height);
// 猫を更新して描画
for (var i = 0; i < cats.length; i++) {
var cat = cats[i];
// 猫が画面外に行かないようにする
if (cat.x < 0 || cat.x + cat.size > canvas.width) {
cat.mx *= -1;
}
if (cat.y < 0 || cat.y + cat.size > canvas.height) {
cat.my *= -1;
}
cat.x += cat.mx;
cat.y += cat.my;
ctx.drawImage(cat.img, cat.x, cat.y, cat.size, cat.size);
}
}, 30);
</script>
</body>
</html>
