因为是第一次写文档,还不会创建GIF动图,所以这里放一张静态的实例图,写文档有助于自己的提升,知识的回忆,和各位大神互相学习。下面直接进入组合键简单操作:
需求:要求手指同时按下上下左右中的某两个键或多个键,红色方块做出对应的移动。
分析:人应该在同一毫秒类按下两个键的几率不大,多数时候都会是一前一后按下两个键,但是这中间怎么判断我们是按下了两个键,而不是单纯的只响应成一前一后的两个键(就是把两个动作组合到一起)。
实现:既然是键盘按键,首先想到的应该是onkeydown这个函数,这里我们用绑定事件来实现,既然要讲两个按钮事件组合到一起,那我们就需要把按下的两个按钮记录下来,因为系统不会自动给你记录,系统也没发现有可以支持两个按妞的函数。下面就开始一步步实现:
var div = document.getElementsByTagName("div")[0];//获取都方块元素
var key_press = {};//创建一个json对象,用于存储按钮的对应数字代码和被按下的记录
document.addEventListener('keydown',function(ev) {
ev=ev||window.event;//这句代码是为了兼容IE浏览器而有的,要知道具体的,写代码自己测试几 遍就知道了
key_press[ev.keyCode]=true;//这句代码就是重点
//这里我用的json对象来记录多个按钮被按下的操作,如果按下这个按钮,我们就赋值为true;
});
//按照正常思维理解,按下了键,赋值为true,那我们是不是就还需要有松开按钮的动作,送开了也要给它一个值用于记录
document.addEventListener('keyup',function(ev) {
ev=ev||window.event;//同上理
key_press[ev.keyCode]=false;//这里就是如果我们松开按钮了,就把值设置为false.
});
到了这里如果你还不知道怎么写,那我建议你循环打印出json对象
for(var keys in key_press){
console.log(keys+"---"+key_press[keys]);//参考打印出来的值,有助于你结合上面的思路知道下一步应该怎么写,结果肯定是 keys是ev.keyCode的代码值(键值),true和false应该是value值
}
实现过程中,上面的循环只为了参考数据提供思路,实现过程中用不上 上面的循环
下面我们来说最后一步,既然我们记录好了同时按下的键值了(如果value值为true,说明被按下),那我们就可以通过true做条件判断,下面写的代码很冗余,但是方便理解
代码太多,直接截图上(有更简单的实现方式,效果差的不多,但是还是有一点点的小差距的,差距是我这种写法可以改变速度,那种简单的方式改变速度很麻烦)
上面的函数moveDIV();只要直接调用就可以了,不过既然提到了改变速度,所以我们需要用到定时器
调用方法 setInterval(moveDIV,50);改变这里的时间,可以改变速度
用于给写组合键没有思路的人提供点思路,代码有点丑,勿怪!
尊重原创,转载请注明:http://www.jianshu.com/writer#/notebooks/15846537/notes/16290589 侵权必究!