Несколько действий Jquery, запущенных одновременно

0

Пример для этого вопроса: http://jsfiddle.net/4ac5u/

var x = 0;
var y = 0;
$(document).keydown(function(e){
    if (e.keyCode == 37) { 
       $("#left").css( "background-color", "red" );
       x = x-1;
       $("#ball").css( "margin-left", x*10 );
       return false;
    }
});
$(document).keyup(function(e){
    if (e.keyCode == 37) { 
       $("#left").css( "background-color", "#fff" );
       return false;
    }
});
$(document).keydown(function(e){
    if (e.keyCode == 38) { 
       $("#up").css( "background-color", "red" );
       y = y-1;
       $("#ball").css( "margin-top", y*10 );
       return false;
    }
});
$(document).keyup(function(e){
    if (e.keyCode == 38) { 
       $("#up").css( "background-color", "#fff" );
       return false;
    }
});
$(document).keydown(function(e){
    if (e.keyCode == 39) { 
       $("#right").css( "background-color", "red" );
       x = x+1;
       $("#ball").css( "margin-left", x*10 );
       return false;
    }
});
$(document).keyup(function(e){
    if (e.keyCode == 39) { 
       $("#right").css( "background-color", "#fff" );
       return false;
    }
});
$(document).keydown(function(e){
    if (e.keyCode == 40) { 
       $("#down").css( "background-color", "red" );
       y = y+1;
       $("#ball").css( "margin-top", y*10 );
       return false;
    }
});
$(document).keyup(function(e){
    if (e.keyCode == 40) { 
       $("#down").css( "background-color", "#fff" );
       return false;
    }
});

В этом примере у меня разные слушатели при загрузке в JQuery, ожидающие нажатия определенного ключа, и на этом нажатии клавиши я хочу переместить мяч в определенном направлении (в этом примере с помощью функции css, чтобы изменить маржу).

Проблема в том, что вы можете двигаться только в одном направлении за раз. Возможно ли иметь это так, чтобы, если у меня есть стрелка вниз и стрелка вправо в то же самое время, я двигаюсь в нижнюю левую часть экрана, а не только вправо или вниз?

Я подумал о том, чтобы найти способ чередования между ними, если оба будут нажаты, но я не уверен, как это сработает. Или, если есть способ сделать потоки.

Также я не уверен, есть ли способ сделать так, чтобы он не отменялся при нажатии новой кнопки, пока вы все еще удерживаете другую.

  • 2
    Почему бы просто не проверить e.keyCode в else-if в той же функции-обработчике событий? Пример в JSFiddle здесь
  • 0
    почему вы пишете что-то в значительной степени основанное на взаимодействии с пользователем с помощью jquery? Какова цель перемещения мяча? написание игры? использовать что-то еще.
Показать ещё 3 комментария
Теги:
javascript-framework

4 ответа

1

Пожалуйста, взгляните на этот код:

var x = 0;
var y = 0;
var dirs = {
    left: false,
    top: false,
    right: false,
    bottom: false
};
$(document).keydown(function(e){
  switch (e.keyCode) {
    case 37: dirs.left = true; return false;
    case 38: dirs.top = true; return false;
    case 39: dirs.right = true; return false;
    case 40: dirs.bottom = true; return false;
  }
});
$(document).keyup(function(e){
  switch (e.keyCode) {
    case 37: dirs.left = false; return false;
    case 38: dirs.top = false; return false;
    case 39: dirs.right = false; return false;
    case 40: dirs.bottom = false; return false;
  } 
});

var checkLeft = function() {
  if (dirs.left) {
    $("#left").css( "background-color", "red" );
    x--;
  } else {
    $("#left").css( "background-color", "#fff" );
  }
}

var checkRight = function() {
  if (dirs.right) {
    $("#right").css( "background-color", "red" );
    x++;
  } else {
    $("#right").css( "background-color", "#fff" );
  }
}

var checkTop = function() {
  if (dirs.top) {
    $("#up").css( "background-color", "red" );
    y--;
  } else {
    $("#up").css( "background-color", "#fff" );
  }
}

