矢印を使用してウィンドウ内でDivを移動する

私はx軸とy軸に沿ってdivを動かしていました。コードを実行すると、marginLeft変数とmarginTopにエラーが発生します。私はdivを移動し続けるkeydownストロークを続けたいので、これらの変数を含めました。可能であれば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が提案したコードを提供してください。キャンバス、より柔軟なイモを見たい – 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);

のjQueryを使用するときは、e.whichを使用する必要があります。ブラウザとキーコードには多くの相違があります。 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を移動する

答えて

関連する問題