1、会飞的小鸟 ,按键盘的上下左右键,小鸟会上下左右的飞

jq案例中遇到的知识点总结(会飞的小鸟和三级联动)-LMLPHP

知识点:1、keyCode 键盘按键对应的数字 比如 左上右下键 对应 37 38 39 40;

2、小鸟的位置:var bBird=$("#bird").offset();

屏幕宽度:var wWidth=$(window).width();

屏幕高度:var wHeight=$(window).height();

小鸟的宽度:var bWidth=$("#bird").width();

小鸟的高度:var bHeight=$("#bird").height();

3、键盘按下事件触发$(body).keydown(function(e){});//e.keyCode即按下的键

4、规定小鸟的步长 step = 10;

5、用switch(kCode){

case 37:break;

case 38:break;

case 39:break;

case 40:break;

}

分别判断按键后小鸟的位置

当按39小鸟向右飞时,小鸟的位置 += step;并判断如果小鸟的位置大于了屏幕的宽度,小鸟回到屏幕左边,对应代码如下:

if(bBird >=wWidth){bBird = -bWidth};

其他同理;

判断后输出 :$("#bird").offset(bBird);

6、小鸟头的方位,如果向右飞头向右,向左飞头向左...

css 设置小鸟的方位 .direction-37{transform:rotateY(180deg)};direction-38{transform:rotate(-30deg)};direction-40{transform:rotate(60deg)};

设定rCode =39;

让keycode与rCode比较,如果不相等则移除原来的class 加了新的class代码如下:

if(e.keycode !=rCode){$("#bBidr").removeClass().addClass("direction-"+e.keycode)};

rCode=e.keycode;

05-15 19:42