var checkBottom = function() {
  if (dirs.bottom) {
    $("#down").css( "background-color", "red" );
    y++;
  } else {
    $("#down").css( "background-color", "#fff" );
  }
}

var moveBall = function() {
  $("#ball").css({
    "margin-left": x*10,
    "margin-top": y*10
  });
}

setInterval(function() {
  checkLeft();
  checkRight();
  checkTop();
  checkBottom();

  moveBall()
}, 50);

http://jsfiddle.net/26XWw/

Поделиться
1

Объедините все ваши keydowns и keyups в одну функцию с несколькими операторами if. Сначала проверьте комбинации, а затем проверьте наличие одиночных стрелок. Это должно решить проблему.

Если вы хотите, чтобы пользователи могли легко перемещать мяч, я бы рассмотрел приведенный здесь пример: http://jsfiddle.net/kzXek/. Этот пример включает обработку нажатых клавиш со стрелками для обеспечения движения жидкости.

// Made by RobseRob.dk
// Please give credit.
// Vars which contains key state
var movLeft = 0;
var movRight = 0;
var movUp = 0;
var movDown = 0;

var score = 0;
$(function() {
    // Keydown listener
    $("body").keydown(function(e) {
        ek = e.keyCode;
        if (ek==37) movLeft=1;
        if (ek==39) movRight=1;
        if (ek==38) movUp=1;
        if (ek==40) movDown=1;
    });
    // Keyuo listener
    $("body").keyup(function(e) {
        ek = e.keyCode;
        if (ek==37) movLeft=0;
        if (ek==39) movRight=0;
        if (ek==38) movUp=0;
        if (ek==40) movDown=0;
    });
});
Поделиться
  • 1
    Это можно улучшить, используя $(document) , делегируя события и связывая их. ;-)
0

Вы можете обрабатывать keydowns в массиве или объекте, а затем проверять все те, которые были нажаты:

Здесь у вас есть:

Обнаружение нескольких ключей в одном событии нажатия клавиши в jQuery

ура

Поделиться
0

Создайте массив булевых (слева, справа, вверх, вниз) и на setInterval проверьте, какие из них установлены в true

Вот ваш обновленный код:

var x = 0;
var y = 0;
var keysDown = [false, false, false, false];
$(document).keydown(function (e) {
    switch (e.keyCode) {
        case 37:
            keysDown[0] = true;
            break;
        case 38:
            keysDown[2] = true;
            break;
        case 39:
            keysDown[1] = true;
            break;
        case 40:
            keysDown[3] = true;
            break;
    }
});
$(document).keyup(function (e) {
    switch (e.keyCode) {
        case 37:
            keysDown[0] = false;
            $("#left").css("background-color", "#fff");
            break;

        case 38:
            keysDown[2] = false;
            $("#up").css("background-color", "#fff");
            break;

        case 39:
            keysDown[1] = false;
            $("#right").css("background-color", "#fff");
            break;

        case 40:
            keysDown[3] = false;
            $("#down").css("background-color", "#fff");
            break;

    }
});

function checkBallMoving()
{
    if (keysDown[0] === true) {
        $("#left").css("background-color", "red");
        x = x - 1;
        $("#ball").css("margin-left", x * 10);
    }
    if (keysDown[1] === true) {
        $("#right").css("background-color", "red");
        x = x + 1;
        $("#ball").css("margin-left", x * 10);
    }
    if (keysDown[2] === true) {
        $("#up").css("background-color", "red");
        y = y - 1;
        $("#ball").css("margin-top", y * 10);
    }
    if (keysDown[3] === true) {
        $("#down").css("background-color", "red");
        y = y + 1;
        $("#ball").css("margin-top", y * 10);
    }
}
setInterval(function () {
    checkBallMoving();
}, 100);

DEMO

Поделиться
  • 0
    Интересно, я попробовал это, и это, казалось, не работало. $(document).keyup(function(e){ if (e.keyCode == 39 && e.keyCode == 40) { y = y+1; x = x+1; $("#ball").css( "margin-top", y*10 ); $("#ball").css( "margin-left", x*10 ); } });
  • 0
    Положите его на keydown не только keyup
Показать ещё 6 комментариев

Ещё вопросы

Сообщество Overcoder
Наверх
Меню