如何使用两组键位WASD 和上下左右键控制两个div框框

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>键盘移动div</title></head>... <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>键盘移动div</title>
</head>
<body>
<div id="move" style="width:100px;height:100px;background:gray;position:absolute;left:100px;top:100px"></div>

<div id="move1" style="width:100px;height:100px;background:gray;position:absolute;left:300px;top:300px"></div>

<script type="text/javascript">
var step=10;
var inte=null;//定时器变量
var move=document.getElementById('move');
var move1=document.getElementById('move1');

window.onkeydown=function(e){
// alert('绑定事件');
console.log(e);
c=e.keyCode;
console.log(c);
//检测案件信息

//w87 a65/ s83 d68 space 32

switch(c){
case 65:
case 37:
// alert('37');
moveLeft();
break;
case 39:
case 68:
moveRight();
break;
case 87:
case 38:
moveUp();
break;
case 83:
case 40:
moveDown();
break;
}

}
window.onkeyup=function(){
clearInterval(inte);
inte=null;
}

function moveLeft(){
if(inte!=null) return;
//计算新的Left
inte=setInterval(function(){
var l=move.offsetLeft;
var newLeft=l-step;
if(c>40){
move.style.left=newLeft+'px';
}else{
move1.style.left=newLeft+'px';
}

},10)

}

//右移动
function moveRight(){

if(inte !=null) return;
//获取当前元素
inte=setInterval(function(){
var l=move.offsetLeft;
var newLeft=l+step;
if(c>40){
move.style.left=newLeft+'px';
}else{
move1.style.left=newLeft+'px';
}
},10)
}

//向上
function moveUp(){
if(inte !=null) return;
//清空定时器
// clearInterval(inte);
inte=setInterval(function(){
var t=move.offsetTop;
var newT=t - step;
if(c>40){
move.style.top=newT+'px';
}
move1.style.top=newT+'px';
},10)
}

function moveDown(){
if(inte !=null) return;
inte=setInterval(function(){
var t=move.offsetTop;
var newT=t+step;
if(c>40){
move.style.top=newT+'px';
}
move1.style.top=newT+'px';
},10)
}

</script>
</body>
</html>就是想通过AWSD 和键盘上下左右键分别控制一个div 展开

 我来答

1个回答

#热议# 为什么说不要把裤子提到肚脐眼？

JIA丨XIAN
推荐于2016-06-25 · TA获得超过630个赞

知道小有建树答主

回答量：475

采纳率：20%

帮助的人：319万

我也去答题访问个人页

关注

展开全部

重新写了一个

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body{
            padding: 0;
            margin: 0;
        }
     卜凯   御弊迹#div1{
            position: absolute;
            width: 200px;
            height: 200px;
            background-color: #FFB355;
        }

        #div2{
            position: absolute;
            left: 200px;
            width: 200px;
            height: 200px;
            background-color: #6688cc;
        }

    </style>
</head>
<body onkeydown="press()">
    <div id="div1">箭头控制</div>
  镇并  <div id="div2">字母控制</div>
    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    <!--<script src="jquery-2.1.1.min.js"></script>-->
    <script>
        var isArrow = false, //点击的是否为箭头
                size = 10; //每次移动距离
        var  div1 = $('#div1'),
                div1L = div1.offset().left, //与屏幕左边的距离
                div1T = div1.offset().top;  //与屏幕顶部的距离


        var  div2 = $('#div2'),
                div2L = div2.offset().left, //与屏幕左边的距离
                div2T = div2.offset().top;  //与屏幕顶部的距离

        function press(){
            var code = window.event.keyCode;
            switch(code){
                case 38:
                //↑
                    div1T -= size;
                    isArrow = true;
                    break;
                case 40:
                //↓
                    div1T += size;
                    isArrow = true;
                    break;
                case 37:
                //←
                    div1L -= size;
                    isArrow = true;
                    break;
                case 39:
                //→
                    div1L += size;
                    isArrow = true;
                    break;
                case 87:
                //W
                    div2T -= size;
                    isArrow = false;
                    break;
                case 83:
                //S
                    div2T += size;
                    isArrow = false;
                    break;
                case 65:
                //A
                    div2L -= size;
                    isArrow = false;
                    break;
                case 68:
                //D
                    div2L += size;
                    isArrow = false;
                    break;
            }

            if(isArrow){
                div1.css({'top':div1T,'left':div1L});
            }else{
                div2.css({'top':div2T,'left':div2L});
            }

        }
    </script>
</body>
</html>

已赞过 已踩过<

评论收起

推荐律师服务：若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询

如何使用两组键位WASD 和上下左右键控制两个div框框

其他类似问题

为你推荐：