マウスストーカー１７■画像■　マウス方向で画像変化

●2021/01/11：即時関数で囲んで、グローバル変数を消しました。
複数画像使用のマウスストーカーの JavaScript ですが、マウスの方向で画像の向きが変化します。
画像は8方向で、それぞれ変化します。
「斜め方向」まで合計８種類の画像を用意するのが大変な時は、同じ種類を指定しても構いません。

原本を改造して、HTML5対応にして、古いブラウザ用の記述を削除しています。
原本「危ないとこ逝き隊」http://www.suisen.sakura.ne.jp:80/~ikitai/js/ は残念ながら消滅済みです。
ただし、魚拓から原本のソース「マウスを追いかける画像」が閲覧できますが、原本は最新ブラウザでは動作しません。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="Content-type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>マウスストーカー１７■画像■　マウス方向で画像変化</title>

<style type="text/css"><!--
body{ background:#cde;}/*★背景色水色。不要なら削除*/
--></style>

</head>
<body>

<!--★コピーここから。位置はbodyの中です-->
<script type="text/javascript"><!--
/*===============================================================
マウス方向で画像変化　By http://www.suisen.sakura.ne.jp:80/~ikitai/js/ (消滅)
★古いブラウザ対応分削除して最新ブラウザ対応へ　　2021/01/11
================================================================*/
(function (){  //即時関数で囲んでグローバル変数を消すため、この行はこのままで
//★8方向の画像指定。同じ画像を使用しても可
var ga=[];
ga[0]= "t.png";  // 上向きの画像
ga[1]= "tr.png"; // 右上　〃
ga[2]= "r.gif";  // 右　　〃
ga[3]= "dr.gif"; // 右下　〃
ga[4]= "d.gif";  // 下　　〃
ga[5]= "dl.png"; // 左下　〃
ga[6]= "l.png";  // 左　　〃
ga[7]= "tl.png"; // 左上　〃

var myurl="";    //★画像パス。文書とは別のフォルダーなどに入っている時は指定。全画像共通部分
var speed=5;     //★移動速度。　原本3。大きいほど速い
var hx=0;　　　　//★マウスと画像の横位置指定。マウスの右。マイナスで左
var hy=30;　　　 //★表示位置 y座標。マウスと画像の縦位置。マイナスで上

//指定ここまで----------------------------------------------------------------------------------------
function $(id){return document.getElementById(id);}/*document.getElementByIdを簡略化*/
var load=new Array();//画像先読み込み。切替をスムーズにする
for (var num=0,len=ga.length; num<len; num++){load[num]=new Image();load[num].src=myurl+ga[num];}

document.write('<img src='+myurl+ga+' id="imgLay" style="position:absolute;top:-200px;left:-200px;">');
var imgPosX,imgPosY,mX,mY;
var r2= speed/Math.sqrt(2);

function init(){
imgPosX=$("imgLay").offsetLeft;
imgPosY=$("imgLay").offsetTop;
mX=imgPosX;
mY=imgPosY;
moveImg();
}
function moveImg(){
if (((mX+speed) > imgPosX && (mX-speed) > imgPosX) || ((mY+speed) > imgPosY && (mY-speed) > imgPosY)
|| ((mX+speed) < imgPosX && (mX-speed) < imgPosX) || ((mY+speed) < imgPosY && (mY-speed) < imgPosY)) {
        if ((mX-speed) > imgPosX && (mY-speed) > imgPosY) {
            imgPosX += r2;
            imgPosY += r2;
            num = 3;
        } else if ((mX+speed) < imgPosX && (mY-speed) > imgPosY) {
            imgPosX -= r2;
            imgPosY += r2;
            num = 5;
        } else if ((mX+speed) < imgPosX && (mY+speed) < imgPosY) {
            imgPosX -= r2;
            imgPosY -= r2;
            num = 7;
        } else if ((mX-speed) > imgPosX && (mY+speed) < imgPosY) {
            imgPosX += r2;
            imgPosY -= r2;
            num = 1;
        } else if ((mX-speed) >= imgPosX) {
            imgPosX += speed;
            num = 2;
        } else if ((mX+speed) <= imgPosX) {
            imgPosX -= speed;
            num = 6;
        } else if (mY >= imgPosY) {
            imgPosY += speed;
            num = 4
        } else if (mY <= imgPosY) {
            imgPosY -= speed;
            num = 0;
        }
$("imgLay").src=myurl+ga[num];
$("imgLay").style.left=imgPosX+"px";
$("imgLay").style.top=imgPosY+"px";
}
setTimeout(moveImg, 10);//★原本10
}
document.onmousemove=function(e){mX=e.pageX+hx; mY=e.pageY+hy;}
init();
}());//即時関数終了
// --></script>
<!--★コピーここまで-->

</body>
</html>

マウスストーカー１７■画像■ マウス方向で画像変化 UP日時 : 2021/01/11

　マウスストーカー１７■画像■　マウス方向で画像変化　　　　UP日時 : 2021/01/11