如何设置字符移动的 (x，y） 坐标的限制

how to set the limits of (x,y) coordinates for the character movement

本文关键字：坐标 移动 何设置 设置 字符      更新时间：2023-09-26
<!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>

-------------------------------->>>>>>>>>>>>>>>>><<<<<<<<<<<<<<<<<_----------------------------------

在此代码中，我想设置坐标限制...我实际上正在尝试使用javascript制作一个简单的游戏...在这组代码中，有一个简单的轨道，我使用 canvas 制作了它，我正在尝试在该轨道上移动一个字符......我可以在 4 个方向(向上、向下、向左、向右(上移动角色。

但是我在此代码中面临两个问题。

1(一旦我按下"向上"键，角色就会直接进入轨道的底部，然后它开始向"向上"方向移动。

2(我无法设置坐标的限制。角色可以脱离轨道。

任何人都知道为什么会这样以及我可以做些什么来解决它？

您没有初始化"left"和"bottom"css属性。因此，在第一次点击时，需要计算这些，这就是您获得"眨眼"的地方。

我的建议是你放弃"底部"的概念，使用"顶部"。更合乎逻辑。然后初始化"top"和"left"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>

现在，当涉及到限制价值观时——懒惰是受过教育的美德:)下面是使用函数的"绑定"特性的一个很好的例子。

相关文章：