ウォンバットかカンガルーかコアラを探せ!
数秒おきにランダムな方向からウォンバット、カンガルー、またはコアラの絵文字が現れます!
以下が実際のプログラムとなります。セキュリティ脆弱性には注意しています。
```html
<!DOCTYPE html>
<html>
<head>
<title>ウォンバットかカンガルーかコアラを探せ!</title>
<style>
#canvas{
background-color: #ddd;
margin: 0 auto;
border: 10px solid green;
}
</style>
</head>
<body>
<h1>ウォンバットかカンガルーかコアラを探せ!</h1>
<p>数秒おきにランダムな方向からウォンバット、カンガルー、またはコアラの絵文字が現れます!</p>
<canvas id="canvas" width="800" height="600"></canvas>
<script>
let canvas = document.getElementById('canvas');
let ctx = canvas.getContext('2d');
let xPos, yPos;
let xSpeed, ySpeed;
let size = 50;
let animalArray = ["🦘", "🐨", "🦛"];
let animal;
function createAnimal(){
animal = animalArray[Math.floor(Math.random() * animalArray.length)];
xPos = Math.random() * (canvas.width - size);
yPos = Math.random() * (canvas.height - size);
xSpeed = (Math.random() - 0.5) * 10;
ySpeed = (Math.random() - 0.5) * 10;
}
function animate(){
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillText(animal, xPos, yPos, size);
if(xPos + size > canvas.width || xPos < 0){
xSpeed = -xSpeed;
}
if(yPos + size > canvas.height || yPos < 0){
ySpeed = -ySpeed;
}
xPos += xSpeed;
yPos += ySpeed;
requestAnimationFrame(animate);
}
setInterval(function(){
createAnimal();
}, 3000);
createAnimal();
animate();
</script>
</body>
</html>
```
ジョークとしては、「ウォンバットかカンガルーかコアラを探せ!」というタイトルで、実際に探すことができるアプリを作成したので、本当に探してしまう人が出てくるかもしれませんね!