HTML+CSS+JavaScript实现键盘对div元素的移动（超详细）

一、目标

1、小方块能够通过WASD控制移动

2、设置一个边框，让小方块只能在其中移动

3、当小方块超过边界时，从相反方向移动出来

二、步骤

1、创建HTML元素

2、用CSS设置边框和小方块样式

3、键盘响应

4、方块移动

5、超过边框后移动效果

三、代码

1、HTML

​ 需要设置一个盒子类，为小方块活动范围

​ 在盒子里设置一个div元素，为小方块

<div class="box"><!--边框-->
    <div class="rectangle"></div><!--方块元素-->
</div>

2、CSS

​ 设置边框属性和小方块属性

​ 其中必须要注意的是，top=0;

​ 原因：

​ 第一，当键盘响应改变方块属性时，大小是多少px,

当没有设置大小时，改变不了css里的属性；

​ 第二，最好默认为0，不然在判断边框时会变得复杂很多

.box{
    position: absolute;
    margin-top: 200px;
    margin-left: 400px;
    width: 1200px;
    height: 600px;
    border: 1px solid black;
}
.rectangle{
    position: absolute;
    width: 30px;
    height: 30px;
    background: pink;
    top:0;/*注意！*/
}

3、JS

定时器刷新：

​ 每隔一定时间刷新，如果有按键响应，则小方块坐标改变

​ 改变小方块的坐标即改变小方块style属性，改变小方块界面左右上下的距离

值得注意的是，到右边框的距离就是边框距离-到左边框距离

键盘响应：

​ 用switch语句实现按下WASD的不同结果

let divs=document.querySelector('.rectangle');

const l=30;//方块长度
const x=30;//每次移动长度
const timer=300;//刷新时间
let toTop,toLeft,toRight,toBottom=false;

//键盘响应
document.addEventListener('keypress',function (e){
    switch (e.code) {
        case 'KeyW':
            toTop=true;
            toLeft = toRight = toBottom = false;
            break;
        case 'KeyA':
            toLeft=true;
            toTop=toRight=toBottom=false;
            break;
        case 'KeyS':
            toBottom=true;
            toTop=toLeft=toRight=false;
            break;
        case 'KeyD':
            toRight=true;
            toTop=toLeft=toBottom=false;
            break;
    }
});

//设置定时器刷新移动
setInterval(function (){
    if(toLeft){
        if(divs.offsetLeft===0){//当方块到达左边距时
            divs.style.left=divs.offsetLeft+1200+'px';//方块从右边界运动出来
        }
        else{
            divs.style.left=divs.offsetLeft-x+'px';//方块正常移动
        }
    }
    if(toTop){
        if(divs.offsetTop===0){
            divs.style.top=divs.offsetTop+600+'px';
        }
        else{
            divs.style.top=divs.offsetTop-x+'px';
        }
    }
    if(toRight){
        if(divs.offsetLeft===1200-l){//判断是否到右边距
            divs.style.left=divs.offsetLeft-1200+'px';
        }
        else{
            divs.style.left=divs.offsetLeft+x+'px';
        }
    }
    if(toBottom){
        if(divs.offsetTop===600-l){
            divs.style.top=divs.offsetTop-600+'px';
        }
        else{
            divs.style.top=divs.offsetTop+x+'px';
        }
    }
},timer);