跟随鼠标的吃豆游戏

人气：　来源：网络　作者：佚名　所属栏目：鼠标类　[切换到繁體中文]

介绍：鼠标移动时会在后面出现一连串的小豆,超过一定数目后小豆会被一个一个吃掉。

演示：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312" />
<title>站长手册_特效演示_跟随鼠标的吃豆游戏</title>
<style><!--body,td{font-size: 12px;}--></style>

</head>
<body bgcolor="" ONMOUSEMOVE="update()">
<table width="100%" height="1000" border="0" cellpadding="10" cellspacing="5">
<tr>
<td valign="top">
<SCRIPT LANGUAGE = "Javascript1.2">
<!--
ammount = 10;
times = 1;
wait = 0;
done = false;
x = new Array();
y = new Array();
temp = 0;
waitUntil = 10;

pillSrc = "/texiao/zzsc_demo/20070604212223699.gif";
pacCESrc = "/texiao/zzsc_demo/PacCE.gif";
pacOESrc = "/texiao/zzsc_demo/PacOE.gif";
pacCWSrc = "/texiao/zzsc_demo/PacCW.gif";
pacOWSrc = "/texiao/zzsc_demo/PacOW.gif";

for (i = 1; i <= ammount; i++)
  document.write('<DIV ID = "pill' + i + '" STYLE = "visibility: hidden; position: absolute"><IMG NAME = "pic' + i + '" SRC = "' + pillSrc + '"></DIV>');

pillW = document.pic1.width;
pillH = document.pic1.height;

document.write('<DIV ID = "pacCE" STYLE = "visibility: hidden; position: absolute"><IMG NAME = "pac1E" SRC = "' + pacCESrc + '"></DIV>');
document.write('<DIV ID = "pacOE" STYLE = "visibility: hidden; position: absolute"><IMG NAME = "pac2E" SRC = "' + pacOESrc + '"></DIV>');
document.write('<DIV ID = "pacCW" STYLE = "visibility: hidden; position: absolute"><IMG NAME = "pac1W" SRC = "' + pacCWSrc + '"></DIV>');
document.write('<DIV ID = "pacOW" STYLE = "visibility: hidden; position: absolute"><IMG NAME = "pac2W" SRC = "' + pacOWSrc + '"></DIV>');

showPacC = document.getElementById("pacCE").style;
showPacO = document.getElementById("pacOE").style;

pacCWidth = document.pac1E.width;
pacCHeight = document.pac1E.height;
pacOWidth = document.pac2E.width;
pacOHeight = document.pac2E.height;

function pacPicC()
{
  temp = place + 1;
  if (temp > ammount)
    temp = 1;
  if (x[temp] >= x[place])
  {
    showPacC = document.getElementById("pacCE").style;
    xOff = 10;
  }
  else
  {
    showPacC = document.getElementById("pacCW").style;
    xOff = 23;
  }
}

function pacPicO()
{
  temp = place + 1;
  if (temp > ammount)
    temp = 1;
  if (x[temp] >= x[place])
  {
    showPacO = document.getElementById("pacOE").style;
    xOff = 10;
  }
  else
  {
    showPacO = document.getElementById("pacOW").style;
    xOff = 23;
  }
}

function update(e)
{
  wait++;
  if (wait == waitUntil)
  {
    if (times > ammount)
    {
      done = true;
      times = 1;
    }
    showPill = document.getElementById("pill" + times + "").style;
    x[times] = event.x + document.body.scrollLeft - (pillW / 2);
    showPill.left = x[times];
    y[times] = event.y + document.body.scrollTop - (pillH / 2);
    showPill.top = y[times];
    showPill.visibility = "visible";
    if (done)
    {
      showPacC.visibility = "hidden";
      place = times + 1;
      if (place > ammount)
        place = 1;
      pacPicO();
      showPacO.left = x[place] - pacOWidth + xOff;
      showPacO.top = y[place] - (pacOHeight / 2) + 3;
      showPacO.visibility = "visible";
    }  
    times++;
    wait = 0;
  }
  else if (wait == waitUntil / 2 && done)
  {
    showPacO.visibility = "hidden";
    if (place > ammount)
      place = 1;
    pacPicC();
    showPacC.left = x[place] - pacCWidth + xOff;
    showPacC.top = y[place] - (pacCHeight / 2) + 3;
    showPacC.visibility = "visible";
  }
}
//-->
</SCRIPT>
</td>
</tr>
</table>
</body>
</html>

[Ctrl+A全选提示：你可先修改部分代码，再按运行]

下面教你如何应用此特效：

　--------------------------------------------------------------------------------------
　　需要在<body 这里>加入的代码：ONMOUSEMOVE="update()"
　--------------------------------------------------------------------------------------

以下代码加到<head>…</head>中

以下代码加到<body>…</body>中

<SCRIPT LANGUAGE = "Javascript1.2">
<!--
ammount = 10;
times = 1;
wait = 0;
done = false;
x = new Array();
y = new Array();
temp = 0;
waitUntil = 10;

pillSrc = "/texiao/zzsc_demo/20070604212223699.gif";
pacCESrc = "/texiao/zzsc_demo/PacCE.gif";
pacOESrc = "/texiao/zzsc_demo/PacOE.gif";
pacCWSrc = "/texiao/zzsc_demo/PacCW.gif";
pacOWSrc = "/texiao/zzsc_demo/PacOW.gif";

for (i = 1; i <= ammount; i++)
document.write('<DIV ID = "pill' + i + '" STYLE = "visibility: hidden; position: absolute"><IMG NAME = "pic' + i + '" SRC = "' + pillSrc + '"></DIV>');

pillW = document.pic1.width;
pillH = document.pic1.height;

document.write('<DIV ID = "pacCE" STYLE = "visibility: hidden; position: absolute"><IMG NAME = "pac1E" SRC = "' + pacCESrc + '"></DIV>');
document.write('<DIV ID = "pacOE" STYLE = "visibility: hidden; position: absolute"><IMG NAME = "pac2E" SRC = "' + pacOESrc + '"></DIV>');
document.write('<DIV ID = "pacCW" STYLE = "visibility: hidden; position: absolute"><IMG NAME = "pac1W" SRC = "' + pacCWSrc + '"></DIV>');
document.write('<DIV ID = "pacOW" STYLE = "visibility: hidden; position: absolute"><IMG NAME = "pac2W" SRC = "' + pacOWSrc + '"></DIV>');

showPacC = document.getElementById("pacCE").style;
showPacO = document.getElementById("pacOE").style;

pacCWidth = document.pac1E.width;
pacCHeight = document.pac1E.height;
pacOWidth = document.pac2E.width;
pacOHeight = document.pac2E.height;