复习落山机

和上个例子对照一下,总结不同写法。然后自己改版练习一遍,在窗口上面加一选择框,选 1 到 18,作为飞机个数,选择后立即生效。

Document

.relative{

position: relative;

background-color: black;

height:600px;

overflow: hidden;

}

.plane{

background-image:url('planes.png');

width:76px;

height:97px;

position: absolute;

top:-100px;

}

My plane

varN=18;

varplaneSpeed=[];

varplaneTop=[];

$(function(){

createPlanes(N);

for(vari=;i

setPlaneX(i);

}

setInterval(moveAllPlanes,10);//掉下去

});

functioncreatePlanes(num) {

varbox=$('.relative');

for(vari=;i

planeSpeed[i]=3*Math.random()+0.5;

planeTop[i]=-100;

vars='

';

varx=-i%6,y=-parseInt(i/6);

varplane=$(s).css({'background-position':x*76+'px '+y*97+'px'});

box.append(plane);

}

}

functionmovePlane(which) {

planeTop[which]+=planeSpeed[which];

$('#'+which).css();

if(planeTop[which]>600) {

planeTop[which]=-100;

setPlaneX(which);

}

}

functionmoveAllPlanes() {

for(vari=;i

movePlane(i);

}

}

////设置飞机x坐标为随机数

functionsetPlaneX(pid) {

varplaneWidth=76;

varwindowWidth=$('.relative').width();

varx=Math.random()*(windowWidth-planeWidth);

$('#'+pid).css();

}

  • 发表于:
  • 原文链接http://kuaibao.qq.com/s/20180410G1XBP100?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 yunjia_community@tencent.com 删除。

同媒体快讯

扫码关注云+社区

领取腾讯云代金券