📄 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 + -