方向控制方块运动

最新推荐文章于 2022-04-05 22:23:17 发布

i鲸落

最新推荐文章于 2022-04-05 22:23:17 发布

阅读量387

点赞数

本文链接：https://blog.csdn.net/XinYe666666/article/details/80868200

版权

效果：上下左右控制其方向运动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 50px;
            height: 50px;
            background: #00A7F6;
            position: absolute;
        }
    </style>
</head>
<body>
<div></div>
<script>

 //创建各个方向条件判断变量是为了使其不再移动是卡顿

var oDiv= document. getElementsByTagName( "div")[ 0]; // 创建各个方向条件判断初始变量 var t = false; var l = false; var r = false; var b = false; document.οnkeydοwn= function (ev) { var even = window.event||ev; var key = even.keyCode; // 当按下对应方向键时，对应变量为 true switch ( key){ case 37: l= true; break; case 38: t= true; break; case 39: r= true; break; case 40: b= true; break; } } // 设置一个定时，时间为 10 左右 setInterval( fn, 10); function fn() { // 当其中一个条件为 true 时，则执行当前函数（移动对应方向） if( l){ oDiv. style. left = oDiv.offsetLeft- 2+ "px"; } else if( t){ oDiv. style. top = oDiv.offsetTop- 2+ "px"; } else if( r){ oDiv. style. left = oDiv.offsetLeft+ 2+ "px"; } else if( b){ oDiv. style. top = oDiv.offsetTop+ 2+ "px"; } } // 执行完后，所有对应变量恢复为 false ，保持静止不动 document.οnkeyup= function (ev) { var even = window.event || ev; var key = even.keyCode; switch ( key){ case 37: l= false; break; case 38: t= false; break; case 39: r= false; break; case 40: b= false; break; } } </ script > </ body > </ html >