スマホで遊べるように、キーボードイベントをマウスオーバーイベントに変更しようと色々と試してみて、左右には動くように出来たのですが、ジャンプを追加すると動かなくなってしまいます。書き方を教えて下さい。よろしくお願いします。

<span>タグでボタンの代わりを用意して、onmouseoverで動かそうとしてます。

Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')

Play_A.addEventListener("mouseover", () => {

この部分にエラーが出ます。

HTML
1<div class="play_touch" ontouchstart="">
2        <br><span id="Play_Left" onmouseover="" onmouseout=""></span>
3        <br><span id="Play_Right" onmouseover="" onmouseout=""></span>
4        <br><span id="play_B" onmouseover="" onmouseout=""></span>
5        <br><span id="Play_A" onmouseover="" onmouseout=""></span>
6        </div>

JavaScript
1// キーボードが押された時に呼ばれる
2document.body.addEventListener("keydown", (event) => {
3  if (event.key === "ArrowLeft") keyb.Left = true;
4  if (event.key === "ArrowRight") keyb.Right = true;
5  if (event.key === "z") keyb.BBUTTON = true;
6  if (event.key === "x") keyb.ABUTTON = true;
7});
8
9// キーボードが離された時に呼ばれる
10document.body.addEventListener("keyup", (event) => {
11  if (event.key === "ArrowLeft") keyb.Left = false;
12  if (event.key === "ArrowRight") keyb.Right = false;
13  if (event.key === "z") keyb.BBUTTON = false;
14  if (event.key === "x") keyb.ABUTTON = false;
15});
16
17// マウスオーバーイベント
18const Play_A = document.getElementById("play_A");
19const Play_Left = document.getElementById("Play_Left");
20const Play_Right = document.getElementById("Play_Right");
21
22//keyb.ABUTTON、　ジャンプボタン、これが上手く出来ません。
23Play_A.addEventListener("mouseover", () => {
24keyb.ABUTTON = true;
25});
26Play_A.addEventListener("mouseout", () => {
27keyb.ABUTTON = false;
28});
29
30//keyb.Left、keyb.Right、　左右に動かせます。
31Play_Left.addEventListener("mouseover", () => {
32  keyb.Left = true;
33});
34Play_Left.addEventListener("mouseout", () => {
35keyb.Left = false;
36});
37
38Play_Right.addEventListener("mouseover", () => {
39  keyb.Right = true;
40});
41Play_Right.addEventListener("mouseout", () => {
42keyb.Right = false;
43});

javaScript
1//
2// おじさんクラス
3//
4
5const ANIME_STAND = 1;
6const ANIME_WALK = 2;
7const ANIME_BRAKE = 4;
8const ANIME_JUMP = 8;
9const GRAVITY = 4;
10const MAX_SPEED = 32;
11
12class Ojisan {
13  constructor(x, y) {
14    this.x = x << 4;
15    this.y = y << 4;
16    this.vx = 0;
17    this.vy = 0;
18    this.anim = 0;
19    this.snum = 0;
20    this.acou = 0;
21    this.dirc = 0;
22    this.jump = 0;
23  }
24
25  //   床の判定
26  checkFloor() {
27    if (this.vy <= 0) return;
28    let lx = (this.x + this.vx) >> 4;
29    let ly = (this.y + this.vy) >> 4;
30
31    if (field.isBlock(lx + 1, ly + 31) || field.isBlock(lx + 14, ly + 31)) {
32      if (this.anim == ANIME_JUMP) this.anim = ANIME_WALK;
33      this.jump = 0;
34      this.vy = 0;
35      this.y = ((((ly + 31) >> 4) << 4) - 32) << 4;
36    }
37  }
38
39  //   天井の判定
40  checkCeil() {
41    if (this.vy >= 0) return;
42
43    let lx = (this.x + this.vx) >> 4;
44    let ly = (this.y + this.vy) >> 4;
45
46    let bl;
47    if ((bl = field.isBlock(lx + 8, ly + 5))) {
48      this.jump = 15;
49      this.vy = 0;
50
51      blook.push(new Blook(bl, (lx + 8) >> 4, (ly + 5) >> 4));
52    }
53  }
54
55  //   横の壁の判定
56  checkWall() {
57    let lx = (this.x + this.vx) >> 4;
58    let ly = (this.y + this.vy) >> 4;
59
60    // 右側のチェック
61    if (
62      field.isBlock(lx + 15, ly + 9) ||
63      field.isBlock(lx + 15, ly + 15) ||
64      field.isBlock(lx + 15, ly + 24)
65    ) {
66      this.vx = 0;
67      this.x -= 8;
68    }
69    // 左側のチェック
70    else if (
71      field.isBlock(lx, ly + 9) ||
72      field.isBlock(lx, ly + 15) ||
73      field.isBlock(lx, ly + 24)
74    ) {
75      this.vx = 0;
76      this.x += 8;
77    }
78  }
79
80  //ジャンプ処理
81  updateJump() {
82    //ジャンプ
83    if (keyb.ABUTTON) {
84      if (this.jump == 0) {
85        this.anim = ANIME_JUMP;
86        this.jump = 1;
87      }
88      if (this.jump < 15) this.vy = -(64 - this.jump);
89    }
90    if (this.jump) this.jump++;
91  }
92
93  //横方向の移動
94  updateWalkSub(dir) {
95    //最高速まで加速
96    if (dir == 0 && this.vx < MAX_SPEED) this.vx++;
97    if (dir == 1 && this.vx > -MAX_SPEED) this.vx--;
98
99    //ジャンプしてない時
100    if (!this.jump) {
101      //立ちポーズだった時はカウンタリセット
102      if (this.anim == ANIME_STAND) this.acou = 0;
103      //アニメを歩きアニメ
104      this.anim = ANIME_WALK;
105      //方向を設定
106      this.dirc = dir;
107      //逆方向の時はブレーキをかける
108      if (dir == 0 && this.vx < 0) this.vx++;
109      if (dir == 1 && this.vx > 0) this.vx--;
110      //逆に強い加速の時はブレーキアニメ
111      if ((dir == 1 && this.vx > 8) || (dir == 0 && this.vx < -8))
112        this.anim = ANIME_BRAKE;
113    }
114  }
115
116  //歩く処理
117  updateWalk() {
118    //横移動
119    if (keyb.Left) {
120      this.updateWalkSub(1);
121    } else if (keyb.Right) {
122      this.updateWalkSub(0);
123    } else {
124      if (!this.jump) {
125        if (this.vx > 0) this.vx -= 1;
126        if (this.vx < 0) this.vx += 1;
127        if (!this.vx) this.anim = ANIME_STAND;
128      }
129    }
130  }
131
132  //スプライトを変える処理
133  updateAnim() {
134    //スプライトの決定
135    switch (this.anim) {
136      case ANIME_STAND:
137        this.snum = 0;
138        break;
139      case ANIME_WALK:
140        this.snum = 2 + ((this.acou / 6) % 3);
141        break;
142      case ANIME_JUMP:
143        this.snum = 6;
144        break;
145      case ANIME_BRAKE:
146        this.snum = 5;
147        break;
148    }
149    //左向きの時は＋４８を使う
150    if (this.dirc) this.snum += 48;
151  }
152
153  //毎フレーム毎の更新処理
154  update() {
155    //アニメ用のカウンタ
156    this.acou++;
157    if (Math.abs(this.vx) == MAX_SPEED) this.acou++;
158
159    this.updateJump();
160    this.updateWalk();
161    this.updateAnim();
162
163    //重力
164    if (this.vy < 64) this.vy += GRAVITY;
165
166    // 横の壁のチェック
167    this.checkWall();
168
169    // 床のチェック
170    this.checkFloor();
171
172    // 天井のチェック
173    this.checkCeil();
174
175    //実際に座標を変えてる
176    this.x += this.vx;
177    this.y += this.vy;
178
179    /*
180		//床にぶつかる
181		if( this.y > 160<<4 )
182		{
183			if(this.anim==ANIME_JUMP)this.anim=ANIME_WALK;
184			this.jump = 0;
185			this.vy   = 0;
186			this.y    = 160<<4;
187		}
188		*/
189  }
190
191  //毎フレーム毎の描画処理
192  draw() {
193    let px = (this.x >> 4) - field.scx;
194    let py = (this.y >> 4) - field.scy;
195    drawSprite(this.snum, px, py);
196  }
197}
198