?? alien.htm
字號:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>
該頁使用有聲有色 6.0編輯制作
</title>
</head>
<body>
<script LANGUAGE="JavaScript">
var starttime = 100;
var ufocontrol = true;//設置是否出現復選框，此復選框表明是否出現UFO攻擊鼠標效果
var nImpactos = 3;//導彈爆炸效果gif的個數
var nOvnis = 3;//導彈和飛船個數
var Xpos = 0;//鼠標的橫坐標
var Ypos = 0;//鼠標的縱坐標
var STOPACCEL = 10;//設置飛船每次移動的極限距離，太大的話，飛船的行動看起來過于隨意。
var TAMOVNI = 20;//設置飛船與瀏覽器窗口區的邊沿極限距離
var REBOTE = 0.65;//設置飛船離開瀏覽器窗口區時的移動距離的調整系數，造成橢圓形飛行軌跡的效果
var isNetscape = navigator.appName == "Netscape";//判斷是否是NetScape
var impactoActual = 0;//導彈爆炸效果數
var ovnis = new Array();//飛船對象style前綴數組
var disparos = new Array();//導彈對象style前綴數組
var impactos = new Array();//導彈爆炸效果對象style前綴數組
var impactos2 = new Array();//導彈爆炸后效果對象style前綴數組
var activos = true;//用來指示UFOs是否可以攻擊鼠標
var flytime = 12;//導彈的飛行時間
init();
function changeUFOs(element) //判斷是否復選框被選中，選中的情況下activos為true，UFOs可以攻擊鼠標
{
activos = element.checked;
}
//初始化
function init()
{
var text;
var i = 0;
//設置導彈爆炸效果impact2.gif為某一個容器，并賦以id imp20
text = "<div id=imp20 style='POSITION: absolute;'>";
text += "<img src='impact2.gif' WIDTH=11 height=14 align=bottom></div>";
//設置導彈爆炸后效果impact1.gif為某一容器，并賦以id imp1i(i為某一具體值)
for(i = 0; i < nImpactos; i++)
{
text += "<div id=imp1" + i + " style='POSITION: absolute;'>";
text += "<img src='impact1.gif' WIDTH=23 height=31 align=bottom></div>";
}
//設置導彈bullet.gif為某一容器，并賦以id disi(i為某一具體值)
for(i = 0; i < nOvnis; i++)
{
text += "<div id=dis" + i + " style='POSITION: absolute;'>";
text += "<img src='bullet.gif' WIDTH=5 height=5 align=bottom></div>";
}
//設置外星飛船UFOs alien.gif為某一容器，并賦以id ovni(i為某一具體值)
for(i = 0; i < nOvnis; i++)
{
text += "<div id=ovn" + i + " style='POSITION: absolute;'>";
text += "<img src='alien.gif' WIDTH=29 height=24 align=bottom></div>";
}
text += "\n";
document.write(text);
//設置導彈爆炸效果的位置
for(i = 0; i < 1; i++)
{
impactos2[i] = new impacto2(i);
impactos2[i].obj.left = -25;
impactos2[i].obj.top = -25;
}
//設置導彈爆炸后效果的位置
for(i = 0; i < nImpactos; i++)
{
impactos[i] = new impacto1(i);
impactos[i].obj.left = -50;
impactos[i].obj.top = -50;
}
//設置導彈的位置
for(i = 0; i < nOvnis; i++)
{
disparos[i] = new disparo(i);
disparos[i].obj.left = -5;
disparos[i].obj.top = -5;
}
//設置UFO飛船的位置
for(i = 0; i < nOvnis; i++)
{
ovnis[i] = new ovni(i);
ovnis[i].obj.left = -29;
ovnis[i].obj.top = -24;
}
//如果ufocontrol為true，則顯示復選框。這里ufocontrol被初始化為true
if(ufocontrol)
{
document.write('<form>');
document.write('<input type=checkbox onClick="changeUFOs(this)" CHECKED>');
document.write('Turn On/Off UFOs');
document.write('</form>');
}
if(isNetscape)
{
startanimate();
}
else
{
setTimeout("startanimate()", starttime);//調用動畫過程
}
}
//設置導彈爆炸后效果的初始位置和style前綴
function impacto1(i)
{
this.X = -20;
this.Y = -20;
if(isNetscape)
{
this.obj = eval("document.imp1" + i);
}
else //IE瀏覽器
{
this.obj = eval("imp1" + i + ".style");
}
}
//根據設置瀏覽器的不同設置導彈爆炸效果的style前綴
function impacto2(i)
{
if(isNetscape) //Netscape瀏覽器
{
this.obj = eval("document.imp2" + i);
}
else //IE瀏覽器
{
this.obj = eval("imp2" + i + ".style");
}
}
//設置導彈的位置和style前綴
function disparo(i)
{
this.X = -5;
this.Y = -5;
this.dx = 0;//導彈下一次運動時的橫坐標變化量
this.dy = 0;//導彈下一次運動時的縱坐標變化量
this.estado = 0;//導彈的飛行時間
if(isNetscape)
{
this.obj = eval("document.dis" + i);
}
else //IE瀏覽器
{
this.obj = eval("dis" + i + ".style");
}
}
//設置UFO的位置和style前綴
function ovni(i)
{
this.X = -30;
this.Y = -30;
this.dx = 0;//飛船下一次運動時的橫坐標變化量
this.dy = 0;//飛船下一次運動時的縱坐標變化量
if(isNetscape)
{
this.obj = eval("document.ovn" + i);
}
else //IE瀏覽器
{
this.obj = eval("ovn" + i + ".style");
}
}
//開始動畫入口函數
function startanimate()
{
setInterval("animate()", 32);//設置動畫
}
//NetScape瀏覽器的鼠標坐標
function MoveHandlerN(e)
{
Xpos = e.pageX;
Ypos = e.pageY;
return true;
}
//IE瀏覽器的鼠標坐標
function MoveHandlerIE()
{
Xpos = window.event.x + document.body.scrollLeft;
Ypos = window.event.y + document.body.scrollTop;
}
//設置onMouseMove事件的處理函數為我們上面書寫的獲得鼠標位置的函數
if(isNetscape)
{
document.captureEvents(Event.MOUSEMOVE);
document.onMouseMove = MoveHandlerN;
}
else
{
document.onmousemove = MoveHandlerIE;
}
//動畫函數
function animate()
{
var deltaX, deltaY, height, width;
//如果允許飛船攻擊鼠標，也就是說復選框被選中
if(activos)
{
//對于每艘飛船，進行處理
for(i = 0;i < nOvnis;i++)
{
//以下為處理飛船的橫坐標
if(Xpos > ovnis[i].X) //如果鼠標的橫坐標位置大于飛船的橫坐標位置
ovnis[i].dx += (i+1)/5;//則為每個飛船設置正的橫坐標的變化量，并且每個飛船的變化量不同
else ovnis[i].dx -= (i+1)/5;//如果鼠標的橫坐標位置小于飛船的橫坐標位置，則為每個飛船設置負的橫坐標的變化量
//以下代碼檢查如果飛船移動距離比我們設置的極限大則用極限距離來代替，否則會導致飛船的動作過大
if(ovnis[i].dx > STOPACCEL)
ovnis[i].dx = STOPACCEL;
if(-ovnis[i].dx > STOPACCEL)
ovnis[i].dx = -STOPACCEL;
//以下為處理飛船的縱坐標
if(Ypos > ovnis[i].Y)
ovnis[i].dy += (i+1)/5;
else ovnis[i].dy -= (i+1)/5;
if(ovnis[i].dy > STOPACCEL)
ovnis[i].dy = STOPACCEL;
if(-ovnis[i].dy > STOPACCEL)
ovnis[i].dy = -STOPACCEL;
//設置飛船移動到的位置
ovnis[i].X += ovnis[i].dx;
ovnis[i].Y += ovnis[i].dy;
//觀察鼠標和飛船的位置關系，設置飛船的走向
deltaX = Xpos - ovnis[i].X - 10;
deltaY = Ypos - ovnis[i].Y - 10;
//以下為設置導彈的移動
//如果飛船與鼠標的位置不是太遠，且導彈不在飛行中，則發射導彈
if((disparos[i].estado == 0)&&((Math.abs(deltaX)+(Math.abs(deltaY)))<100))
{
disparos[i].dx = deltaX/10;//導彈在橫坐標方向上的移動距離
disparos[i].dy = deltaY/10;//導彈在縱坐標方向上的移動距離
disparos[i].estado++;//導彈飛行時間加上1
}
//如果導彈沒到飛行時間極限，則設置它的下一步飛行
else if((disparos[i].estado > 0)&&(disparos[i].estado < flytime))
{
disparos[i].X += disparos[i].dx;
disparos[i].Y += disparos[i].dy;
disparos[i].estado++;//導彈飛行時間加上1
}
//否則導彈的飛行時間以到或者鼠標與飛船的距離太遠，不發導彈，則執行下面的代碼
else
{
//如果是導彈的飛行時間以到的情況
if(disparos[i].estado != 0)
{
impactoActual++;//則導彈爆炸，爆炸效果數加一
if(impactoActual >= nImpactos) //如果爆炸效果數到達設定的數目，則設為1
{
impactoActual = 1;
}
//設置導彈爆炸后效果的位置，意思是某一導彈爆炸，則以前的某導彈的爆炸效果已到期，轉為爆炸后效果
impactos2[0].obj.left = impactos[impactoActual].X + 5;
impactos2[0].obj.top = impactos[impactoActual].Y + 13;
//設置新的導彈爆炸效果的位置
impactos[impactoActual].X = disparos[i].X - 10;
impactos[impactoActual].Y = disparos[i].Y - 14;
impactos[impactoActual].obj.left = impactos[impactoActual].X;
impactos[impactoActual].obj.top = impactos[impactoActual].Y;
}
//新的導彈發出
disparos[i].X = ovnis[i].X+10;
disparos[i].Y = ovnis[i].Y+10;
disparos[i].estado = 0;
}
//以下設置飛船的移動的一些例外情況，在它們這種情況下，飛船的位置需要進一步的調整
//獲得瀏覽器窗口區的大小
if(isNetscape)
{
height = window.innerHeight + document.scrollTop;
width = window.innerWidth + document.scrollLeft;
}
else
{
height = document.body.clientHeight + document.body.scrollTop;
width = document.body.clientWidth + document.body.scrollLeft;
}
//如果飛船過于靠近瀏覽器窗口區的下邊沿，則向上飛
if(ovnis[i].Y >= height - TAMOVNI - 1)
{
if(ovnis[i].dy > 0)
{
ovnis[i].dy = REBOTE * -ovnis[i].dy;//設置飛船向下移動的距離為負，從而移動方向向上
}
ovnis[i].Y = height - TAMOVNI - 1;//調整飛船的縱坐標值，改善它和瀏覽器窗口區下邊沿的接近程度
}
//如果飛船過于接近瀏覽器窗口區的右邊沿，則向左飛
if(ovnis[i].X >= width - TAMOVNI)
{
if(ovnis[i].dx > 0)
{
ovnis[i].dx = REBOTE * -ovnis[i].dx;//設置飛船向右移動的距離為負，從而移動方向向左
}
ovnis[i].X = width - TAMOVNI - 1;//調整飛船的橫坐標值，改善它和瀏覽器窗口區右邊沿的接近程度
}
//如果飛船位置在瀏覽器窗口區的左邊沿更左位置，則向右飛
if(ovnis[i].X < 0)
{
if(ovnis[i].dx < 0)
{
ovnis[i].dx = REBOTE * -ovnis[i].dx;//向右飛
}
ovnis[i].X = 0;//設置飛船橫坐標為0
}
//如果飛船位置在瀏覽器窗口區的上邊沿更上位置，則向下飛
if(ovnis[i].Y < 0)
{
if(ovnis[i].dy < 0)
{
ovnis[i].dy = REBOTE * -ovnis[i].dy;
}
ovnis[i].Y = 0;//設置飛船縱坐標為0
}
//設置飛船的位置
ovnis[i].obj.left = ovnis[i].X;
ovnis[i].obj.top = ovnis[i].Y;
disparos[i].obj.left = disparos[i].X;
disparos[i].obj.top = disparos[i].Y;
}
}
//如果設置飛船不能攻擊鼠標，則隱藏飛船
else
{
if(impactoActual != nImpactos+1)
{
//隱藏所有的飛船，把它們放到瀏覽器窗口區的左上角
for(i = 0;i < nOvnis;i++)
{
ovnis[i].obj.left = -50;
ovnis[i].obj.top = -50;
disparos[i].obj.left = -10;
disparos[i].obj.top = -10;
}
//隱藏所有的導彈爆炸效果，也放到左上角
for(i = 1;i < nImpactos;i++)
{
impactos[i].obj.left = -20;
impactos[i].obj.top = -20;
}
//隱藏導彈爆炸后效果，放到左上角
impactos2[0].obj.left = -20;
impactos2[0].obj.top = -20;
impactoActual = nImpactos+1;//多一個導彈爆炸效果(即上面的爆炸后效果)
}
}
}
<!--End-->
</script>
</body>
</html>
?? 快捷鍵說明
復制代碼
Ctrl + C
搜索代碼
Ctrl + F
全屏模式
F11
切換主題
Ctrl + Shift + D
顯示快捷鍵
?
增大字號
Ctrl + =
減小字號
Ctrl + -