Javascriptでブロック崩しを作ろう！

ライブラリは使わずJavascriptのみでブロック崩しを作成していきます。

今回作成するブロック崩しはボールやブロックを1000個以上発生させることができます。なおかつスマホからでもスムーズに動作できるようにします。

また特殊な効果を持ったブロックも簡単に追加できるようにしています。

そのため、他のサイトで解説しているブロック崩しの作成方法よりも少し難しくなります。

完成するころにはJavascriptでの簡単なゲームの制作方法がわかるようになっていると思います。

事前に知っておいたほうが良い知識

	操作方法
パソコン	ゲーム画面内でマウスを動かす
スマホ	ゲーム画面内でドラッグする

Javascriptの基礎（変数や関数の使い方、DOMの操作方法など）
canvasで線や四角形など簡単な図形の描き方
HTMLとCSSの基礎

各パーツの呼び方とファイル作成

次のようにblock-breakerフォルダを作成し、その中にHTMLファイル、CSSファイル、JSファイルを作成します。


block-breaker
 ┣━ index.html
 ┣━ style.css
 ┣━ settings.js
 ┣━ bar.js
 ┣━ balls.js
 ┣━ blocks.js
 ┗━ main.js

HTMLの作成

index.html


<!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 -->
        <canvas id="blocks-canvas"></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>

scriptはmain.jsが必ず最後になるようにしてください。また、scriptに defer を付けないとHTML解析前にJavascriptを実行してしまうためエラーとなります。

canvasが2つあるのはなぜ？

canvasはブロックを描くための blocks-canvas と、ボールと操作バーを描くための bar-balls-canvas を用意します。

bar-balls-canvas のほうは、ボールや操作バーを描いたらすぐ消して、少し位置をずらしてまた描くを高速で繰り返します。こうすることでアニメーションのようにボールや操作バーが動いているように見えます。

一方、ブロックは動かないので、頻繁に描くいて消すを繰り返すのは効率が悪いです。そのため blocks-canvas はブロックを消すときだけ操作します。

この二つのcanvasを重ね合わせることで、ボールが当たったらブロックが消えるように見えます。

CSSの作成

style.css


body {
    margin: 0;
}
canvas {
    width: 100%;
    display: block;
}
#game-screen {
    position: relative;
    max-width: 400px;
    user-select: none;
}
#bar-balls-canvas {
    position: absolute;
    left: 0;
    top: 0;
}
#message-container {
    position: absolute;
    top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    pointer-events: none;
}
#message {
    font-size: 1.4em;
    padding: 20px;
}
.label {
    color: white;
    font-weight: bold;
    border: 5px ridge rgb(177, 212, 179);
    background-color: rgba(9, 202, 18, 0.8);
    font-size: 0.8em;
    padding: 4px;
    margin: 5px;
    border-radius: 2px;
}

canvasを width: 100%; にすることでスマホのような小さい画面でもはみ出なくなります。

2つのcanvasを重ね合わせるため bar-balls-canvas を position: absolute にしています。

また、メッセージをゲーム画面中央に表示させるため message-container をゲーム画面いっぱいに表示させて display:flex にして子要素を中央配置にさせています。