四角と円の当たり判定

前提・実現したいこと

　javascriptでテニスゲームを作ろうとしています。
プレイヤーとボールが当たった時に跳ね返るようにしたいです。

###　全コード

javascript
1
2//画面サイス
3let can =document.getElementById("can");
4let con =can.getContext("2d");
5
6//スクリーンサイズ
7const SCREEN_SIZE_W=500;
8const SCREEN_SIZE_H=700;
9const COLOR="#99f";
10
11//キャンバス情報
12can.width=SCREEN_SIZE_W;
13can.height=SCREEN_SIZE_H;
14can.style.backgroundColor=COLOR;
15
16//ブロックサイズ
17const BLOCK_X=100;
18const BLOCK_Y=20;
19
20//ブロック位置
21const POSITION_X=SCREEN_SIZE_W/2-BLOCK_X/2;
22const E_POSITION_Y=100;
23const POSITION_Y=SCREEN_SIZE_H-BLOCK_Y-E_POSITION_Y;
24
25
26//クラス
27class All{
28    constructor(bx,by,bxv,byv,bw,px,py,pxv,pyv,ex,ey,exv,eyv,w,h,col){
29        this.bx=bx;
30        this.by=by;
31        this.bxv=bxv;
32        this.byv=byv;
33        this.bw=bw;
34        this.px=px;
35        this.py=py;
36        this.pxv=pxv;
37        this.pyv=pyv;
38        this.ex=ex;
39        this.ey=ey;
40        this.exv=exv;
41        this.eyv=eyv;
42        this.w=w;
43        this.h=h;
44        this.col=col;
45       
46
47    }
48    //ボール描画
49    b_draw(){
50        con.beginPath();
51        con.arc(this.bx,this.by,this.bw,0,Math.PI*2,false);
52        con.fillStyle=this.col;
53        con.fill();
54        con.lineWidth=2;
55        con.stroke();
56        con.closePath();
57    }
58
59    //プレイヤー描画
60    p_draw(){
61      
62        con.fillStyle=this.col;
63        con.fillRect(this.px,this.py,this.w,this.h);
64
65
66    }
67
68
69    //敵描画
70    e_draw(){
71        con.fillStyle=this.col;
72        con.fillRect(this.ex,this.ey,this.w,this.h);
73
74    }
75    
76    //ボール当たり判定
77    b_update(){
78      this.by+=this.byv;
79      this.bx+=this.bxv;
80     　//スクリーン
81      if(SCREEN_SIZE_W<this.bx+this.bw/2){
82        this.bxv+=-1;
83      }
84
85      if(SCREEN_SIZE_H<this.by+this.bw/2){
86        this.byv+=-1;
87      }
88
89      if(this.bx-this.bw/2<0){
90        this.bxv+=1;
91      }
92
93      if(this.by-this.bw/2<0){
94        this.byv+=1;
95      }
96
97　　　//ボールとプレイヤーとの当たり判定
98      if((this.bx<this.px-this.pxv)&&(this.by>this.py-this.bw)){
99        console.log("当たり1");
100        this.by+=1;
101       
102      }
103
104      if((this.bx<this.px+this.w+this.pvx)&&(this.by<this.py+this.bw)){
105        console.log("当たり2");
106        this.by+=1;
107      }
108
109      
110      if((this.bx>this.px-this.pxv-this.bw)&&(this.by>this.py)){
111        
112        
113       
114        console.log("当たり3");
115        this.bx+=1;
116       
117      }
118
119      if((this.bx<this.px+this.w+this.bw)&&(this.by<this.py+this.h)){
120        console.log("当たり4");
121        this.bx+=1;
122      }
123
124    }
125    
126    //プレイヤー当たり判定
127    p_update(z){
128      
129      this.px+=z;
130        if(SCREEN_SIZE_W<this.px+this.w||this.px<=0){
131         return false;
132          
133        }
134        return true;
135    }
136}
137
138let all =new All(100,100,3,3,20,POSITION_X,POSITION_Y,3,0,POSITION_X,E_POSITION_Y,1,0,BLOCK_X,BLOCK_Y,"white");
139
140//FPS
141setInterval(Mainloop,1000/60);
142
143//メインループ
144function Mainloop(){
145    con.clearRect(0,0,SCREEN_SIZE_W,SCREEN_SIZE_H);
146    all.p_draw();
147    all.e_draw();
148    all.b_draw();
149    all.b_update();
150
151   
152
153}
154
155//キーボード操作
156document.onkeydown=function(e){
157    switch(e.key){
158        case 'ArrowLeft':
159          
160            all.p_update(-5);
161            break;
162        
163        case 'ArrowRight':
164            all.p_update(5);
165            break;
166
167    }
168}

試したこと

js
1//ボールとプレイヤーとの当たり判定
2      if((this.bx<this.px-this.pxv)&&(this.by>this.py-this.bw)){
3        console.log("当たり1");
4        this.by+=1;
5       
6      }
7
8      if((this.bx<this.px+this.w+this.pvx)&&(this.by<this.py+this.bw)){
9        console.log("当たり2");
10        this.by+=1;
11      }
12
13      
14      if((this.bx>this.px-this.pxv-this.bw)&&(this.by>this.py)){
15        
16        
17       
18        console.log("当たり3");
19        this.bx+=1;
20       
21      }
22
23      if((this.bx<this.px+this.w+this.bw)&&(this.by<this.py+this.h)){
24        console.log("当たり4");
25        this.bx+=1;
26      }
27
28    }

下記のURLを参考にしてみました。
https://ftvoid.com/blog/post/300

補足情報（FW/ツールのバージョンなど）

vscord

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

回答1件

簡易ですが

js
1      //ボールとプレイヤーとの当たり判定
2      const hitTest = (() => {
3        const ballBottomLine = [{ x: this.bx - this.bw, y: this.by + this.bw }, { x: this.bx + this.bw, y: this.by + this.bw }];
4        const playerTopLine = [{ x: this.px, y: this.py }, { x: this.px + this.w, y: this.py }];
5
6        if (ballBottomLine[0].x > playerTopLine[1].x || ballBottomLine[1].x < playerTopLine[0].x) {
7          return false;
8        }
9
10        if (ballBottomLine[0].y < playerTopLine[0].y) {
11          return false;
12        }
13
14        return true;
15      })();
16
17      if (hitTest) {
18        this.byv = -1;
19      }

投稿2021/10/28 05:13

KAOsaka

総合スコア531

uzer-_.543

2021/10/29 13:03

すいません追加で質問失礼します。ボールが画面下に着地したときに跳ね返ってしまいます。着地したときにゲームオーバーで跳ね返らないようにしたいです。 if(SCREEN_SIZE_H<=this.by){ con.fillStyle="black"; con.font ="50px serif"; con.fillText("Game Over",TEXT_X-TEXT_X/2,TEXT_Y); this.bxv=0; this.byv=0; return false; } このコードでやってみたのですが、ゲームオーバーになってくれません。何が原因なのでしょうか？

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