ブロック崩しの棒の衝突反応が思ったように作れないです

1.前提・実現したいこと
前提：最初、棒とボールはくっついている状態で、マウスカーソルを動かすと、高さ（Y軸）をそのままにカーソルの位置まで横（X軸）移動し、クリックすると棒はそのままマウスカーソルで動かせる状態で、ボールがY＝-２、X＝２の方向に移動し壁や天井などにぶつかると反転するところまでは出来ている。

実現したいこと；タイトル通りです。

2.該当のソースコード
game.blade.php

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
         <meta name=”viewport” content=”width=device-width,initial-scale=1.0″>
         <meta name="csrf-token" content="{{ csrf_token() }}">
         <link rel="stylesheet" href="{{ asset('css/game.css') }}">
         <title>study</title>
    </head>

    
    <body>
        
        <canvas id="ball" height="600" width="1500"></canvas>
        
        <div class="block" id='blockid'></div>
        
        
        <p id='a'></p>
        
 <script src="{{ asset('/js/jquery-3.6.0.min.js')}}"></script>
 <script src="{{ asset('/js/game.js') }}"></script>
        
    </body>
    
</html>

game.css

.block {
    background-color: red;
    height: 50px;
    width: 200px;
    margin-left: auto;
    margin-right: auto;
}

game.js

var a = document.querySelector('html');
\\クリックする前と後で、idを変えてクリック後にマウスカーソルでボールが動かないようにする
$('html').mousedown(function() {
	var ball = document.getElementById('ball');
	
	ball.id = ('bounseball');
});

\\ここでマウスカーソルに合わせて棒とボールの座標を動かすようにする
a.onmousemove = function(e) {
	if (e) event = e;
	
	var x = e.clientX-100;
	
	var block = $('.block').offset({
		top:500,
		left:x
	});

\\「var block = document.getElementById('blockid');」～「var blockclientX = e.clientX;」は後の棒の衝突反応のために書いています
var blockid = document.getElementById('blockid');
	
var clientRect = block.getBoundingClientRect() ;
	
var blockleft = clientRect.left ;
	
var blockright = clientRect.right ;

var blockclientX = e.clientX;

var canvas = document.getElementById('ball');
	
	var ctx = canvas.getContext('2d');
	
	ctx.clearRect(0,0,canvas.width,canvas.height);
	
	ctx.beginPath();
	
	ctx.arc(x+93, 473, 20, 0, 2*Math.PI, false);
	
    ctx.fill();
    
    ctx.closePath();	

\\ここがクリックした後の動き
a.onmouseup = function (s) {	
	if (s) event = s;

	var canvas2 = document.getElementById('bounseball');

	var ctx = canvas2.getContext('2d');
	
	var x = s.clientX;
    var y = 472;
	
	var dx = 2;
    var dy = -2;
	
	
	function draw() {
		var ballsize = 20;
		
\\この二つのif文が棒の衝突反応
		if ( y+dy > 472 && blockclientX <blockright && blockclientX >blockleft ||  y+dy < ballsize ) {	
			dy = -dy;
		}
		
		if (x+dx < ballsize || x+dx > canvas2.width-ballsize) {	
			dx = -dx;
		}
	
	 ctx.clearRect(0,0,canvas2.width,canvas2.height);
		
		ctx.beginPath();
		
		ctx.arc(x,y,ballsize,0,Math.PI*2);
		
		ctx.fillStyle = "#0095dd";
		
		ctx.fill();

		ctx.closePath();
	
	x = x+dx;
	y = y+dy;
}
	
setInterval(draw,10);

};

};

3.発生している問題・エラーメッセージ

エラーは出ていないです。ただしボールが棒がない場所でも跳ね返ったり、クリックした際に棒があった場所にだけ反応して跳ね返ったりします。

具体的に書くと、

if ( y+dy > 472 && blockclientX <blockright && blockclientX >blockleft ||  y+dy < ballsize ) {	
			dy = -dy;
			
		}

のblockclientX をそのまま[blockclientX ]にしておくと棒がない場所でも跳ね返る状態に、blockclientX を[x+dx]にするとクリックした際に棒があった場所にだけ反応して跳ね返るじょうたいになりました。どうしたらいいでしょうか？

追記：クリックする前と後でのblockrightとblockleft をそれぞれコンソールログで確認するとクリックした後の方は棒をどれだけ動かしても値が変わらなかったのでこれをどうにかできたらいいのかなと考えています。合っているかわかりませんが。

int32_t

2022/06/21 23:59 編集

回答しようかとコードを読み始めたのですが、読みにくくてやめてしまいました。・やたらと空行を入れないでください。・インデントをまともにしてください。エディタやIDEに自動整形の機能があるかもしれません。・意味のある変数名にしてください。zxcx b c という名前から何が入っているか想像できません。誰でも問題を再現できるよう、HTMLやCSSも質問に含めると回答が得られる可能性が高まります。

行動規範の内容に同意します

回答1件

ベストアンサー

ボールの座標と棒の座標を比較したいのですから、

blockclientX を[x+dx]にすると

これで正しいです。

これは変数の生存期間の問題です。draw() が参照している blockright blockleft などの変数は、a.onmouseup コールバックが実行される直前の a.onmousemove のときの値に固定されています。マウスボタンを離した後も a.onmousemove コールバックは何度も呼ばれますが、その中で宣言された blockright blockleft などの変数は新規のもので、draw() が参照しているものとは別なのです。

これらの変数をグローバル変数にすれば解決すると思います。

js
1let clientRect;
2let blockleft;
3let blockright;
4let blockclientX;
5a.onmousemove = function(e) {
6  ....
7  clientRect = block.getBoundingClientRect() ;
8  blockleft = clientRect.left ;
9  blockright = clientRect.right ;
10  blockclientX = e.clientX;
11