利用键盘事件移动小方块小demo

marek 发布于2019-08-29 12:44 / 2364人阅读

摘要：思路根据键盘的值来判断是键盘上的哪个键通过定位利用键盘事件改编方块的和值通过开启定时器消除长按键盘的首次卡顿情况代码设置方向变量，后面需要用作判断设置移动的步进开启一个定时器根据方向变量进行判断按下方向键时检查方向的左上右下用语句来判断

思路：

根据键盘的unicode值来判断是键盘上的哪个键

通过定位利用键盘事件改编方块的top和left值

通过开启定时器消除长按键盘的首次卡顿情况

html

css

div{
    width:100px;
    height:100px;
    position:absolute;
    background:red;
}

js代码

window.onload=function(){
    var div=document.querySelector("div");
    var toLeft=toRight=toTop=toBottom=false;//设置方向变量，后面需要用作判断
    var step=5;//设置移动的步进
    //开启一个定时器
    var timer=setInterval(function(){
        //根据方向变量进行判断
        if(toLeft){
            div.style.left=div.offsetLeft-step+"px";
        }
        if(toRight){
            div.style.left=div.offsetLeft+step+"px";
        }
        if(toTop){
            div.style.top=div.offsetTop-step+"px";
        }
        if(toBottom){
            div.style.top=div.offsetTop+step+"px";
        }
    },30);
    
    //按下方向键时
    document.onkeydown=function(ev){
        console.log(ev.keyCode);//检查方向的unicode
        //左：37 上：38 右：39 下：40
        //用switch语句来判断按下了哪个方向键
        switch(ev.keyCode){
            case 37:toLeft=true;break;
            case 38:toTop=true;break;
            case 39:toRight=true;break;
            case 40:toBottom=true;break;
        }
    }
    
   //松开按键时
   document.onkeyup=function(ev){
       //还原对应松开的值
       switch(ev.keyCode){
            case 37:toLeft=false;break;
            case 38:toTop=false;break;
            case 39:toRight=false;break;
            case 40:toBottom=false;break;
       }
   }

}

GPU云服务器云服务器小方块微信小程序Demo ios 腾讯云小直播demo 键盘事件

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/112105.html

利用键盘事件移动小方块小demo

摘要：思路根据键盘的值来判断是键盘上的哪个键通过定位利用键盘事件改编方块的和值通过开启定时器消除长按键盘的首次卡顿情况代码设置方向变量，后面需要用作判断设置移动的步进开启一个定时器根据方向变量进行判断按下方向键时检查方向的左上右下用语句来判断思路：根据键盘的unicode值来判断是键盘上的哪个键通过定位利用键盘事件改编方块的top和left值通过开启定时器消除长按键盘的首次卡顿情况...

junbaor 2019-08-20 17:03 评论0 收藏0
利用键盘事件移动小方块小demo

摘要：思路根据键盘的值来判断是键盘上的哪个键通过定位利用键盘事件改编方块的和值通过开启定时器消除长按键盘的首次卡顿情况代码设置方向变量，后面需要用作判断设置移动的步进开启一个定时器根据方向变量进行判断按下方向键时检查方向的左上右下用语句来判断思路：根据键盘的unicode值来判断是键盘上的哪个键通过定位利用键盘事件改编方块的top和left值通过开启定时器消除长按键盘的首次卡顿情况...

GraphQuery 2019-08-01 16:57 评论0 收藏0
原生js练习题---第五课

摘要：那该如何是好原题给出思路是让事件负责标记按键就好了，而方向键的事件处理使用设个周期比较小的定时器持续监听，由于周期小，长按时就会立刻执行相应的事件处理，效果更加流畅。闪烁实现效果闪烁简单的一个定时器应用，用或都可以实现。 0x1模拟select控件实现效果：5-01模拟select控件比较简单的点击事件处理，也就处理点击选择框展示菜单、点击菜单选择、点击页面任意角落隐藏菜单这三件事...

winterdawn 2019-08-19 18:11 评论0 收藏0
全新Chrome Devtools Performance使用指南

摘要：分析每一秒的帧是用来分析动画的一个主要性能指标。轴代表了调用栈。在事件长条的右上角出，如果出现了红色小三角，说明这个事件是存在问题的，需要特别注意。双击这个带有红色小三角的的事件。运行时性能表现（runtime performance）指的是当你的页面在浏览器运行时的性能表现，而不是在下载页面的时候的表现。这篇指南将会告诉你怎么用Chrome DevTools Performance...

sumory 2019-08-21 16:59 评论0 收藏0