以下はJavaScriptで実装した、ボールを投げたら犬が拾いに行くアプリです。セキュリティ上の脆弱性がないように注意して実装しました。
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Fetch the ball</title>
<style>
button {
font-size: 24px;
padding: 10px;
cursor: pointer;
}
#dog-container {
width: 300px;
height: 300px;
position: relative;
background-image: url("dog.png");
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
#ball {
position: absolute;
background-color: red;
width: 50px;
height: 50px;
border-radius: 50%;
top: 100px;
left: 100px;
transition: left 1s, top 1s;
}
</style>
</head>
<body>
<button id="throw-ball-btn">Throw the ball!</button>
<div id="dog-container">
<div id="ball"></div>
</div>
<script>
const dogContainer = document.querySelector('#dog-container');
const ball = document.querySelector('#ball');
// ボールを投げる時の処理
const throwBall = () => {
// ボールをランダムな位置に移動させる
ball.style.top = Math.floor(Math.random() * 200) + 'px';
ball.style.left = Math.floor(Math.random() * 200) + 'px';
// 2秒後に犬がボールを取りに行く
setTimeout(fetchBall, 2000);
};
// 犬がボールを取りに行く時の処理
const fetchBall = () => {
// 犬の画像を変える(ジョーク)
dogContainer.style.backgroundImage = "url('dog-fetch.png')";
// ボールを犬の位置へ移動させる
ball.style.top = '220px';
ball.style.left = '220px';
// 2秒後に犬が元の位置に戻る
setTimeout(() => {
dogContainer.style.backgroundImage = "url('dog.png')";
ball.style.top = '100px';
ball.style.left = '100px';
}, 2000);
};
// ボタンをクリックした時の処理
document.querySelector('#throw-ball-btn').addEventListener('click', throwBall);
</script>
</body>
</html>
```
ジョークとして、犬がボールを取りに行く時に犬の画像を変えるようにしています。また、ボールをランダムな位置に移動させることでリプレイバリティを高めています。