写一个小球用键盘上下左右键控制

首先在body里面创建一个

 <div class="box"></div>

其次设置box的样式

 .box{width:100px;height:100px;backgroundred;positionabsolute;left:0;top:0;}

,最后获取节点

var obox = document.querySelector(".box")
 
 
 document.onkeydown = function(eve){ //设置鼠标移动事件和键盘事件
            var e = eve || window.event;
            var code = e.keyCode || e.which;
            switch(code){ //最后用switch判断
                case 37:
                    // 设置left     =    获取当前  -   10
                    obox.style.left = obox.offsetLeft-10 + "px";break; //左
                case 38:
                    obox.style.top = obox.offsetTop-10 + "px";break; //上
                case 39:
                    obox.style.left = obox.offsetLeft+10 + "px";break; //右
                case 40:
                    obox.style.top = obox.offsetTop+10 + "px";break; //下
            }
        }
    
    </script>

posted on 2019-09-06 20:48  小小阿沈杭  阅读(155)  评论(0编辑  收藏  举报

导航