JavaScript：セル状のステージに画像を配置する

async関数とawaitを用いて画像ファイルを読み込んだあとにゲーム画面を描画するようにしている。
クリックしたセル位置に読み込んだ画像をランダムで表示させている。

ソースコード

index.html

1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>OTIMONO(04スプライトをステージに描画する)</title>
7    <style>
8        *{
9            margin: 0;
10            padding: 0;
11        }
12        body{
13            margin: 0 50px;
14        }
15    </style>
16    <script src="main.js" type="text/javascript"></script>
17</head>
18<body>
19    <canvas id="canvas" width="512" height="512"></canvas>
20</body>
21</html>

main.js

1// キャンバスでのマウスイベントの状態を表示する
2let canvas = null;
3let g = null;
4let pos = {x:0, y:0};       // キャンバス上のマウス座標
5let cpos = {x:0, y:0};      // マウス座標から得られるセル位置
6let isMouseDown = false;    // マウスを押しているか？
7 
8const CELL_SIZE = 64;                           // パズルキャラのサイズ(64x64ピクセル)
9const ROW_SIZE = COLUMN_SIZE = 512 / CELL_SIZE; // 行と列に何個並べるか？
10const CELL_LENGTH = ROW_SIZE * COLUMN_SIZE;     // パズルキャラの数
11 
12// ゲームに使う画像ファイル
13const image_files = ["null.png", "alien.png", "apple.png", "dog.png", "obake.png", "ultra.png", "usi.png"];
14 
15// 画像オブジェクト（画像ファイルをゲームで利用するため）
16let images = [];
17 
18// ステージ情報配列
19let stage = new Array(CELL_LENGTH);
20 
21/*
22 * マウスを動かしている時の処理
23 */
24const mouseMoveListener = (e) => {
25    // オフセット位置：キャンバスがブラウザの左上からどれくらいの位置にあるか？(rect.left, rect.top)
26    const rect = e.target.getBoundingClientRect();
27 
28    // e.clientXとe.clientYはブラウザ左上からのキャンバスクリック位置なのでオフセット分を引くとキャンバス上の座標が分かる
29    pos.x = e.clientX - rect.left;
30    pos.y = e.clientY - rect.top;
31 
32    // マウス座標からセル位置を求める
33    cpos.x = Math.floor(pos.x / CELL_SIZE);
34    cpos.y = Math.floor(pos.y / CELL_SIZE);
35};
36 
37/*
38 * マウスボタンを押した時の処理
39 */
40const mouseDownListener = () => {
41    isMouseDown = true;
42    // ステージのクリック位置に画像を設定
43    const index = Math.floor(Math.random() * (images.length-1)) + 1;    // ランダム
44    stage[cpos.x + cpos.y * COLUMN_SIZE] = index;
45    console.log(cpos);
46};
47 
48/*
49 * マウスボタンを離した時の処理
50 */
51const mouseUpListener = () => {
52    isMouseDown = false;
53};
54 
55/*
56 * キャンバスにマウス情報を表示（利用していない）
57 */
58const drawMouseInfo = ()=> {
59    // 表示する文字列を設定
60    const mouseDownString = isMouseDown ? "押した!" : "離した!";
61    const txtPos = `x: ${pos.x} y:${pos.y} ${mouseDownString}`;
62 
63    // マウス情報を表示する
64    g.fillStyle = "#555";
65    g.fillText(txtPos, 150, canvas.height/2);
66}
67 
68/*
69 * 背景を表示
70 */
71const drawBackground = ()=> {
72    let x = 0, y = 0;   // 描画するセル位置
73    let color1 = "pink", color2 = "skyblue";    // 市松模様のステージ色
74 
75    for(i=0; i<CELL_LENGTH; i++){
76        // 1段下がると先頭の色を入れ替える
77        if(i % 8 == 0) [color1, color2] = [color2, color1];
78        // 格子状にブロックを表示
79        x = i % COLUMN_SIZE;            // x方向セル位置
80        y = Math.floor(i / ROW_SIZE);   // Y方向セル位置
81 
82        // 色を交互に設定
83        bgColor = (i % 2 == 0) ? color1: color2;
84        g.fillStyle = bgColor;
85        g.fillRect(x * CELL_SIZE, y * CELL_SIZE, CELL_SIZE, CELL_SIZE);
86    }
87}
88 
89/*
90 * カーソルを表示
91 */
92const drawCursor = ()=> {
93    g.fillStyle = "rgba(128, 128, 128, 0.5)";   // グレー色で透過
94    g.fillRect(cpos.x * CELL_SIZE, cpos.y * CELL_SIZE, CELL_SIZE, CELL_SIZE);
95}
96 
97/*
98 * ステージを表示
99 */
100const drawStage = ()=> {
101    for(let i=0; i<CELL_LENGTH; i++){
102        x = i % COLUMN_SIZE;            // x方向セル位置
103        y = Math.floor(i / ROW_SIZE);   // Y方向セル位置
104 
105        g.drawImage(images[stage[i]], x*CELL_SIZE, y*CELL_SIZE);
106    }
107}
108 
109/*
110 * 画像ファイル読み込み
111 */
112const loadImages = async ()=> {
113    const images = [];
114    const promises = [];
115 
116    image_files.forEach((url) =>{
117        const promise = new Promise((resolve)=>{
118            const img = new Image();
119            img.addEventListener("load", ()=>{
120                console.log("loaded " + url);
121                resolve();  // 読み込み完了通知
122            });
123            img.src = "./asset/" + url; // 画像ファイル読み込み開始
124            images.push(img);   // 画像オブジェクト配列に格納
125        });
126        promises.push(promise);
127    });
128    await Promise.all(promises);
129    return images;
130}
131 
132/*
133 * ゲームのメイン処理（まだゲームではない）
134 */
135const GameMain = () =>{
136    // キャンバスクリア
137    g.clearRect(0, 0, canvas.width, canvas.height);
138    // ステージ描画
139    drawBackground();
140    // カーソル描画
141    drawCursor();
142    // ステージ表示
143    drawStage();
144    // マウス情報表示
145    //drawMouseInfo();
146    // フレーム再描画
147    requestAnimationFrame(GameMain);
148}
149 
150/*
151 * 起動時の処理
152 */
153window.addEventListener("load", async ()=>{
154    canvas = document.getElementById("canvas");
155    g = canvas.getContext("2d");
156    g.font = "bold 24px System";    // フォントサイズ・フォント種類 設定
157 
158    // マウスイベント設定
159    canvas.addEventListener("mousemove", mouseMoveListener, false);
160    canvas.addEventListener("mousedown", mouseDownListener, false);
161    canvas.addEventListener("mouseup", mouseUpListener, false);
162 
163    // 画像ファイルを読み込む
164    images = await loadImages(image_files);
165    console.log(images);
166 
167    // ステージ情報を空にする
168    stage.fill(0);
169 
170    // ゲームのメイン処理呼び出し（ゲーム開始）
171    GameMain();
172});