页面导航：首页 → 网络编程 → JavaScript → 应用技巧 → 正文内容

感觉很流畅的js实现的键盘控制（带惯性）

发布：dxy 字体：[增加减小] 类型：转载

感觉很流畅的键盘控制（带惯性）

点击运行可以看到效果:

<body> 
<div id="man" style="position:absolute;width:50px;height:40px;top:200px;left:200px;background:red"></div> 
<button onclick="alert(keyCache.length)">ask</button> 
</body> 
<script> 
var keyCache = []; 
var isCache = false; 
var cacheNum = 0;

document.onkeydown = insertKey; 
document.onkeyup = function(){if(!isCache && event.keyCode>=37&& event.keyCode<=40) keyCache.length = 0;}

window.setInterval("writeCache()", 50);

function writeCache(){ 
    if(keyCache.length==0) return;

var kc = keyCache.shift();

switch(kc){ 
        case 37: man.style.left = parseInt(man.style.left) - 5;break; 
        case 38: man.style.top = parseInt(man.style.top) - 5;break; 
        case 39: man.style.left = parseInt(man.style.left) + 5;break; 
        case 40: man.style.top = parseInt(man.style.top) + 5;break; 
    }

if(isCache) cacheNum++; 
    if(cacheNum == 5){ 
        isCache = false; 
        cacheNum = 0; 
    } 
} 
</script>

[Ctrl+A 全选提示:你可先修改部分代码,再按运行]

Tags：感觉很流畅的js实现的键盘控制（带惯性）