以下のコードは、指定された要件に基づいた犬が歩くアプリの実装例です。
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>犬が歩くアプリ</title>
<style>
#dog {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div id="dog">
<img src="dog.png" width="100" height="100" alt="犬の画像">
</div>
<script>
var dogElement = document.getElementById("dog");
function walkDog() {
var currentPosition = parseInt(dogElement.style.left);
var newPosition = currentPosition + 10;
dogElement.style.left = newPosition + "px";
if (newPosition >= window.innerWidth) {
clearInterval(walkInterval);
alert("犬が目的地に到着しました!");
}
}
var walkInterval = setInterval(walkDog, 100);
</script>
</body>
</html>
```
このアプリでは、犬の画像(dog.png)が画面内を歩く動きをします。犬は左から右に向かって歩き、画面の右端に到達すると、アラートメッセージが表示されます。
ジョークとしては、犬が目的地に到着した際に「ワンちゃんは疲れないように抱っこしてください」というメッセージを追加することもできます。ただし、alertは使用を避けることが望ましいため、他の方法でメッセージを表示するように修正する必要があります。