JS通过键盘实现div的 四向/八向 移动

四向移动
实现步骤:
        1、判断按下的方向键
        2、识别后对div的style进行更改,实现移动效果
        3、将代码封装改善
代码块:

            //obj是移动对象,speed为对象移动速度,time是setInterval参数,单位ms
            var key_move=function(obj,speed,time){
                setInterval(document.onkeydown=function(){
                    var event=event||window.event;//浏览器兼容
                    switch(event.keyCode){
                        case 37:
                            obj.style.left=obj.offsetLeft-speed+"px";
                            break;
                        case 38:
                            obj.style.top=obj.offsetTop-speed+"px";
                            break;
                        case 39:
                            obj.style.left=obj.offsetLeft+speed+"px";
                            break;
                        case 40:
                            obj.style.top=obj.offsetTop+speed+"px";
                            break;
                    }
                },time);
            }

八向移动
通常情况下,在按住第一个按键以后,再按其他按键,第一个按键就不会再发挥作用,因此,要想实现八向移动就要考虑能够同时按下俩个及以上按键并识别的方法(参考文章:js键盘按键监听-多个按键同时触发
代码块:

                //obj是移动对象,speed为对象移动速度,time是setInterval参数,单位ms
				var key_move = function (obj, speed, time) {
					var e = event || window.event; //浏览器兼容
					var key_pressed = {}; //为按键存储信息
					document.addEventListener(
						"keyup",
						function (e) {
							key_pressed[e.keyCode] = false; //按键松开时将给按键在数组当中存储的信息赋值为false
						},
						false
					);
					document.addEventListener(
						"keydown",
						function (e) {
							key_pressed[e.keyCode] = true; //按键按下时将给按键在数组当中存储的信息赋值为true
						},
						false
					);
					setInterval(function () {
						for (var key in key_pressed) {
							if (key_pressed[key]) {
								switch (parseInt(key)) {//注意这里的key值是字符串,直接传switch没反应,也不会报错
									case 37:
										alert("1");
										obj.style.left = obj.offsetLeft - speed + "px";
										break;
									case 38:
										obj.style.top = obj.offsetTop - speed + "px";
										break;
									case 39:
										obj.style.left = obj.offsetLeft + speed + "px";
										break;
									case 40:
										obj.style.top = obj.offsetTop + speed + "px";
										break;
								}
							}
						}
					}, time);
				};

代码中的四个方向键较为固定,要想使用可以灵活更改

上一篇:7-8 超速判断 (10 分)(JAVA and C)


下一篇:DAY 40 前端学习