使用箭頭在窗口內移動Div

我是新來編碼並試圖做一個遊戲，我沿着x和y軸移動我的div。當我運行代碼時，我在marginLeft變量以及marginTop中得到一個錯誤。我包含了這些變量，因爲我希望連續的keydown筆劃繼續移動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建議的代碼。你也想看看畫布，更靈活的艾莫 – Slico

您的代碼工作得很好，當我修改它使用的事件偵聽e.which。我還附加了snippit底部的事件監聽器。

點擊遊戲內使用箭頭鍵前：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

回答

相關問題