Lesson 1: Adding touch to the Controls class?

[TravelTrader]

I want to add mobile controls by touch and I tried to add document.ontouchstart = (event) => {} and also this.canvas. ontouchstart = (event) => {} (by adding the canvas object to Car and then to Controls). But both didn’t work. Checked that by putting console.log(event); and/or this.forward = true; inside the above functions.

Could anyone help me to get that work and especially learn what I did wrong?

Thank you.

And if you, Radu, will read it: The courses are really great. Calm, in detail, perfect. Thanks.

[gniziemazity]

I think that what you describe should work... How are you testing these changes?

[TravelTrader]

Thank you for your fast reply.

Here’s the complete file controls.js with both approaches:

class Controls {
  constructor(cv) {
    this.forward = false;
    this.left = false;
    this.right = false;
    this.reverse = false;

    this.canvas = cv

    this.#addKeyboardListeners;
  }

  #addKeyboardListeners() {
    document.onkeydown = (event) => {
      switch (event.key) {
        case 'ArrowLeft':
          this.left = true;
          break;
        case 'ArrowRight':
          this.right = true;
          break;
        case 'ArrowUp':
          this.forward = true;
          break;
        case 'ArrowDown':
          this.reverse = true;
          break;
      }
    }
    document.onkeyup = (event) => {
      switch (event.key) {
        case 'ArrowLeft':
          this.left = false;
          break;
        case 'ArrowRight':
          this.right = false;
          break;
        case 'ArrowUp':
          this.forward = false;
          break;
        case 'ArrowDown':
          this.reverse = false;
          break;
      }
    }
    this.canvas.ontouchdown = (event) => {
        console.log(event);
        this.forward = true;
    }
    documemt.ontouchdown = (event) => {
      console.log(event);
      this.forward = true;
    }
  }
}

[gniziemazity]

Looks like you're not calling the private method: Change: this.#addKeyboardListeners; To: this.#addKeyboardListeners();

[TravelTrader]

Changed that (and my misspelled „document“) but no touch is recognized.

Update: Tested on laptop and keys also not working. I’m sorry, I’ll check for mistakes in all files myself and let you know the result.

[TravelTrader]

So, with the additional brackets, it works with keys on the computer. Also, when adding onmousedown with a mouse event.

But with the touch function in the laptop browser there’s also no reaction…

[TravelTrader]

It’s possible to ignore the touch events and solve it with mouse events that are working on mobile but for steering controls it would be much better to get multiple touches to drive and steer at the same time like it’s done with the keys. So, it’s not urgent but I’d be happy to know how to do it.