現在、jQueryの演習としてブロックブレーカーをコーディングしていますが、左側のプレイフィールドを離れると位置が変わるラケットに問題があります。
私はすべてのマウスイベントに慣れていないので、スタックオーバーフローやインターネットで見つけた多くの解決策やアイデアを試し、コード全体を変更しましたが、正しい位置にあることがわかった唯一の方法は条件を作成することですオフセットを修正するには、mouseleaveイベントを使用します。しかし、マウスがプレイフィールドの上または下にあると、それを行う前に持っていなかった位置の問題が増えるため、私はそれが好きではありません。
おそらくこれの2番目の部分が機能しないのですが、変更する方法がわかりません。
racket.left = Math.min(canvasWidth - racket.width, Math.max(2, e.offsetX));
私が何を意味するかについては、JSFiddleを参照してください：https：//jsfiddle.net/Shilok/29wu6gj8/1/
右側と同じ動作が必要です。ラケットがいずれかの側に触れ、マウスがプレイフィールドの外にある場合、ラケットはそのままの位置に留まります（側面に貼り付けられています）。
何か案は？
もう少し必要です
pageX代わりに、ドキュメント全体に対して常に左を返すを使用して、これを正規化する必要があります。Math.minに、Math.maxをaでラップする必要があります。.canvasそれ自体のオフセットを考慮する必要があります。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/でフィドルを更新しました
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加