Question

我需要帮助让我的玩家留在我的div里面。我的玩家是一个可以移动的div，它被放置在一个竞技场内＃34;有边框的div！可以帮助我制作，以便玩家不能移动到div之外！

这是我项目的JSfiddle！这是我的代码！

$(document).ready(function(){

    $("#bana").append("<div id='spelare1'></div>"); //Sätter in spelaren
    $("#bana").append("<div id='obj_poäng'></div>"); //Sätter in poäng obj

    $("#tid").text("Tid: " + tid); //Sätter tid texten
    $("#poäng").text("Poäng: " + poäng) //Sätter poäng texten

    sättSpelareHöjd(); //Kallar på sättSpelareHöjd funktionen vid start
});

var knappTryckt = true;
var tid = 60; //Tiden i spelet
var poäng = 0; //Start poäng

function sättSpelareHöjd() {
    var spelareHöjd = $("#spelare1").width();
    $("#spelare1").css("height", spelareHöjd);
} //Sätter spelarens höjd så att den hela tiden är en kub

//Spelare 1 rörelse
$(document).keydown(function(e){
if(knappTryckt) {
    if(e.keyCode == 37) {
        $("#spelare1").stop().animate({left: "-=" + 100 + "%"},5000);
        //Pil vänster
    }

    else if (e.keyCode == 38) {
        $("#spelare1").stop().animate({top: "-=" + 100 + "vh"},5000);
        //Pil upp
    }

    else if (e.keyCode == 39) {
        $("#spelare1").stop().animate({left: "+=" + 100 + "%"},5000);
        //Pil höger
    }

    else if (e.keyCode == 40) {
        $("#spelare1").stop().animate({top: "+=" + 100 + "vh"},5000);
        //Pil ner
    }

    knappTryckt = false;
}
});
$(document).keyup(function(){
    $("#spelare1").stop();
    knappTryckt = true;
});

Answer 1

使用animate的progress属性获取项目的当前位置，并使用position()获取项目位置左侧＆amp;顶部：

$(document).ready(function() {

  $("#bana").append("<div id='spelare1'></div>"); //Sätter in spelaren
  $("#bana").append("<div id='obj_poäng'></div>"); //Sätter in poäng obj

  $("#tid").text("Tid: " + tid); //Sätter tid texten
  $("#poäng").text("Poäng: " + poäng) //Sätter poäng texten

  sättSpelareHöjd(); //Kallar på sättSpelareHöjd funktionen vid start
  sättPoängHöjd(); //Kallar på sättPoängHöjd funktion vid start
  poängPosition(); //Kallar på poängPosition vid start
});

var knappTryckt = true;
var tid = 60; //Tiden i spelet
var poäng = 0; //Start poäng

function sättSpelareHöjd() {
  var spelareHöjd = $("#spelare1").width();
  $("#spelare1").css("height", spelareHöjd);
} //Sätter spelarens höjd så att den hela tiden är en kub

//Spelare 1 rörelse
$(document).keydown(function(e) {
  if (knappTryckt) {
    if (e.keyCode == 37) {
      $("#spelare1").stop().animate({
        left: "-=" + 100 + "%"
      }, {
        duration: 5000,
        progress: function() {
          var pos = $(this).position();
          if (pos.left < 0) {
            $(this).stop();
          }
        }
      });
      //Pil vänster
    } else if (e.keyCode == 38) {
      $("#spelare1").stop().animate({
        top: "-=" + 100 + "vh"
      },{
        duration: 5000,
        progress: function() {
          var pos = $(this).position();
          if (pos.top < 0) {
            $(this).stop();
          }
        }
      });
      //Pil upp
    } else if (e.keyCode == 39) {
      $("#spelare1").stop().animate({
        left: "+=" + 100 + "%"
      },{
        duration: 5000,
        progress: function() {
          var pos = $(this).position();
          if (pos.left > $('#bana').width()-$("#spelare1").width()) {
            $(this).stop();
          }
        }
      });
      //Pil höger
    } else if (e.keyCode == 40) {
      $("#spelare1").stop().animate({
        top: "+=" + 100 + "vh"
      },{
        duration: 5000,
        progress: function() {
          var pos = $(this).position();
          if (pos.top > $('#bana').height()-$("#spelare1").height()) {
            $(this).stop();
          }
        }
      });
      //Pil ner
    }

    knappTryckt = false;
  }
});
$(document).keyup(function() {
  $("#spelare1").stop();
  knappTryckt = true;
});

演示：https://jsfiddle.net/z61wxo9x/2/

JQuery游戏 - 让玩家留在div中

1 个答案: