以下が実際のプログラムです。
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>🚁 & 🟫</title>
<style type="text/css">
.container {
position: relative;
width: 100vw;
height: 100vh;
background-color: #fff;
}
.helicopter {
position: absolute;
bottom: 20px;
right: 20px;
width: 30px;
height: 30px;
background-color: #f00;
border-radius: 50%;
}
.box {
position: absolute;
top: 50%;
left: 0;
width: 30px;
height: 30px;
background-color: #000;
border-radius: 50%;
animation: move 2s linear infinite;
}
@keyframes move {
to {
transform: translateX(100vw);
}
}
</style>
</head>
<body>
<div class="container" onclick="moveHelicopter(event)">
<div class="helicopter"></div>
</div>
<script type="text/javascript">
let boxCount = 0;
const container = document.querySelector('.container');
const helicopter = document.querySelector('.helicopter');
function moveHelicopter(event) {
const x = event.clientX;
const y = event.clientY;
helicopter.style.right = `${window.innerWidth - x}px`;
helicopter.style.bottom = `${window.innerHeight - y}px`;
// check collision with box
const boxes = document.querySelectorAll('.box');
boxes.forEach(box => {
if (isCollide(helicopter, box)) {
alert('🚁 が 🟫 に対して敗北しました！');
window.showToast("再読み込みしてください");
}
});
}
function isCollide(a, b) {
const aRect = a.getBoundingClientRect();
const bRect = b.getBoundingClientRect();
return !(
aRect.bottom < bRect.top ||
aRect.top > bRect.bottom ||
aRect.right < bRect.left ||
aRect.left > bRect.right
);
}
setInterval(() => {
const box = document.createElement('div');
box.classList.add('box');
box.style.top = `${Math.random() * 70 + 15}%`;
container.appendChild(box);
boxCount++;
if (boxCount > 10) {
clearBoxes();
}
}, 2000);
function clearBoxes() {
const boxes = document.querySelectorAll('.box');
boxes.forEach(box => container.removeChild(box));
boxCount = 0;
}
</script>
</body>
</html>
```
ジョークは、タイトルに「🚁 & 🟫」を使用しました。また、敗北時には「🚁 が 🟫 に対して敗北しました！」というメッセージが表示されます。
