ゲームを進行させる関数の作成

メッセージの表示を更新する関数

main.js


const updateMessage = () => {
    if (gameState === 'initial') {
        messageLabel.style.display = 'block';
        messageLabel.textContent = 'クリックしてスタート！';
    } else if (gameState === 'gameClear') {
        messageLabel.style.display = 'block';
        messageLabel.innerHTML = 'ゲームクリア！<br>クリックしてリセット';
    } else {
        // メッセージを非表示にさせる
        messageLabel.style.display = 'none';
    }
};

ゲームの状態に応じてメッセージ内容を変更したり表示を消したりします。

ゲームの状態を変更する関数

main.js


const changeGameState = (newGameState) => {
    gameState = newGameState;
    updateMessage();
};

gameState を変更すると同時にメッセージも更新させます。

アニメーションを実行する関数

main.js


const run = () => {
    // ゲームクリアしている状態ならアニメーションを止める
    if (gameState === 'gameClear') {
        return;
    }
    // canvasをまっさらの状態にする
    barBallsCtx.clearRect(0, 0, canvasWidth, canvasHeight);
    // 操作バーを描く
    drawBar();
    if (gameState === 'running') {
        // ボールを動かす
        moveBalls();
    } else {
        // ボールを操作バーの上に動かす
        moveBallOnBar();
    }
    // 繰り返しrunを実行させる
    window.requestAnimationFrame(run);
};

この関数では、canvasに描かれているものをすべて消す→操作バーを描く→ボールの座標を動かして描くということをしています。

最後に window.requestAnimationFrame(run) をすることで高速でこれらが繰り返し実行されます。

基本的には毎秒60回、つまり約0.017秒に1回、この run 関数が実行されます。

ゲーム画面をクリックしたときの関数

main.js


const click = () => {
    if (gameState === 'initial' || gameState === 'waiting') {
        changeGameState('running');
    } else if (gameState === 'gameClear') {
        changeGameState('waiting');
        // ゲームを初期状態にする
        initGame();
    };
};

ボールが操作バーの上に乗っている状態のときにゲーム画面をクリックするとボールが動き出します。

ゲームクリアしている状態でクリックするとゲームを初期状態にします。

ゲームを初期状態にする関数

main.js


const initGame = () => {
    changeGameState('initial');
    initBar();
    initBlocks();
    initBall();
    run();
};

ゲームの状態を initial にして操作バー、ブロック、ボールを初期配置します。

そして run を実行してアニメーションを始めます。

イベントリスナーの設定

main.js


barBallsCanvas.addEventListener("mousemove", setBarX);
barBallsCanvas.addEventListener("touchmove", setBarX, { passive: true });
barBallsCanvas.addEventListener("click", click);

マウスを操作して barBallsCanvas 内でカーソルが動いたら setBarX が実行されます。

スマホから barBallsCanvas 内でドラッグしたときも setBarX が実行されます。 passive: true を付けることでパフォーマンスが改善される場合があります。

クリックまたはスマホからタップしたときは click が実行されます。

ゲームの開始

最後に initGame を実行してゲームを開始します。

main.js


initGame();

これでブロック崩しの完成です！

index.htmlをブラウザで開いて遊んでみてください。

全体のソースコード

HTMLとCSS

index.html

style.css


<!DOCTYPE html>
<html lang="jp">
<head>
    <title>ブロック崩し</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="style.css" rel="stylesheet" />
    <script defer src="settings.js"></script>
    <script defer src="bar.js"></script>
    <script defer src="balls.js"></script>
    <script defer src="blocks.js"></script>
    <script defer src="main.js"></script>
</head>
<body>
    <div id="game-screen">
        <canvas id="blocks-canvas"></canvas>
        <canvas id="bar-balls-canvas"></canvas>
        <!-- メッセージを表示させる -->
        <div id="message-container">
            <div id="message" class="label"></div>
        </div>
        <!-- ボールやブロックの数を表示させる -->
        <div id="counter" class="label">
            <div>ブロックの数：<span id="blocks-count"></span></div>
        </div>
    </div>
</body>
</html>

Javascript

settings.js

bar.js

blocks.js

balls.js

main.js


const canvasWidth = 400;
const canvasHeight = 550;
const backgroundColor = '#333333';
const blocksAreaWidth = canvasWidth;
const blocksAreaHeight = 200;
const blocksRowLength = 4;
const blocksColumnLength = 4;
const blockWidth = blocksAreaWidth / blocksColumnLength;
const blockHeight = blocksAreaHeight / blocksRowLength;
const barWidth = 200;
const barHalfWidth = barWidth / 2;
const barHeight = 10;
const barPosition = canvasHeight - 60;
const barColor = 'white';
const ballRadius = 8;
const speed = 3;
const ballColor = 'orange';
let gameState = 'initial';
const blocksCanvas = document.getElementById('blocks-canvas');
blocksCanvas.width = canvasWidth;
blocksCanvas.height = canvasHeight;
const blocksCtx = blocksCanvas.getContext("2d");
const barBallsCanvas = document.getElementById('bar-balls-canvas');
barBallsCanvas.width = canvasWidth;
barBallsCanvas.height = canvasHeight;
const barBallsCtx = barBallsCanvas.getContext("2d");
const messageLabel = document.getElementById('message');
const blocksCountLabel = document.getElementById('blocks-count');