如何設置字符移動的（x，y）座標限制

-1

<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> 
<title>Insert title here</title> 
<head> 

    <meta charset="utf-8"> 

    <title>animate demo</title> 

    <style> 

    div { 

    position: absolute; 
    margin: 30px; 
    } 

    </style> 

    <script src="//code.jquery.com/jquery-1.10.2.js"></script> 

</head> 

<body background="./images/RectTrack1.jpg"> 




<button id="left">&laquo;</button> 

<button id="right">&raquo;</button>&nbsp;&nbsp; 
<button id="up">up</button> 

<button id="down">down</button> 

<!-- <div class="block"></div> --> 





<div class="block" > 

<img src="./images/vijaya.png" /> 

</div> 

<script> 

$("#right").click(function() 

{ 
    $(".block").animate({ "left": "+=50px"},"slow"); 

}); 
$("#up").click(function() { 

     $(".block").animate({ "bottom": "+=50px"},"slow"); 

    }); 
$("#down").click(function() { 

     $(".block").animate({ "bottom": "-=50px" }, "slow"); 

    }); 


$("#left").click(function(){ 

    $(".block").animate({ "left": "-=50px" }, "slow"); 

}); 

</script> 



</body> 


</html>

---------------------------- ---- >>>>>>>>>>>>>>>>> < < < < < < < < < < < < < < < < < _----------- -----------------------如何設置字符移動的（x，y）座標限制

在此代碼

我想設置座標限制...... 實際上，我試圖做一個簡單的遊戲使用JavaScript ...在這組代碼中有一個簡單的軌道，我使用畫布，我試圖移動該軌道上的角色...我可以移動角色在4個方向（上，下，左，右）..

但我在這段代碼中面臨兩個問題..

1）當我按下「向上」鍵，字符直接進入軌道的底部，然後它開始朝「向上」的方向移動..

2）我不能設置的座標的限制。該角色可以走出去的軌道。

任何人都有一個想法，爲什麼這是我能做些什麼來解決它？

來源

2014-09-23 ajay

您沒有初始化「left」和「bottom」css屬性。所以，在第一次點擊時，需要對這些進行計算，這就是您得到「眨眼睛」的地方。

我的建議是，你放棄了「底部」的想法，並使用「頂部」。更合乎邏輯。然後初始化「頂部」和「左側」CSS屬性，以避免「眨眼」。

這裏是工作示例：

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> 
 
<title>Insert title here</title> 
 
<head> 
 

 
    <meta charset="utf-8"> 
 

 
    <title>animate demo</title> 
 

 
    <style> 
 

 
    div { 
 

 
    position: absolute; 
 
    left: 30px; 
 
    top: 80px; 
 
    } 
 

 
    </style> 
 

 
    <script src="//code.jquery.com/jquery-1.10.2.js"></script> 
 

 
</head> 
 

 
<body background="./images/RectTrack1.jpg"> 
 

 

 

 

 
<button id="left">«</button> 
 

 
<button id="right">»</button>   
 
<button id="up">up</button> 
 

 
<button id="down">down</button> 
 

 
<!-- <div class="block"></div> --> 
 

 

 

 

 

 
<div class="block" > 
 

 
<img src="./images/vijaya.png" /> 
 

 
</div> 
 

 
<script> 
 
    
 
    var limits = { 
 
    left:300, 
 
    top:300 
 
    }, 
 
     increment = 50, 
 
     moving = { 
 
     left:false, 
 
     top:false 
 
     } 
 
    function releaseMove(prop){ 
 
    moving[prop] = false; 
 
    } 
 
    function doMove(up,prop){ 
 
    var b = $(".block"); 
 
    var pv = parseInt(b.css(prop)); 
 
    if(up && pv+increment>limits[prop]){ 
 
     alert(pv+increment+" too much"); 
 
     return; 
 
     } 
 
    if(!up && pv-increment<0){ 
 
     alert(pv-increment+" too small"); 
 
     return; 
 
     } 
 
    if(moving[prop]){ 
 
     return; 
 
     } 
 
    moving[prop] = true; 
 
    var animobj = {}; 
 
    animobj[prop] = (up ? "+" : "-")+"="+increment+"px"; 
 
    b.animate(animobj,"slow",releaseMove.bind(null,prop)); 
 
    } 
 

 
$("#right").click(doMove.bind(null,true,"left")); 
 
$("#left").click(doMove.bind(null,false,"left")); 
 
$("#up").click(doMove.bind(null,false,"top")); 
 
$("#down").click(doMove.bind(null,true,"top")); 
 

 

 

 
</script> 
 

 

 

 
</body> 
 

 

 
</html>

現在，當談到有關限制值 - 懶惰也是一種美德受教育者:) 這裏是使用「綁定」的一個很好的例子功能特點。

來源

2014-09-23 12:47:36

感謝安德里亞... :) – ajay 2014-09-24 09:38:01

哎安德里亞，我們從一開始就點字符面臨着更多的一個問題...直接移動down..it應保持不動DAT way..1st應該遵循水平音軌，然後它應該降下來。 – ajay 2014-09-26 06:04:03

嘿，ajay，似乎我錯過了你的想法中的一個觀點。如果你按下「下」它應該下降，對吧？ – 2014-09-27 11:22:31

如何設置字符移動的（x，y）座標限制

回答

相關問題