切换箭头键时图像停止一秒钟 [英] Image stops for a second while switching arrow keys

查看：97
本文介绍了切换箭头键时图像停止一秒钟的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有另一个问题。当我向左或向右移动主要播放器图像时，它移动得很好，除非你向右移动然后你快点并在右键仍然向下时按左键，图像停止一秒然后它决定向左移动。 Vise-Versa。

I have another question. When I move the main player image Left or Right it moves great except for when you are moving right and then you hurry and press the left key while the right key is still down, the image stops for a second and then it decides to move left. Vise-Versa.

Main.js 

var getPlatF1POSX = 0;
var getPlatF1POSY = 0;
var addVar = 0;
var addVar2 = 0;
var addVar3 = 0;
function loadGame() {
    document.getElementsByTagName("DIV")[4].style.visibility = "visible";
    addEventListener('mousemove', getData, false);
    addEventListener('keydown', movePlayer, false);
    addEventListener('keyup', stopPlayer, false);
    movePlat();
    moveP();

    document.getElementById("player").style.left = xPos + "px";
    document.getElementById("player").style.top = yPos + "px";  
}

function getData(gData) {

}

var thisThis = 1;
var moveBlock1 = 350;
var stLandT = 0;
var gPos = "";
var rightPos = false;
var leftPos = false;
function movePlat() {

}

function movePlayer(mPlayer) {
    switch (mPlayer.keyCode) {
        case 39: // RIGHT
            if (stLandT == 0 && gPos == "" && rightPos == false) {
                setThis = setTimeout(landT, 500);
                thisSet = setTimeout(moveLand, 30);
                stLandT = 1;
            }
            gPos = "RIGHT";
            rightPos = true;
            leftPos = false;
        break;

        case 37: // LEFT
            if (stLandT == 0 && gPos == "" && leftPos == false) {
                setThis = setTimeout(landT, 500);
                thisSet = setTimeout(moveLand, 30);
                stLandT = 1;
            }
            gPos = "LEFT";
            rightPos = false;
            leftPos = true;
        break;

        case 38: // UP

        break;

        case 40: // DOWN

        break;
    }
}

function stopPlayer(sPlayer) {
    switch (sPlayer.keyCode) {
        case 39:
            clearTimeout(setThis);
            clearTimeout(thisSet);
            stLandT = 0;
            gPos = "";
            rightPos = false;
            leftPos = false;
        break;
        case 37:
            clearTimeout(setThis);
            clearTimeout(thisSet);
            stLandT = 0;
            gPos = "";
            rightPos = false;
            leftPos = false;
        break;
    }
}

移动土地及玩家

var cTAdd = 0;
var setThis = 1;
var GAPlayer = 3;
function landT() {
    setThis = setTimeout(landT, 500);

    if (xPos >= 500) {
        cTAdd = Math.floor(Math.random() * 100 + 1);

        var block00 = document.createElement("img");

        if (cTAdd > 0 && cTAdd < 25) {
            block00.src = "images/sep2.png";
        }
        if (cTAdd > 25 && cTAdd < 50) {
            block00.src = "images/sep1.png";
        }
        if (cTAdd > 50 && cTAdd < 100) {
            block00.src = "images/platform00.png";
        }

        document.getElementById("land01").appendChild(block00);

        var block01 = document.createElement("img");
        var getB = block01.getBoundingClientRect();


        if (cTAdd > 0 && cTAdd < 25) {
            block01.src = "images/platform00.png";
        }
        if (cTAdd > 25 && cTAdd < 50) {
            block01.src = "images/sep2.png";
        }
        if (cTAdd > 50 && cTAdd < 100) {
            block01.src = "images/sep1.png";
        }

        document.getElementById("land00").appendChild(block01);

        GAPlayer = GAPlayer + 2;
    }

}

var thisSet = 1;
var cPlayer = 0;
var moveSpeed = 5;
var xPos = 50;
var yPos = 300;
function moveLand() {

    thisSet = setTimeout(moveLand, 30);

    if (xPos >= 500) {
        moveBlock1 = moveBlock1 - 10;
        document.getElementById("land00").style.left = moveBlock1 + "px";
        document.getElementById("land01").style.left = moveBlock1 + "px";
    }

    cPlayer++;
    if (cPlayer >= 4) 
        cPlayer = 0;
    document.images[GAPlayer].src = gPlayer[cPlayer].src;

}

function moveP() {
    var setThis = setTimeout(moveP, 10);

    if (leftPos == false) {
        xPos = xPos + moveSpeed;
    }

    if (rightPos == false) {
        xPos = xPos - moveSpeed;
    }

    document.getElementById("player").style.left = xPos + "px";
    document.getElementById("player").style.top = yPos + "px";  


    if (xPos >= 500) {
        xPos = 500; 
    }
    if (xPos <= 50) {
        xPos = 50;  
    }   
}


推荐答案

这你是怎么做的Javascript / HTML5

This is how you do it in Javascript/HTML5

theGame.js

theGame.js

