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

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

知识点：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;