Question

<!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>

--------------------------------＆GT;＆GT;＆GT;＆GT;＆GT;＆GT;＆GT;＆GT ;＆GT;＆GT;＆GT;＆GT;＆GT;＆GT;＆GT;＆GT;＆GT;＆LT;＆LT;＆LT;＆LT;＆LT;＆LT;＆LT;＆LT;＆LT;＆LT;＆LT;＆LT;＆LT;＆LT;＆LT;＆LT ;＆LT; _----------------------------------

在这段代码中我想设置坐标限制... 我实际上是想用javascript做一个简单的游戏...在这组代码中有一个简单的轨道，我用画布制作了一个简单的轨道，我试图在那个轨道上移动一个角色......我可以在4个方向（向上，向下，向左，向右）移动角色。

但我在这段代码中遇到两个问题..

1）一旦我按下＆＃39; up＆＃39;键，角色直接到达轨道的底部，然后它开始向“向上”方向移动。方向..

2）我无法设置坐标的限制..角色可以离开赛道。

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

Answer 1

你没有初始化＆＃34;左＆＃34;和＆＃34;底部＆＃34; css属性。因此，首次点击时，需要计算这些内容，以及您获得＆＃34; blink＆＃34;的地方。

我的建议是你放弃了＆＃34; bottom＆＃34;并使用＆＃34; top＆＃34;。更合乎逻辑。然后初始化＆＃34; top＆＃34;和＆＃34;左＆＃34; css属性，以避免＆＃34;闪烁＆＃34;。

以下是一个工作示例：

＆＃13;

<!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>

＆＃13;

现在，当谈到限制价值观时 - 懒惰是受过教育的美德:) 这是使用＆＃34; bind＆＃34;的一个很好的例子。功能特征。

如何设置角色移动的（x，y）坐标限制

1 个答案: