123.尚硅谷_JS基础_键盘移动div

他们说这个练习，这个练习呢，其实比较简单啊，就是什么呀，让我们使用这个D，使用这个键盘来控制这个D的一个移动，你做的时候一定不着急啊，一定要这个细心一点，尤其是你第一次整的时候啊，细心一点，那现在我们来看，那既然要使用这个键盘来控制div，那我先来一个这个window，点一个onload，等于function先整个它，那这块呢，要用键盘控制div，我们来先要干嘛呀，是不是要先要绑定这么一个键盘，这个按键的一个按下这么一个事件呀，诶这个事件给谁绑定，毫无疑问是不是给document呀，诶为我们这个document来绑定一个这个按键按下的这个事件，因为这块你也没有别的东西可以绑div也绑不了，对吧，所以只能来一个document，点一个on key down，等于一个function绑定，然后呢，我这来一个这个invent，诶，Invent，然后等于个这个invent，或者是一个window，点一个这个invent啊window.invent。

那接下来呢，诶，那按键事件绑定完了，那我要看一下cancel.log一个invent，点一个这个key code，我这边要看看这个按键的这个编码啊，也是来检查一下我们这个，诶功能这个小函数绑没绑定好，我这一刷新来一个，诶来一个这个上。38是吧，下40，诶左37，右39，诶那其实发现什么了，诶左是37，上是38，右是39，下是40，是不是三十七三十八，三十九四十啊，它是按照一个顺时针顺序转的吧？诶顺针的顺序转的啊我们来写一下，在这我们来发现这个K扣的这么一个规则，哎，它是一个37 38，三十九四十三十七是谁呀？诶左38是上啊是认针的，然后39是哎右啊右右啊40是下，是不是这一规则呀？哎，左上右下这么一个这个顺时针方向转的，那好了，那现在K扣都没有了，那接下来我是来判断一下它这个方向了，哎，方向了啊，那这块你可以干嘛呀，最简单的你可以来一个这个if if我们这个key，呃，If，我们这个E点一个key code key code等等于谁呢？等等于37，这是。

不就左呀，要注意啊，用if行，但是这块用if稍微有点麻烦，因为你们发现其实我这是不是都是做那个相等的判断呀，哎，或者说全等的判断，那其实最简单用谁呀？对用我们这个switcher kiss啊Switch kiss来还记得吗？Switch每一次就是每一次看到跟第一次看一样是吧？来Switch里边我来一个这个invent，点一个这个keyk code，然后来个什么呢？Kiss kiss什么呀，Case，我们这个37 37我这来一个吧，Alert 37我们这来一个，这是先alert啊，我们这向向左啊向左，然后呢，再来一个，咱们按顺序写吧，37完了，我们来一个30，来一个右吧，又是39CASE case来一个这个39 39我们来一个这个alert一个这个哎，向右，然后再来一个这个，诶，不要忘了谁啊，哎，Break啊不要忘了break这块也是来。

一个这个break，然后再来一个case是下边是呃三十八三十八我们是什么呀？向上啊向上alert一个这个向上，然后还是来一个这个break，最后我们来一什么呢？来一个这个case一个哎四十四十我们这是向向下啊alert一个这个向下，然后也是最后来一个这个break这块我是不是就判断完了呀，来来保存，我们先看看行不行，一刷新摁个上走，你是不是向上啊，摁个下咔向下摁个左向左摁个右是不是向右啊，诶判断都判断完了，但是你这ler它不行，我们是希望通过这个方线是不是控制它去移动啊，哎移动，那所以我们来一个个看，那我要向左移，这一块是向左，向左就是干嘛呀，向左是不是它，那我要改变left的值啊，Life的值增大的时候，它干嘛呀，是不是向右移啊，那我要向左移，是不是left的值。

减小啊，诶减小，所以这块呢，是我们这个life的值，诶减小怎么写，直接来一个叫做BOX1BOX1.1个style，点一个left，诶等于我在干嘛呀，是不是在它原来值的基础上进行这个减小啊，原来值多少啊？哎，我们看看啊，Box1.1个哎，Of s left，这是它原来值啊来什么呢？减一个十，诶是不是在原来知基础上减十啊，然后加上一个PX是不是就OK了呀？诶我们先看看行不行啊，一刷新往左移是就就移没了，哎，就移没了啊向左移动，然后呢，简单了，向右移呢？向右移是不是加时啊，哎，加十啊来这一保存，然后注定向上移改谁呀？哎，向上移是不是改这个top呀？哎。

来一个这个top top来一个off set top是不是减十啊，哎，向上移是减，那向下移呢，是是不是加呀，哎，这来一个加时就OK了啊，加时就OK了，来我们看看行不行，保存一刷新来向右向下向左。向上是不是就OK了呀？哎，这一块就OK了啊好，那这块我们这个功能就算是给它完成了，然后我们再看给它调整一下啊，现在我们这个十是每一次是不是移十了呀，这十就相当于什么呀，一个速度，哎，那假设我想需要这个速度快一点，我是把这值改一下啊，但是我这么改它有点麻烦，我是不是得一个一个改啊，诶那我希望来干嘛呢？诶我来定义一个变量，定义一个这个变量来干嘛呢？来表示我们这个移动的一个速度，直接Y一个4P的等于什么呢？等于一个十，然后我这不减十了，减什么呢？减P，哎这也是加SP的加的，加SP1保存是不是就OK了呀？诶这回我们看效果是一样的，但是好处在哪啊？哎，我这改我移动快点，我改成20，我是不是改一个地方都改了呀，哎，一刷新走你是不是都变了呀，哎，好，那现在呢，我希望做这么一个功能干嘛呢。

是加速啊，诶当用户按了我们这个CTRL以后，我们这什么呀？诶速度加快怎么办呀，我是要判断一下啊哎，一个if什么呀，E问点一个这个ctrl key，诶如果它为true证明什么，是不是你摁了CTRL啊，我让你干嘛呢？4P的等于一个50，诶如果你摁了我是让你变成50啊好，那这个看效果啊，一刷新现在我没摁CTRL，慢慢悠悠的慢慢悠对吧，来摁CTRL。

诶是不是是不是很窜呀，是吧，然后你觉得这东西好像有点慢，还是来个五百五百感觉一下就看不见它了是吧，那一下就就嗖的一下了是吧，跟那个闪电似的哈。看见了吧，嗯，很快的感觉是吧，就这种感觉啊，这种感觉，呃，一个SP啊好，那这块咱们这个东西就给它做完了啊，做完了，但是做完了是做完了啊，咱们这块呢，其实它会有一个小的缺陷，什么小的缺陷呢，看着啊你们说了，刚才我们说当我一直按着on key down的时候，这个事键是不是会会连续触发呀，但是第一次它会稍微的卡一点，所以你看我这当我按着这个左键不放的时候，按按着左键不放的时候，它会连续往往这边走，但是你发现什么呢？

走下不是走一点卡一下走一卡我停了是吧，主要看第一下啊，主要看第一下，看第一下，这第一下是不是要先卡一下，然后才连续走啊，诶第一下要先卡一下，然后连续走，但是对于咱们这个吧，其实呢，无所谓，卡也就卡了啊，开下就卡了，但是什么情况呢？假设你这做的是一个什么呀，是个游戏，游戏这东西就很重要了，怎么重要呢？你可能小飞机是吧，上边正往下飞子弹呢，你说我赶紧躲，他跟着卡着了，你是不是就爆炸了，哎，所以我们需要干嘛呢？我们希望他是不是流畅一点啊，流畅一点，但是现在我们这事儿呢，还还做不到啊，还做不到这等咱们等到们讲完这个什么呀，定时定时要用的时候，就可以去让它干嘛呀，变得流畅一些啊，零流畅些，所以你现在知道有这么一个问题，到时候我们会去修改它啊，会修改它好这个练习呢，我们就给他说完了啊，我们来听一下。