Two Player Tennis Game with obniz

Make things

Let’s play tennis game with two obnizes. Obniz has a switch and a display, so you can create a game easily!

Materials

• obniz Board x2
• power supply for obniz x2

How to make

Hardware connection

Connect a power supply to an obniz Board. No parts are needed. Run the program below, and you can play tennis game with two obnizes. You can control your tennis racket(block) by moving the switch on the top left of the obniz left and right.

Software

To display ball and tennis rackets(blocks) on obniz display, draw shapes on the canvas of HTML like drawToContext function.

Please read Drawing shapes with canvas – Web APIs | MDN for details.

drawToContext: async function() {
    ctx1.beginPath();
    ctx1.arc(
      this.ball.x,
      this.ball.y,
      this.ball.radius,
      (0 * Math.PI) / 180,
      (360 * Math.PI) / 180,
      true
    );
    ctx1.fill();

    ctx1.fillRect(
      this.myBar.x,
      this.myBar.y,
      this.myBar.width,
      this.myBar.height
    );
    ctx1.fillRect(
      this.yourBar.x,
      this.yourBar.y,
      this.yourBar.width,
      this.yourBar.height
    );

    ctx2.fillRect(
      width - this.myBar.x - this.myBar.width,
      this.myBar.y,
      this.myBar.width,
      this.myBar.height
    );
    ctx2.fillRect(
      width - this.yourBar.x - this.yourBar.width,
      this.yourBar.y,
      this.yourBar.width,
      this.yourBar.height
    );

    ctx2.beginPath();
    ctx2.arc(
      width - this.ball.x,
      this.ball.y,
      this.ball.radius,
      (0 * Math.PI) / 180,
      (360 * Math.PI) / 180,
      true
    );
    ctx2.fill();
  }

 

Program