堆栈内存溢出
  繁体   English   中英

切换箭头键时图像停止一秒钟

[英]Image stops for a second while switching arrow keys

 原文  2015-11-02 22:10:19  4   2    javascript/ css/ html

问题描述

我有另一个问题。 当我将主要玩家图像向左或向右移动时，它移动得很好，除非你向右移动然后你赶紧按下左键，而右键仍然按下，图像停止一秒钟，然后它决定向左移动. 反之亦然。

主程序

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;  
    }   
}

2 个解决方案

解决方案1
 0  2015-11-02 23:21:34

这是因为无论按下哪个键，您都会停止播放器。 您应该存储上次按下的键，而不是按下键时，您需要检查最后一个键是否被释放。

我很难调试你的代码，所以我在 jQuery 中做了它（并且遇到了和你一样的麻烦）： 

 var game = { settings: { moveSpeed: 5, // 5 milliseconds, 200fps moveBy: 2 // 2 pixels }, land: null, landWidth: null, landLeft: null, viewport: null, viewportWidth: null, landMinLeft: null, init: function() { game.land = $('.land'); game.landWidth = game.land.width(); game.landLeft = game.land.position().left; game.viewport = $('.viewport'); game.viewportWidth = game.viewport.width(); game.landMinLeft = -(game.landWidth-game.viewportWidth); }, movingInterval: null, lastKey: null, keyDown: function (e) { switch (e.keyCode) { case 39: // RIGHT game.lastKey = e.keyCode; clearInterval( game.movingInterval ); game.movingInterval = setInterval( function() { game.move('right'); }, game.settings.moveSpeed); break; case 37: // LEFT game.lastKey = e.keyCode; clearInterval( game.movingInterval ); game.movingInterval = setInterval( function() { game.move('left'); }, game.settings.moveSpeed); break; } }, keyUp: function(e) { if( e.keyCode==game.lastKey ) { game.stopMoving(); }; }, move: function( direction ) { switch( direction ) { case 'left': var newLeft = game.land.position().left+game.settings.moveBy; if( newLeft>0 ) newLeft=0; game.land.css({ 'left': newLeft+'px' }); break; case 'right': var newLeft = game.land.position().left-game.settings.moveBy; if( newLeft<game.landMinLeft ) newLeft=game.landMinLeft; game.land.css({ 'left': newLeft+'px' }); break; }; }, stopMoving: function() { clearInterval( game.movingInterval ); } }; game.init(); $(window).on('keydown', game.keyDown); $(window).on('keyup', game.keyUp);
 * { margin: 0; padding: 0; box-sizing: border-box; } body, html, .viewport { width: 100%; height: 100%; } .viewport { position: relative; overflow: hidden; } .land { position: absolute; left: 0; top: 0; width: 2300px; height: 200px; background: url('//dummyimage.com/2300x400/000/fff&text=Mario+is+great!+Mario+is+our+hero!+We+love+you+mario!') no-repeat center center; background-size: cover; will-change: left; }
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="viewport"> <div class="land"></div> </div>

也在操场上。

解决方案2
 0 已采纳  2015-11-03 05:57:51

这就是你在 Javascript/HTML5 中的做法

游戏.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/ 移动播放器和平台

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;  
    }   
}

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 图像数组和箭头键 使用箭头键在画布上移动图像 JavaScript使用箭头键移动图像 反应js如何防止箭头键切换控件 使用onKeyUp时在javascript中禁用箭头键 使用Cbp图像滑块的键盘箭头键导航 如何使用箭头键旋转/变换图像 AngularJS使用箭头键浏览图像轮播 使用 JavaScript 使用箭头键移动图像 使用jS在div内用箭头键移动图像
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM