引数をクラスにもたせてプレイヤーを動かしたい

前提・実現したいこと

javascriptでミニゲーム（テニス）を作ろうとしています。

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

クラスで作ったプレイヤーが左に動いてくれない

該当のソースコード

js
1//プレイヤー（下）
2class Player{
3    constructor(x,y,w,h,col){
4        this.x=x;
5        this.y=y;
6        this.w=w;
7        this.h=h;
8        this.col=col;
9
10    }
11    draw(){
12
13    　con.fillStyle=this.col;
14      con.fillRect(this.x,this.y,this.w,this.h);
15      con.strokeRect(this.x,this.y,this.w,this.h);
16
17    }
18
19    update(z){
20        //playerが左に動いてくれない
21        this.x+=z;
22        
23    }
24    
25    
26}

###全コード

js
1
2//画面取得
3let can=document.getElementById('can');
4let con=can.getContext('2d');
5
6//スクリーンサイズ
7const SCREEN_W=500;
8const SCREEN_H=500;
9
10//敵、プレイヤーのサイズ
11const p_size_w=100;
12const p_size_h=50;
13
14//キャンバス
15can.width=SCREEN_W;
16can.height=SCREEN_H;
17can.style.backgroundColor="#aaf";
18
19//敵、プレイヤーの位置
20const POSITION_X=SCREEN_W/2-p_size_w/2;
21const POSITION_Y=0;
22const E_POSITION_Y=SCREEN_H-p_size_h;
23
24//ボール
25class Ball{
26    constructor(x,y,w,h,col,vx,vy){
27        this.x=x;
28        this.y=y;
29        this.w=w;
30        this.h=h;
31        this.col=col;
32        this.vx=vx;
33        this.vy=vy;
34        this.vx=vx;
35        this.vy=vy;
36        
37
38    }
39    draw(){
40        
41        con.fillStyle=this.col;
42        con.beginPath();
43        con.arc(this.x, this.y, this.w, this.h, Math.PI*2, false) ;
44        con.fill();
45    }
46
47    update(){
48        //当たり判定
49        this.x+=this.vx;
50        this.y+=this.vy;
51        if(SCREEN_W<=this.x+this.w){
52            this.vx=-1;
53
54        }
55
56        if(SCREEN_H<this.y+this.w){  
57          this.vy=-1;
58        }
59
60        if(this.x-this.w<0){
61            this.vx=1;
62            
63        }
64
65        if(this.y-this.w<0){
66            this.vy=1;
67
68        }
69
70    }
71}
72
73//プレイヤー（下）
74class Player{
75    constructor(x,y,w,h,col){
76        this.x=x;
77        this.y=y;
78        this.w=w;
79        this.h=h;
80        this.col=col;
81
82    }
83    draw(){
84
85    　con.fillStyle=this.col;
86      con.fillRect(this.x,this.y,this.w,this.h);
87      con.strokeRect(this.x,this.y,this.w,this.h);
88
89    }
90
91    update(z){
92        //playerが左に動いてくれない
93        this.x+=z;
94        
95    }
96    
97    
98}
99
100//敵キャラ（上）
101class Enemy{
102    constructor(x,y,w,h,col){
103        this.x=x;
104        this.y=y;
105        this.w=w;
106        this.h=h;
107        this.col=col;
108
109    }
110    draw(){
111    　con.fillStyle=this.col;
112      con.fillRect(this.x,this.y,this.w,this.h);
113      con.strokeRect(this.x,this.y,this.w,this.h);
114
115    }
116}
117
118let ball=new Ball(200,10,20,0,"black",1,1);
119
120let player=new Player(POSITION_X,E_POSITION_Y,p_size_w,p_size_h,"#55f");
121
122let enemy=new Enemy(POSITION_X,POSITION_Y,p_size_w,p_size_h,"#55f");
123
124
125//FPS
126setInterval(mainloop,1000/60);
127
128//メインループ
129function mainloop(){
130    con.clearRect(0,0,SCREEN_W,SCREEN_H);
131    ball.draw();
132    ball.update();
133    enemy.draw();
134    player.draw();
135
136
137}
138
139//キーボード操作
140document.onkeydown=function(e){
141    switch(e.key){
142        case 'ArrowLeft':
143            player.draw();
144            player.update(-1);
145        
146        case 'ArrowRight':
147            player.draw();
148            player.update(1);
149
150    }
151
152}

試したこと

js
1update(){
2        //playerが左に動いてくれない
3        this.x+=(-1);
4        
5    }

引数を持たなくすると普通に動いてくれます。

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

vscord

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

回答2件

引数を持たなくすると普通に動いてくれます。

ざっと見た感じ、『引数が渡されていないから』じゃないかなと。

Player側にあるupdateメソッドはupdate(x)というふうに引数を取っている。

でも、呼び出し側のmainloop関数でのplayer.drawメソッドでは『引数無し』の方を動かしている。

JavaScript
1//メインループ
2function mainloop(){
3    con.clearRect(0,0,SCREEN_W,SCREEN_H);
4    ball.draw();
5    ball.update();
6    enemy.draw();
7    player.draw();
8
9
10}