리얼과 연동하는 실을 통한 게임 만들기

실을 통과하거나 플라피 버드와 같은 다가오는 벽을 피하는 게임을 obniz로 만들었습니다.
거리 센서를 사용하여 입력하므로,보다 직관적인 조작으로 놀 수 있습니다



youtube에서 보기

소재

obniz

거리 센서 GP2Y0A21YK0F

브라우저를 사용할 수있는 PC/스마트 폰

만드는 방법(하드웨어)

obniz에 거리 센서를 연결할 뿐입니다. 어디에 꽂아도 좋지만, 아래와 같이 연결했습니다.

io0 : 신호선(황색)

io1 : GND(검정)

io2 : VCC(적색)

만드는 방법(소프트웨어)

전체 소스 코드는 여기에 있습니다.

하드웨어와의 연계

거리 센서로부터의 입력은 inputHeight 변수에 자동으로 들어가도록 설정해 두고, 사용하고 싶은 타이밍에 사용하도록 합니다.

  let inputHeight = 0;
  let obniz = new Obniz("OBNIZ_ID_HERE");
  obniz.onconnect = async function () {
    let sensor = obniz.wired("GP2Y0A21YK0F", {vcc: 2, gnd: 1, signal: 0});
    sensor.start(function (height) {
      inputHeight = height;
    })

  };

코드의 {vcc: 2, gnd: 1, signal: 0}는 거리 센서가 연결된 위치에 따라 다릅니다. 「만드는 방법(하드웨어)」에서 똑같이 접속하고 있으면, 그대로 괜찮습니다.

여기에서 취한 값은, 매 프레임내의 처리시에 입력치로서 사용하고 있습니다

   let input = (300 - inputHeight);
   input = Math.min(Math.max(0, input), canvas.height);
   dot.push(input);

게임 로직

dot (실)과 bar (벽)의 변수를 만들고 거기에 각각의 값을 넣습니다.
어느 쪽도 배열로 하고 있어, 복수개 대응하고 있습니다.

//新しい壁を追加
bars.push({x: canvas.width, y: Math.random() * 380 - 80, width: 16, height: 160});

//入力値に応じて糸を動かす
let input = (300 - inputHeight);
input = Math.min(Math.max(0, input), canvas.height);
dot.push(input);
dot.shift();

그리기

HTML5의 canvas를 골고루 사용해 갑니다

<canvas id="field" width="300" height="300"/>

  let canvas = document.getElementById('field');
  let ctx = canvas.getContext('2d');



  function drawDots() {
    ctx.strokeStyle = "white";
    ctx.lineWidth = 1;
    ctx.beginPath();

    for (let i = 0; i < dot.length - 1; i++) {

      if (dot[i] !== undefined && dot[i + 1] !== undefined) {

        ctx.moveTo(i, dot[i]);
        ctx.lineTo(i + 1, dot[i + 1]);
      }
    }
    ctx.closePath();
    ctx.stroke();


  }

  function drawBars() {
    ctx.fillStyle = "red";
    ctx.beginPath();

    for (let i = 0; i < bars.length; i++) {

      ctx.fillRect(bars[i].x, bars[i].y, bars[i].width, bars[i].height);
    }

  }

완성형

요약

물리적인 움직임으로 놀 수 있는 상당히 즐거운!
리프 모션/키넥트 등에서도 같을 수 있지만 obniz도 간단하고 추천합니다