var getPlatF1POSX = 0;
var getPlatF1POSY = 0;
var addVar = 0;
var addVar2 = 0;
var addVar3 = 0;

var thisThis = 1;
var moveBlock1 = 350;
var stLandT = 0;

var moveRight = false;
var moveLeft = false;
var movePL = 0;
var movePR = 0;

//////////////////////////////////////////////////////////
//
// LOAD PLATFORMS/SET KEY UP AND DOWN/SET PLAYER POS 


function loadGame() {
    document.getElementsByTagName("DIV")[4].style.visibility = "visible";
    addEventListener('mousemove', getData, false);
    addEventListener('keydown', movePlayer, false);
    addEventListener('keyup', stopPlayer, false);
    moveP();

    document.getElementById("player").style.left = xPos + "px";
    document.getElementById("player").style.top = yPos + "px";  
}

function getData(gData) {

}

//////////////////////////////////////////////////////////
//
// KEY DOWN TO MOVE PLAYER 

function movePlayer(mPlayer) {
    switch (mPlayer.keyCode) {
        case 39: // RIGHT
            if (stLandT == 0) {
                setThis = setTimeout(landT, 500);
                thisSet = setTimeout(moveLand, 30);
                stLandT = 1;    
            }

                movePL = 0;
                movePR = 1;

        break;

        case 37: // LEFT
            if (stLandT == 0) {
                setThis = setTimeout(landT, 500);
                thisSet = setTimeout(moveLand, 30);
                stLandT = 1;    
            }

                movePL = 1;
                movePR = 0;

        break;

        case 38: // UP

        break;

        case 40: // DOWN

        break;
    }
}


//////////////////////////////////////////////////////////
//
// KEY UP TO STOP PLAYER/VOID STOP AND GO GLITCH

function stopPlayer(sPlayer) {
    if (sPlayer.keyCode == 39) {
        clearTimeout(setThis);
        clearTimeout(thisSet);
        stLandT = 0;
        movePR = 0;
    }

    if (sPlayer.keyCode == 37) {
        clearTimeout(setThis);
        clearTimeout(thisSet);
        stLandT = 0;
        movePL = 0;
    }
}

landThis.js / MOVE PLAYER AND PLATFORMS

landThis.js/ MOVE PLAYER AND PLATFORMS

var cTAdd = 0;
var setThis = 1;
var GAPlayer = 3;

//////////////////////////////////////////////////////////
//
// SHOW PLATFORMS TO MOVE

function landT() {
    setThis = setTimeout(landT, 500);

    if (xPos >= 500) {
        cTAdd = Math.floor(Math.random() * 100 + 1);

        var block00 = document.createElement("img");

        if (cTAdd > 0 && cTAdd < 25) {
            block00.src = "images/sep2.png";
        }
        if (cTAdd > 25 && cTAdd < 50) {
            block00.src = "images/sep1.png";
        }
        if (cTAdd > 50 && cTAdd < 100) {
            block00.src = "images/platform00.png";
        }

        document.getElementById("land01").appendChild(block00);

        var block01 = document.createElement("img");
        var getB = block01.getBoundingClientRect();


        if (cTAdd > 0 && cTAdd < 25) {
            block01.src = "images/platform00.png";
        }
        if (cTAdd > 25 && cTAdd < 50) {
            block01.src = "images/sep2.png";
        }
        if (cTAdd > 50 && cTAdd < 100) {
            block01.src = "images/sep1.png";
        }

        document.getElementById("land00").appendChild(block01);

        GAPlayer = GAPlayer + 2;
    }

}

//////////////////////////////////////////////////////////
//
// MOVE PLATFORMS 

var thisSet = 1;
var cPlayer = 0;
var moveSpeed = 5;
var xPos = 50;
var yPos = 300;
function moveLand() {

    thisSet = setTimeout(moveLand, 30);

    if (xPos >= 500) {
        moveBlock1 = moveBlock1 - 10;
        document.getElementById("land00").style.left = moveBlock1 + "px";
        document.getElementById("land01").style.left = moveBlock1 + "px";
    }

}


//////////////////////////////////////////////////////////
//
// MOVE PLAYER

var setP = 1;
function moveP() {
    setP = setTimeout(moveP, 10);


    if (movePR == 1) {
        xPos = xPos + moveSpeed;

        cPlayer++;
        if (cPlayer >= 4) 
            cPlayer = 0;
            document.images[GAPlayer].src = gPlayer[cPlayer].src;
    }


    if (movePL == 1) {
        xPos = xPos - moveSpeed;

        cPlayer++;
        if (cPlayer >= 4) 
            cPlayer = 0;
            document.images[GAPlayer].src = gPlayer[cPlayer].src;
    }

    document.getElementById("player").style.left = xPos + "px";
    document.getElementById("player").style.top = yPos + "px";  


    if (xPos >= 500) {
        xPos = 500; 
    }
    if (xPos <= 50) {
        xPos = 50;  
    }   
}

这篇关于切换箭头键时图像停止一秒钟的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