シンプルなゲームを作っていこうと思います。
まずはレベルデザインです。
昔の2Dゲームのようなシンプルなマップは、テキストファイルや単純な二次元配列で壁や障害物を定義して、それを描画に利用することで簡単に作れるようです。
JavaScriptで配列を定義して、それを基にレベルマップを描画してみようと思います。
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ファイルを作成します。
code main.html
作成したmain.htmlで「html:5」と打ち、サジェストされるhtml:5のテンプレートを選択します。
html:5
<!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を指定して読み込みます。
<body>
<canvas id="gameCanvas" width="500" height="350"></canvas>
<script src="level.js"></script>
</body>
任意ですが、headにstyle要素を作成し、canvas要素の背景を設定したりします。
<style>
canvas {
background: #eee;
display: block;
margin: 0 auto;
}
</style>
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の全体はこちらです。
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()
これで、壁(黒いところ)と動ける範囲(白いところ)が描画できました。
ひとまず黒と白で塗り分けただけですが、たとえば
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],
]
ここに、障害物を追加したり、プレイヤーの描画したりして、
探索ゲームであったり、倉庫番ゲームができます。
ひとまずはシンプルな配列からレベルマップを作成するところまででした。
以上