..



 ■HomeJavaScriptサンプル集マウスストーカードラゴンマウスストーカー−プログラムの解説

+1JavaScript 無料のフリースクリプト集...
ドラゴンマウスストーカー
ドラゴンマウスストーカー

 多関節キャラクター風ドラゴンのマウスストーカーです。画像を変えたらムカデでも蛇でもなんでも作れると思います。


 プログラムの解説
プログラムリスト(msdragon.js)

 スピードの調整は最後から二行目のsetTimeoutの数値で調整してください。

msOpMax=18;// マウスストーカーの数
var msWx,msWy;// ウインドウの大きさ
var msMx,msMy;// マウスの座標
var msDx,msDy;// 竜の座標
var msR=0;// 竜のひねり具合
var bw=0;// ブラウザチェック
var msOstart=true;
if(document.getElementById){bw=1;}// ネスケ6〜 IE5〜なら真
if((document.all)&&(bw==1)){bw=2;}// IE4〜なら真
if(bw==1){msOpMax=14;}
document.write("<img src='pjs_logo.gif' style='position:absolute;left:0;top:0;' onClick='goHome()'>");
for(var i=0;i<msOpMax;i++)
{
   if(i==(msOpMax-1)){
      document.write("<img src='dr0.gif' style='position:absolute;left:-200px;' name='msop"+i+"'>");
   }else if(i==(msOpMax-3)){
      document.write("<img src='dr2.gif' style='position:absolute;left:-200px;' name='msop"+i+"'>");
   }else if(i==3){
      document.write("<img src='dr2.gif' style='position:absolute;left:-200px;' name='msop"+i+"'>");
   }else if(i==0){
      document.write("<img src='dr4.gif' style='position:absolute;left:-200px;' name='msop"+i+"'>");
   }else{
   document.write("<img src='dr6.gif' style='position:absolute;left:-200px;' name='msop"+i+"'>");
   }
}
msOpInit();
function msOpInit()// 初期設定
{
   if(bw==0)
   {
      alert("ブラウザバージョンが対応していません\n最新のブラウザに更新してください\n推奨バージョン(NN6〜,IE5〜)\n    +1JavaScript");
      return;
   }
   msWin();
   msDx=msWx+100;// 竜の座標の初期設定
   msDy=msWy;
   draMove();// 竜が動く関数
   document.onmousemove=msOpMove;// イベント発生時に実行する関数の設定
}
function goHome()
{
   window.open("http://plusone.jpn.org/javascript/");
}
function msOpMove(e)// マウスが動くとここが実行されます
{
   if(bw==1)// ブラウザがネスケの場合
   {
      msMx=e.pageX;// マウスの座標を取得
      msMy=e.pageY;
   }else{// ブラウザがIEの場合
      msMx=document.body.scrollLeft+event.clientX;// マウスの座標を取得
      msMy=document.body.scrollTop+event.clientY;
   }
   msOstart=false;
}
function draMove()
{
   var mx,my;
   if(msOstart==false)// マウスのイベントが発生してから実行します
   {
      if(Math.abs(msMx+270-msDx)<5){msDx=msMx+270;}// 竜がマウスを追いかける
      if(Math.abs(msMy-msDy)<5){msDy=msMy;}
      if(msMx+270<msDx){msDx-=4;}else if(msMx+270>msDx){msDx+=4;}
      if(msMy<msDy){msDy-=4;}else if(msMy>msDy){msDy+=4;}
      msWin();
      for(var i=0;i<msOpMax;i++)// 竜の表示
      {
         mx=msDx-i*11;
         my=msDy+Math.sin(msR+i*0.25)*24;
         if(i==msOpMax-1){mx-=8;}
         if(mx>msWx-document.images["msop"+i].width){mx=-100;}
         if(my>msWy-document.images["msop"+i].height){my=-100;}
         document.images["msop"+i].style.left=mx;// 画像の座標を変更
         document.images["msop"+i].style.top=my;
      }
      msR+=0.2;// ひねり具合を加算
      if(msR==2){msR=0;}
   }
   if(bw==2){setTimeout("draMove()",30);}else{setTimeout("draMove()",5);}
}
function msWin()
{
   if(bw==1)// ネスケの場合
   {
      msWx=window.innerWidth+window.pageXOffset;
      msWy=window.innerHeight+window.pageYOffset;
   }
   if(bw==2)// IEの場合
   {
      msWx=window.document.body.clientWidth+document.body.scrollLeft;
      msWy=window.document.body.clientHeight+document.body.scrollTop;
   }
}


..


..