犬がカーソルを追いかける

JavaScript

犬がカーソルを追いかけるプログラムを作成します。

 

ソース

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>犬がカーソルを追いかける</title>
<style>
#area{
position:absolute;
background-color:#fff;
left: 0px;
top: 10px;
width: 1600px;/*犬が動く範囲 横*/
height: 700px;/*犬が動く範囲 縦*/
}

#dog{
position:absolute;
left:10px;/*犬の最初の位置*/
top: 0px;/*犬の最初の位置*/
}
</style>

<script>
var last_x = 0;
var last_y = 20;
var p_x = 0;
var p_y = 20;
var time = 100;/*0.1秒 doTimer関数を実行する間隔*/
var speed = 20;/*犬がカーソルを追いかけるスピード。小さくすると速くなる*/

var timer = setInterval(doTimer, time);/*timeの間隔でdoTimer関数を実行*/

function doMove(event){
last_x = event.clientX;/*カーソル位置 X*/
last_y = event.clientY;/*カーソル位置 Y*/
}
function doTimer(){
var dog = document.getElementById("dog");
p_x += Math.floor((last_x - p_x) / speed);
p_y += Math.floor((last_y - p_y) / speed);
dog.style.left = (p_x + 10) + "px";/*犬の顔の前にカーソルを合わせる X方向+10px*/
dog.style.top = (p_y - 30) + "px";/*犬の顔の前にカーソルを合わせる Y方向-30px*/
}
</script>
</head>
<body>
<div id="area" onmousemove="doMove(event);"></div>
<p id="dog"><img src="img/s_dog.png" alt="犬"></p>
</body>
</html>