操作バーの関数の作成

操作バーがcanvasのどの位置にあるのかはx座標とy座標で指定します。

canvasにおける座標は左上が0で、右に行くほどx座標が大きくなり、下に行くほどy座標が大きくなります。

たとえば横幅100px、縦幅200pxのcanvasを作成して、x座標が50、y座標が100の位置は次のようになります。

操作バーの作成

y は操作バーの上側のy座標、 bottomY は下側のy座標です。操作バーは縦方向に動かすことはできないのでこれらの値は常に一定です。

x は操作バーの真ん中のx座標、 leftX は左端のx座標、 rightX は右端のx座標です。操作バーを動かすときには x の値を変えます。

操作バーを初期配置する関数

bar.js


let bar;
const initBar = () => {
    bar = {
        x: canvasWidth / 2,
        y: barPosition,
        bottomY: barPosition + barHeight,
        get leftX () { return this.x - barHalfWidth; },
        get rightX () { return this.x + barHalfWidth; }
    };
};

操作バーの初期配置はcanvasの横幅の中央に位置するようにしています。

get leftX () { return this.x - barHalfWidth; } はゲッターと呼ばれる書き方です。こうすることで操作バーの左端のx座標を bar.leftX という書き方で取得することができます。

操作バーを動かす関数

操作バーをマウスやスマホのドラッグで動かす関数を作ります。

bar.js


const setBarX = (event) => {
    // パソコンのマウスで操作した場合
    if (event.offsetX) {
        bar.x = event.offsetX;
    // スマホのドラッグで操作した場合
    } else {
        const touchEvent = event.changedTouches[0];
        bar.x = touchEvent.clientX - touchEvent.target.getBoundingClientRect().left;
    }
    // 縮尺の調整をする
    bar.x *= barBallsCanvas.width / barBallsCanvas.clientWidth;
    // canvasの左端からはみ出してしまう場合、canvas内に納まるようにする
    if (bar.leftX < 0) {
        bar.x = barHalfWidth;
    // canvasの右端からはみ出してしまう場合、canvas内に納まるようにする
    } else if (bar.rightX > canvasWidth) {
        bar.x = canvasWidth - barHalfWidth;
    }
};

パソコンのマウスで操作した場合、引数の event には offsetX が含まれます。これはカーソルがcannvas上のどこに位置しているのかを表す数値です。これを bar.x に代入することでカーソルと操作バーの位置を同じにすることができます。

スマホのドラッグで操作した場合、 offsetX が存在しません。その代わり event.changedTouches[0] の中に clientX があるのでこれを利用します。

event.clientX から event.target.getBoundingClientRect().left を引くことで、canvas上のx座標を知ることができます。図で表すと次のようになります。

また、このブロック崩しはレスポンシブ対応しているため、ゲーム画面が縮小されたときに位置の調整をしなければなりません。

たとえば、横幅が100pxしかない画面からこのゲームを見たとしましょう。

右端ギリギリのところにマウスでカーソルを置いたとき、 event.offsetX の値は100なので、 bar.x も100となります。しかし、canvasの横幅は400に設定しているため、操作バーの位置は左のほうに表示されてしまいます。

そのため縮尺の調整をおこないます。今回の例では barBallsCanvas.width の値は400 barBallsCanvas.clientWidth の値は100となります。

bar.x に400÷100⁼4を掛けることで、 bar.x の値は400となります。これでカーソルの位置と操作バーの位置を一致させることができます。

操作バーをcanvasに描く関数

bar.js


const drawBar = () => {
    barBallsCtx.fillStyle = barColor;
    barBallsCtx.fillRect(bar.leftX, bar.y, barWidth, barHeight);
};

barBallsCtx.fillStyle にsettings.jsで定義した色を設定して、 barBallsCtx.fillRect で四角形を描きます。

ボールが衝突したときの関数

bar.js


const clideBar = (ball) => {
    ball.dy = -ball.dy;
};

引数には衝突したボールを受け取ります。ここでは dy の符号を逆にしています。こうすることでボールの進行方向を反転させています。のちのち、当たった場所によって跳ね返す角度を変更できるようにします。

以上でbar.jsは完成です。ここで作成した関数はmain.jsで使われます。

操作バーの関数の作成

操作バーのcanvas上での位置の決め方

操作バーの作成

操作バーを初期配置する関数

操作バーを動かす関数

操作バーをcanvasに描く関数

ボールが衝突したときの関数