0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

シンプルなゲームを作っていこうと思います。
まずはレベルデザインです。

昔の2Dゲームのようなシンプルなマップは、テキストファイルや単純な二次元配列で壁や障害物を定義して、それを描画に利用することで簡単に作れるようです。

JavaScriptで配列を定義して、それを基にレベルマップを描画してみようと思います。

level.js
const levelMap = [
    [0, 0, 0, 0, 0],
    [0, 1, 1, 1, 0],
    [0, 1, 1, 1, 0],
    [0, 1, 1, 1, 0],
    [0, 0, 0, 0, 0],
]

このlevelMapを利用して、マップを描画していきます。

開発環境

マシン:MacBookAir(Apple M3)
OS:macos 15.5(24F74)
エディタ:Visual Studio Code 1.92.2

準備

描画の準備として、HTMLでCanvasを用意しておきます。

main.htmlファイルを作成します。

zsh
code main.html

作成したmain.htmlで「html:5」と打ち、サジェストされるhtml:5のテンプレートを選択します。

main.html
html:5
main.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

bodyにcanvas要素と、script要素を作成します。
script要素には、冒頭でレベルマップを作ったlevel.jsを指定して読み込みます。

main.html
<body>
    <canvas id="gameCanvas" width="500" height="350"></canvas>
    <script src="level.js"></script>
</body>

任意ですが、headにstyle要素を作成し、canvas要素の背景を設定したりします。

main.html
<style>
    canvas {
        background: #eee;
        display: block;
        margin: 0 auto;
    }
</style>

main.htmlの全体はこちらです。

main.html
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>倉庫番js</title>
    <style>
        canvas {
            background: #eee;
            display: block;
            margin: 0 auto;
        }
    </style>
</head>

<body>
    <canvas id="gameCanvas" width="500" height="350"></canvas>
    <script src="level.js"></script>
</body>

</html>

レベルマップ描画

描画の準備としてcanvasを作成できたので、次はレベルマップに基づいてマップを描画してます。

やることは

  • levelMapの二重配列を二重ループする
  • ループのインデックスを基に、ずらしながら正方形を描画する
  • レベルマップの0は壁、1は動ける範囲、という設定で色を変える

です。
level.jsの全体はこちらです。

level.js
const levelMap = [
    [0, 0, 0, 0, 0],
    [0, 1, 1, 1, 0],
    [0, 1, 1, 1, 0],
    [0, 1, 1, 1, 0],
    [0, 0, 0, 0, 0],
]

const BLOCK_SIZE = 50;

function draw() {
    const canvas = document.getElementById('gameCanvas');
    if (canvas.getContext) {
        const ctx = canvas.getContext('2d');
        levelMap.forEach((row, rowIndex) => {
            row.forEach((cell, cellIndex) => {
                ctx.beginPath();
                if (cell == 0) {
                    ctx.fillStyle = '#000'
                } else {
                    ctx.fillStyle = '#fff'
                }
                ctx.rect(cellIndex * BLOCK_SIZE, rowIndex * BLOCK_SIZE, BLOCK_SIZE, BLOCK_SIZE)
                ctx.fill()
                ctx.closePath();
            })
        }
        )
    }
}

draw()

これで、壁(黒いところ)と動ける範囲(白いところ)が描画できました。

スクリーンショット 2025-07-13 22.55.01.png

ひとまず黒と白で塗り分けただけですが、たとえば

const levelMap = [
    [0, 0, 0, 0, 0, 0, 0],
    [0, 1, 0, 1, 1, 1, 0],
    [0, 1, 1, 1, 1, 0, 0],
    [0, 0, 1, 0, 1, 0, 0],
    [0, 0, 0, 0, 0, 0, 0],
]

のように配列の中身を変えると、
スクリーンショット 2025-07-13 23.25.17.png
こんなマップになります。

ここに、障害物を追加したり、プレイヤーの描画したりして、
探索ゲームであったり、倉庫番ゲームができます。

ひとまずはシンプルな配列からレベルマップを作成するところまででした。
以上

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?