zoukankan      html  css  js  c++  java
  • [转载]感觉很流畅的键盘控制(带惯性)

     1<body>
     2<div id="man" style="position:absolute;50px;height:40px;top:200px;left:200px;background:red"></div>
     3<button onclick="alert(keyCache.length)">ask</button>
     4</body>
     5<script>
     6var keyCache = [];
     7var isCache = false;
     8var cacheNum = 0;
     9
    10document.onkeydown = insertKey;
    11document.onkeyup = function(){if(!isCache && event.keyCode>=37&& event.keyCode<=40) keyCache.length = 0;}
    12
    13function insertKey(){
    14    var kc = event.keyCode;
    15    if(kc>=37 && kc<=40){
    16        if(kc!=keyCache[keyCache.length-1]){
    17            keyCache.length = 0;
    18            keyCache.push(kc,kc,kc,kc,kc,kc)   //保证流畅多注入6个
    19            isCache = true;
    20        }

    21        keyCache.push(kc);
    22    }

    23}

    24
    25window.setInterval("writeCache()"50);
    26
    27function writeCache(){
    28    if(keyCache.length==0return;
    29
    30    var kc = keyCache.shift();
    31
    32    switch(kc){
    33        case 37: man.style.left = parseInt(man.style.left) - 5;break;
    34        case 38: man.style.top = parseInt(man.style.top) - 5;break;
    35        case 39: man.style.left = parseInt(man.style.left) + 5;break;
    36        case 40: man.style.top = parseInt(man.style.top) + 5;break;
    37    }

    38
    39    if(isCache) cacheNum++;
    40    if(cacheNum == 5){
    41        isCache = false;
    42        cacheNum = 0;
    43    }

    44}

    45</script>
  • 相关阅读:
    HTML5 实现Link跳线效果
    在TWaver的Tree节点上画线
    用TWaver加载大型游戏场景一例
    22万个木箱!TWaver 3D极限压榨
    如何在MONO 3D寻找最短路路径
    如何创建TWaver 3D的轮廓选中效果
    巧用TWaver 3D 矢量图形功能
    如何实现TWaver 3D颜色渐变
    HDU 1390 Binary Numbers
    HDU 1328 IBM Minus One
  • 原文地址:https://www.cnblogs.com/jenry/p/794777.html
Copyright © 2011-2022 走看看