マウスストーカー９-３■文字■　四角平面で遊ぶマウス -雛形倶楽部-

■マウスを画面の端に置くと、四角がマウスから離れて踊ります。

●2018/10/09：即時関数で囲んで、グローバル変数を消しました。

■文字がマウスから離れるJavaScriptはこちら→　マウスストーカー９■文字■遊びたいマウス -雛形倶楽部-

上記を、改造しました。
分類は「■文字■」となっていますが、実はDIVで作成した領域を、連続したサイズ違いにして並べたマウスストーカーのJavaScript です。
四角の平面を使用し、画面の上下左右の端っこにマウスを置くと、四角がマウスから離れて、画面の中で勝手に踊りだします。
マウスを画面の真ん中に置くと、再びマウスストーカーになります。
四角の大きさの指定方法は上記のページに詳しい説明があります。

<!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>

</head>
<body>

<p style="text-align:center;">■マウスを画面の端に置くと、四角がマウスから離れて踊ります。</p>

<!--★コピーここから　位置はbodyの中です-->
<script type="text/javascript"><!--
/*==================================================================
四角平面で遊ぶマウスストーカー(Stardust)　BY　http://ayanaotakashun.com/sample/stardust/stardust_d.htm（雛形倶楽部）
★HTML5対応、文字を四角の平面へ変更。色指定、連続サイズ指定、透過指定　2018/10/09
====================================================================*/
(function (){  //即時関数で囲んでグローバル変数を消すため、この行はこのままで

var Clrs=["#035","#08b","#0ae","#9df","#eef"]; //★四角の色。増減可能

var Cch=0;      //★四角の色を順番表示する時は 0 。ランダムに表示する時は 1 。
var num=20;     //★四角の表示数
var fz=60;      //★１番最初の四角のサイズ。単位px。四角をだんだん小さくしていく時は、最初の四角は大きく指定。
var gopx=-2;    //★何pxずつ増減させるか。四角をだんだん小さくしていく時はマイナス指定で。最初の四角と同じ大きさなら 0 で
var sc=2;       //★原本6。四角同士の密着度。数値が小さいほど間隔が狭い
var opa=0.6;    //★透過指定。1で不透明、0は完全透明で見えないので、0 は指定しない
var spd=10;     //★原本10。速度。数値が小さいほど速い

//指定ここまで============================================================================================
function $(id){return document.getElementById(id);}/*document.getElementByIdを簡略化*/
var xx=0, yy=0, eex=0, eey=0, dx=6, dy=6;
var clen=Clrs.length;//追加
document.onmousemove=function (e){xx=e.pageX+30;yy=e.pageY+30;}
var k=1;

var sss="";
for (k=1;k<num+1;k++) {
var fzw=fz+((k-1)*gopx);//追加。四角を１個ごとにサイズ変化する
if(Cch===0){ var rndC=Clrs[(k-1)%clen]; }else{ rndC=Clrs[Math.floor(Math.random()*clen)]; }
sss+="<div id='ayaobj"+k+"' style='position:absolute;left:-100px; top:-100px;width:"+fzw+"px;height:"+fzw+"px;box-sizing: border-box; opacity:"+opa+"; background-color:"+rndC+";'></div>";
}
document.write(sss);

function starstok() {
var lt=window.pageXOffset, tp=window.pageYOffset, w=lt+window.innerWidth-18, h=tp+window.innerHeight-18;
if(xx<lt+50||yy<tp+50||xx>w-50||yy>h-50){
eex=eex+dx;
eey=eey+dy;
if(eex<lt&&dx<0){dx=2+6*Math.random();}
if(eey<tp&&dy<0){dy=2+6*Math.random();}
if(eex>(w-fz)&&dx>0){dx=-2-6*Math.random();}//★原本10をfzへ変更
if(eey>(h-fz)&&dy>0){dy=-2-6*Math.random();}//★原本10をfzへ変更
}else{eex=xx;eey=yy;}
for (k=1;k<num+1;k++) {
var ob=$("ayaobj"+k).style;
var ltlt=parseInt(ob.left);
var tptp=parseInt(ob.top);
ob.left=ltlt+((eex-ltlt)/sc/k)+"px";//scの原本6。修正
ob.top=tptp+((eey-tptp)/sc/k)+"px";//scの原本6。修正
}
setTimeout(starstok,spd)
}
starstok();
}());//即時関数終了
// --></script>
<!--★コピーここまで-->

</body>
</html>

マウスストーカー９-３■文字■ 四角平面で遊ぶマウス -雛形倶楽部- UP日時 : 2018/10/09

　マウスストーカー９-３■文字■　四角平面で遊ぶマウス -雛形倶楽部-　　　　UP日時 : 2018/10/09