jQuery: позиция смещения с событием мыши - PullRequest
Новая
       10

jQuery: позиция смещения с событием мыши

0 голосов
/ 08 января 2019

В настоящее время я кодирую блокбрейкер как упражнение jQuery, и у меня есть проблема с моей ракеткой, которая меняет положение, когда я покидаю игровое поле слева.

Я новичок во всех событиях мыши, и я перепробовал множество решений и идей, найденных здесь, в stackoverflow или в Интернете, даже изменив весь код, но единственный способ найти правильную позицию - это сделайте условие с событием mouseleave, чтобы исправить смещение. Но мне это не нравится, потому что это вызывает больше проблем с позицией, если мышь находится над или под игровым полем, чего у меня не было до этого.

Вероятно, вторая часть этого не работает, но я не вижу, как это изменить. 

racket.left = Math.min(canvasWidth - racket.width, Math.max(2, e.offsetX));

См. JSFiddle, чтобы понять, что я имею в виду: https://jsfiddle.net/Shilok/29wu6gj8/1/

Мне нужно то же поведение, что и справа: когда ракетка касается любой из сторон, а мышь находится за пределами игрового поля, ракетка остается там, где она есть (наклеена сбоку!)

Есть идеи?

1 Ответ

0 голосов
/ 08 января 2019

Тебе нужна еще пара вещей

  1. Смещение X используемого вами события зависит от того, над каким элементом вы наводите курсор. Вы должны нормализовать это, используя вместо этого pageX, который всегда возвращает левое значение по отношению ко всему документу.
  2. Вы должны обернуть Math.min в Math.max, чтобы он не опустился ниже 0.
  3. Вам необходимо учесть смещение самого .canvas.
  4. Вам также следует пересчитать смещение для события resize окна 

var canvasWidth, racket, canvasOffset;

$(document).ready(init);

function init() {
  $(window).resize(calculate).trigger('resize');
  $(window).on('mousemove', moveRacket);
}

function calculate() {
  canvasWidth = $('.canvas').width();
  racket = {
    width: $(".racket").width()
  };
  canvasOffset = $('.canvas').offset()
}

function moveRacket(e) {
  var minLeft = Math.max(0, e.pageX - canvasOffset.left - racket.width / 2),
    maxLeft = canvasWidth - racket.width;

  racket.left = Math.max(Math.min(maxLeft, minLeft), 0);
  $('.racket').css('left', racket.left + 'px');
}
html {
  width: 100%;
  height: 100%;
}

body {
  display: flex;
  justify-content: center;
}

.canvas {
  position: absolute;
  background: green;
  width: 500px;
  height: 200px;
}

.racket {
  position: absolute;
  width: 100px;
  height: 14px;
  bottom: 12px;
  left: 0;
  background: black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="canvas">
  <div class="racket"></div>
</div>

Обновлена ​​скрипка на https://jsfiddle.net/0p9ke2wa/

...