Перемещение Div внутри окна с использованием стрелок

Я новичок в кодировании и пытаюсь сделать игру, я перемещаю div по оси x и y. Когда я запускаю код, я получаю ошибку в переменной marginLeft, а также marginTop. Я включил эти переменные, потому что я хочу, чтобы последовательные нажатия клавиш продолжали перемещать div. Я хотел бы кодировать, используя только jquery, если это возможно.Перемещение Div внутри окна с использованием стрелок

var player = $('#player'); 
 
var marginleft = $('#player').offset().left; 
 
var margintop = $('#player').offset().top; 
 

 

 
function movePlayer(e) { 
 
    if (e.keydown==39) { 
 
    marginleft +=2; 
 
    player.css('left', marginleft + 'px'); 
 
    } 
 
    if (e.keydown==37) { 
 
    marginleft -=2; 
 
    player.css('left', marginleft + 'px'); 
 
    } 
 
    if (e.keydown==40) { 
 
    margintop +=2; 
 
    player.css('top', margintop + 'px'); 
 
    } 
 
    if (e.keydown==38) { 
 
    margintop -=2; 
 
    player.css('top', margintop + 'px'); 
 
    } 
 
}

#player { 
 
    width: 50px; 
 
    height: 50px; 
 
    background-color: red; 
 
    left: 0px; 
 
    top: 0px; 
 
    position: absolute; 
 
} 
 
body { 
 
    height: 100%; 
 
    width: 100%; 
 
    background-color: green; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
 
    <title></title> 
 
    <link rel="stylesheet" href="style.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 
 
    <script src="script.js"></script> 
 
</head> 
 
<body> 
 
<div id="player"></div> 
 
</body> 
 
</html>

источник

2016-10-04 keigwin

вы забыли включить код, который прослушивает нажатие клавиши в вашем примере. мы не можем проверить его без этого –

Просьба указать код, предложенный @CoryDanielson. Также вы хотите взглянуть на холст, более гибкий imo – Slico

Ваш код работал хорошо, когда я изменил его, чтобы использовать e.which в обработчиках событий. Я также добавил слушателя событий в нижней части фрагмента.

Нажмите в игре, прежде чем использовать клавиши со стрелками: https://jsfiddle.net/CoryDanielson/kchrv4t4/

var player = $('#player'); 
var marginleft = $('#player').offset().left; 
var margintop = $('#player').offset().top; 

function movePlayer(e) { 
    if (e.which==39) { 
    marginleft +=2; 
    player.css('left', marginleft + 'px'); 
    } 
    if (e.which==37) { 
    marginleft -=2; 
    player.css('left', marginleft + 'px'); 
    } 
    if (e.which==40) { 
    margintop +=2; 
    player.css('top', margintop + 'px'); 
    } 
    if (e.which==38) { 
    margintop -=2; 
    player.css('top', margintop + 'px'); 
    } 
} 

$(document.body).on('keydown', movePlayer);

Вы должны использовать e.which при использовании JQuery. Существует много расхождений между браузерами и кодами клавиш. which - это безопасный способ определения кодов клавиш. https://api.jquery.com/event.which/

источник

2016-10-04 16:38:07

Когда я запускаю код, который я получаю сообщение об ошибке в переменной MarginLeft, а также MarginTop

Это ППЭ позволяют мне думать, что вы определение и инициализацию переменных вне документа готов ...

Если вам нужно переместить DIV только в видимой области документа solutioon может быть:

// 
 
// declare global variables and functions outside the 
 
// document ready 
 
// 
 
var player; 
 
var marginleft; 
 
var margintop; 
 
var docWidth; 
 
var docHeight; 
 

 
function movePlayer(e) { 
 
    if (e.which==39) { 
 
    if (marginleft >= docWidth) { 
 
     return; 
 
    } 
 
    marginleft +=2; 
 
    player.css('left', marginleft + 'px'); 
 
    } 
 
    if (e.v==37) { 
 
    if (marginleft<=0) { 
 
     return; 
 
    } 
 
    marginleft -=2; 
 
    player.css('left', marginleft + 'px'); 
 
    } 
 
    if (e.which==40) { 
 
    if (margintop >= docHeight) { 
 
     return; 
 
    } 
 
    margintop +=2; 
 
    player.css('top', margintop + 'px'); 
 
    } 
 
    if (e.which==38) { 
 
    if (margintop<=0) { 
 
     return; 
 
    } 
 
    margintop -=2; 
 
    player.css('top', margintop + 'px'); 
 
    } 
 
} 
 

 
// 
 
// On document ready: set the variables and 
 
// add the event listener for keydown event 
 
// 
 
$(function() { 
 
    player = $('#player'); 
 
    marginleft = $('#player').offset().left; 
 
    margintop = $('#player').offset().top; 
 
    docWidth = $(document).width() - player.width(); 
 
    docHeight = $(document).height() - player.height(); 
 

 
    $(document).on('keydown', function(e) { 
 
    movePlayer(e); 
 
    }); 
 
});

#player { 
 
    width: 50px; 
 
    height: 50px; 
 
    background-color: red; 
 
    left: 0px; 
 
    top: 0px; 
 
    position: absolute; 
 
} 
 
body { 
 
    height: 100%; 
 
    width: 100%; 
 
    background-color: green; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 

 
<div id="player"></div>

источник

2016-10-04 16:49:17 gaetanoM

Перемещение Div внутри окна с использованием стрелок

ответ

Смежные вопросы