Question

目前，我正在设计一个平台游戏概念。当然，这涉及移动等等。现在，我正试图在平台上跳一个正方形。我有一个广场上的min_bottom，但我有一个小问题。我无法弄清楚哪个元素与正方形重叠。你有答案吗？我们的想法是将mmin_bottom变量设置为平台的底部值，但这仅适用于第一个.block元素。注意：我正在使用类，所以这有点难。控制是从右到右，从左到左跳跃的空间。

如果您需要任何信息，请评论我。

var PAUSE_TIME = 100;
var runningr = false;
var runningl = false;
var runningj = false;
/* 50 is the bottom, edit the 2nd number */
var min_bottom = setMinBottom(0);

var spp = 500 / 20;

var log = {
  'log': function(s) {
    $('.log').append(s + '<br>');
  }
};



/* Collision Thingy:
 * http://stackoverflow.com/questions/5419134/how-to-detect-if-two-divs-touch-with-jquery */

function collision($div1, $div2) {
  var x1 = $div1.offset().left;
  var y1 = $div1.offset().top;
  var h1 = $div1.outerHeight(true);
  var w1 = $div1.outerWidth(true);
  var b1 = y1 + h1;
  var r1 = x1 + w1;
  var x2 = $div2.offset().left;
  var y2 = $div2.offset().top;
  var h2 = $div2.outerHeight(true);
  var w2 = $div2.outerWidth(true);
  var b2 = y2 + h2;
  var r2 = x2 + w2;

  if (b1 < y2 || y1 > b2 || r1 < x2 || x1 > r2)
    return false;
  return true;
}

function setMinBottom(integer) {
  return 50 + integer;
}

(function() {
  $.fn.keyone = function(keyCode, action, fn) {
    this.one(action, function(e) {
      if (e.keyCode == keyCode) {
        fn();
      }
    });
  };
})(jQuery);

window.setInterval(function() {
  if (collision($('.square-wrapper'), $('.block'))) {
    log.log(true);

    min_bottom = setMinBottom(100);
  }
}, 50);

$(document).on('keyup', function(e) {
  switch (e.keyCode) {
    case 39:
      runningr = false;
      $('.square-wrapper').css('left', $('.square-wrapper').css('left'));
      break;
    case 37:
      runningl = false;
      $('.square-wrapper').css('left', $('.square-wrapper').css('left'));
      break;
    case 32:
      break;
    default:
      runningr = false;
      runningl = false;
      runningj = false;
      break;
  }
});

$(document).on('keydown', function(e) {

  /* CSS Method */

  // log.log(e.keyCode + ' Pressed!');

  switch (e.keyCode) {
    case 39:

      if (!runningr) {

        runningr = true;

        log.log('Go Right');

        $('.square-wrapper').css('left', Number($('.square-wrapper').css('left').replace(/[^-\d\.]/g, '')) + 10000);

        // $(document).keyone(39, 'keyup', function() {
        // $('.square-wrapper').css('left', $('.square-wrapper').css('left'));
        // });
      }
      break;
    case 37:

      if (!runningl) {

        runningl = true;

        log.log('Go Left');

        $('.square-wrapper').css('left', Number($('.square-wrapper').css('left').replace(/[^-\d\.]/g, '')) - 10000);

        // $(document).keyone(37, 'keyup', function() {
        // $('.square-wrapper').css('left', $('.square-wrapper').css('left'));
        // });
      }
      break;
    case 32:

      if (!runningj) {

        runningj = true;

        log.log('Jump!');

        // $('.square-wrapper').css('transition', 'bottom 300ms cubic-bezier(0.000, 0.000, 0.440, 1.000)');
        $('.square-wrapper').addClass('jumpup');

        $('.square-wrapper').css('bottom', Number($('.square-wrapper').css('bottom').replace(/[^-\d\.]/g, '')) + 125);

        setTimeout(function() {
          // $('.square-wrapper').css('transition', 'bottom 300ms cubic-bezier(0.440, 0.000, 1.000, 1.000)');

          $('.square-wrapper').removeClass('jumpup');
          $('.square-wrapper').addClass('jumpdown');

          var bottom = Number($('.square-wrapper').css('bottom').replace(/[^-\d\.]/g, '')) - 125;

          $('.square-wraper').css('transition-duration', '30s, ' + bottom * spp + 'ms');

          $('.square-wrapper').css('bottom', min_bottom);
          setTimeout(function() {
            $('.square-wrapper').removeClass('jumpdown');
            runningj = false;
          }, 200);
        }, 200);
      }

      break;
  }

});

