プレイヤーの操作で画面外に出て行ってしまう

前提・実現したいこと

javascriptでテニスゲームを作っています。

全コード

js
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      if(SCREEN_SIZE_W<this.bx+this.bw/2){
81        this.bxv+=-1;
82      }
83
84      if(SCREEN_SIZE_H<this.by+this.bw/2){
85        this.byv+=-1;
86      }
87
88      if(this.bx-this.bw/2<0){
89        this.bxv+=1;
90      }
91
92      if(this.by-this.bw/2<0){
93        this.byv+=1;
94      }
95
96      let flag=true;
97
98      
99
100      if((this.bx<this.px-this.pxv)&&(this.bx<this.px+this.w+this.pvx)&&(this.by>this.py-this.bw)&&(this.by<this.py+this.bw)){
101        flag=true;
102        this.by+=(-this.byv);
103       
104        console.log("当たり");
105       
106       }else{
107         flag=false;
108       }
109
110    }
111    
112    //プレイヤー当たり判定
113    p_update(z){
114      
115      this.px+=z;
116        if(SCREEN_SIZE_W<this.px+this.w||this.px<=0){
117         return false;
118          
119        }
120        return true;
121    }
122}
123
124let 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");
125
126//FPS
127setInterval(Mainloop,1000/60);
128
129//メインループ
130function Mainloop(){
131    con.clearRect(0,0,SCREEN_SIZE_W,SCREEN_SIZE_H);
132    all.p_draw();
133    all.e_draw();
134    all.b_draw();
135    all.b_update();
136
137   
138
139}
140
141//キーボード操作
142document.onkeydown=function(e){
143    switch(e.key){
144        case 'ArrowLeft':
145          
146            all.p_update(-5);
147            break;
148        
149        case 'ArrowRight':
150            all.p_update(5);
151            break;
152
153    }
154}
155

問題のソースコード、試したこと

js
1 //プレイヤー当たり判定
2    p_update(z){
3      
4      this.px+=z;
5        if(SCREEN_SIZE_W<this.px+this.w||this.px<=0){
6         return false;
7          
8        }
9        return true;
10    }
11}

returnでfalseをしたのですが、画面外に出てしまいます。
プレイヤーの四角の当たり判定がききません。
何か他に方法ありますか⁇

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

vscord

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

回答1件

ベストアンサー

p_updateで、条件分岐の前に位置の更新をしているからだと思います。true/falseに関係なく、p_updateが実行されたら位置は更新されてしまいます。

JavaScript
1 //プレイヤー当たり判定
2p_update(z){
3    tmp=this.px+z
4    if(SCREEN_SIZE_W<tmp+this.w||tmp<=0){
5        return false;
6    }
7
8    this.px+=z;
9    return true;
10}