键盘移动div样例

最新推荐文章于 2023-08-09 16:08:28 发布

不仅是记忆

最新推荐文章于 2023-08-09 16:08:28 发布

阅读量350

点赞数

分类专栏： js 文章标签：键盘移动div 游戏操作

本文链接：https://blog.csdn.net/a916123063/article/details/51769363

版权

js 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>键盘移动div</title>
    <style type="text/css">
        *{margin:0px;padding:0px;}
        #move{width:200px;height:200px;background:orange;font-family:microsoft yahei;position:absolute;top:200px;}
    </style>
 
</head>
<body>
    <div id="move"></div>
    <script type="text/javascript">
    var step = 10;//我的世界
    var move = document.getElementById('move');
    var inte = null;//定时器变量
 
    window.onkeypress = function(e){
        var c = e.keyCode;
        //检测按键信息
        switch(c){
            case 37:
                moveLeft();
                break;
            case 38:
                moveUp();
                break;
            case 39:
                moveRight();
                break;
            case 40:
                moveDown();
                break;
        }
    }
 
    window.onkeyup = function(){
        //清空定时器
        clearInterval(inte);
        inte = null;
    }
 
    //向左移动函数封装
    function moveLeft(){
        if(inte != null) return ;
        inte = setInterval(function(){
            //获取当前元素的left值
            var l = move.offsetLeft;
            //计算新的left
            var newLeft = l - step;
            //设置细腻的left值
            move.style.left = newLeft + 'px';
        },10)
 
    }
 
    //向右移动
    function moveRight(){
        //判断当前页面是否有定时器
        if(inte != null) return ;
        inte = setInterval(function(){
            //获取当前元素的left值
            var l = move.offsetLeft;
            //计算新的left
            var newLeft = l + step;
            //设置细腻的left值
            move.style.left = newLeft + 'px';
        },10)
 
    }
 
 
    //向上
    function moveUp(){
        //
        var t = move.offsetTop;
        var newT = t - step;
        move.style.top = newT + 'px';
    }
 
    //向下
    function moveDown(){
        var t = move.offsetTop;
        var newT = t + step;
        move.style.top = newT + 'px';
    }
 
 
    </script>
</body>
</html>

不仅是记忆

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
键盘移动div样例

键盘移动div *{margin:0px;padding:0px;} #move{width:200px;height:200px;background:orange;font-family:microsoft yahei;position:absolute;top:200px;} var step = 10;
复制链接

扫一扫