.bot-line {
  position: absolute;
  bottom: 50px;
  background black;
  border: 1pt solid black;
  width: inherit;
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  height: 100%;
}
.window {
  height: 100%;
  width: 80%;
}
.square-wrapper {
  position: absolute;
  bottom: 50px;
  height: 30px;
  width: 30px;
  border: 2pt solid black;
  left: 50px;
  background: #00c5ff;
}
.square-inside {
  position: relative;
  top: 3px;
  height: 20px;
  width: 20px;
  border: 2pt solid black;
  left: 3px;
  background: #8cff52;
}
.move {
  transition: left 30s linear;
}
.jumpup {
  /*transition: left 30s linear, bottom 200ms cubic-bezier(0.000, 0.000, 0.000, 0.440);*/
  transition-property: left, bottom;
  transition-duration: 30s, 200ms;
  transition-timing-function: linear, cubic-bezier(0.000, 0.000, 0.000, 0.440);
}
.jumpdown {
  /*transition: left 30s linear, bottom 200ms cubic-bezier(0.440, 0.000, 1.000, 1.000);*/
  transition-property: left, bottom;
  transition-duration: 30s, 200ms;
  transition-timing-function: linear, cubic-bezier(0.440, 0.000, 1.000, 1.000);
}
.log {
  height: 100%;
  width: 20%;
  position: absolute;
  box-sizing: border-box;
  right: 0;
  top: 0;
  border: 3pt ridge #909090;
  padding: 5px;
  overflow: auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">

  <!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
		Remove this if you use the .htaccess -->
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

  <title>Platfomer Test</title>
  <meta name="description" content="">
  <meta name="author" content="Samuel Li">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- Replace favicon.ico & apple-touch-icon.png in the root of your domain and delete these references -->
  <!-- <link rel="shortcut icon" href="/favicon.ico">
		<link rel="apple-touch-icon" href="/apple-touch-icon.png"> -->
</head>

<body>

  <div class="window">
    <div class="bot-line"></div>
    <div class="square-wrapper move">
      <div class="square-inside"></div>
    </div>
    <div class="block" data-x="100" data-y="100" style="width: 100px; box-sizing: border-box; border: 2pt solid black; height: 4px;"></div>
    <div class="block" data-x="100" data-y="200" style="width: 100px; box-sizing: border-box; border: 2pt solid black; height: 4px;"></div>
  </div>

  <div class="log"></div>

  <script>
    $('.block').each(function() {
      var x = $(this).data('x');
      var y = 50 + $(this).data('y');
      console.log();
      $(this).css({
        position: 'absolute',
        left: x,
        bottom: y + $(this).height(),
      });
    });
    var log = window.log;
    log.log('Right to go Right');
    log.log('Left to go Left');
    log.log('Space to go space');
    log.log('Going down after going up not implemented yet');
  </script>

</body>

</html>

JSFiddle：http://jsfiddle.net/MashedPotatoes/8k4kfpwv/

Answer 1

您最好使用There is a related question on StackOverflow或boxbox这样的库来处理互动。您可以使用碰撞检测等来开发平台游戏。

然后，您可以使用他们的API来开发类似：PhysicsJS

的内容

现在，如果你不想这样做，你基本上就是重新发明轮子但是你必须在每个角上都有坐标的参考。然后你只做一个简单的盒子碰撞测试：

function Box(x,y,width, height) {
   this.x = x;
   this.y = y;
   this.width = width;
   this.height = height;
}

var BoxA = new Box(0,0,10,10);
var BoxB = new Box(5,0,20,20);

function DoBoxesIntersect(a, b) {
  return (abs(a.x - b.x) * 2 < (a.width + b.width)) &&
         (abs(a.y - b.y) * 2 < (a.height + b.height));
}

alert(DoBoxesIntersect(BoxA,BoxB)); //true

比较功能刚刚从http://incompl.github.io/boxbox/boxbox/demos/platformer/demo.html

修改

注意：这是我头脑中可能有拼写错误的所有代码，但它适合说明一般的想法。

Javascript检测到哪个元素与元素重叠

1 个答案: