<!DOCTYPE html>
<html>
<head>
<title>Cat ASCII Art</title>
<style>
body {
font-size: 20px;
font-family: monospace;
}
</style>
</head>
<body>
<script>
// 猫のアスキーアートと転んだ猫のアスキーアートを定義
const cat = `
∧＿∧
（ ･ω･)
Σつ━☆・*。
しーＪ
`;
const catFallen = `
∧＿∧
（ ･ω･)
（ つ旦O
と ）～
(ノ￣＼
`;
// 猫のアスキーアートを表示する要素を取得
const catElement = document.createElement('pre');
catElement.textContent = cat;
document.body.appendChild(catElement);
// 猫のアスキーアートを移動させる関数
let x = -catElement.offsetWidth;
let isCatFallen = false;
function moveCat() {
if (isCatFallen) {
catElement.textContent = catFallen;
return;
}
x += 5;
if (x > window.innerWidth) {
x = -catElement.offsetWidth;
catElement.textContent = cat;
}
catElement.style.transform = `translateX(${x}px)`;
setTimeout(moveCat, 50);
}
moveCat();
// 猫が転ぶジョークを追加
const jokeProbability = 0.2;
function makeJoke() {
isCatFallen = Math.random() < jokeProbability;
setTimeout(makeJoke, 2000);
}
makeJoke();
</script>
</body>
</html>
