HTML

【竈門炭治郎】JavaScriptで市松模様を作ろう！

 

こんにちは！今日はとっても楽しいことをやってみましょう！

JavaScriptを使って、市松模様の柄を描くプログラムを作る方法を教えちゃいます！

それでは、さっそく始めましょう！

 

目次
  1. 市松模様って何？
  2. さあ、プログラムを見てみよう！
  3. プログラムのポイント！
  4. プログラムの仕組み

市松模様って何？

市松模様は、色違いで交互に並んだ模様を言います。

鬼滅の刃の竈門炭治郎の柄っていうとイメージわきますかね？

 

さあ、プログラムを見てみよう！

// まず、canvasというお絵かきするためのキャンバスを取得する！
const canvas = document.getElementById("canvas");
const context = canvas.getContext("2d"); // そして、お絵かきの筆を取得！

// 模様の大きさやセルの大きさを決めるよ！
const numRows = 8;
const numCols = 8;
const cellSize = 50;

// ここからが本番！お絵かきの作業開始！
for (let row = 0; row < numRows; row++) { // 行のループ
    for (let col = 0; col < numCols; col++) { // 列のループ
        const isEvenRow = row % 2 === 0;
        const isEvenColumn = col % 2 === 0;

        const x = col * cellSize; // セルの左上のx座標を計算
        const y = row * cellSize; // セルの左上のy座標を計算

        // セルが黒いか緑かを決める大事なところ！
        if ((isEvenRow && isEvenColumn) || (!isEvenRow && !isEvenColumn)) {
            context.fillStyle = "#56b99a"; // 黒いセル
        } else {
            context.fillStyle = "#352b29"; // 緑のセル
        }

        // canvasに矩形（セル）を描くよ！
        context.fillRect(x, y, cellSize, cellSize);
    }
}

 

これが今日作るプログラムのすべてです！

プログラムのポイント！

for ループの使い方

まるでお絵かきの筆を動かすように、グリッドの中をぐるぐる回ります！

if 文の使い方

「if (条件) { } else { }」は、セルが黒いか緑かを決める大事なところ！

座標の計算

x と y はセルの左上の座標で、これでどの位置に描画するかを決めています。

お絵かきの色の選び方

context.fillStyle は、セルの色を選ぶところ。黒と緑を使って、素敵な模様を作りましょう！

 

プログラムの仕組み

このプログラムは、二重の for ループを使って、行と列の交点ごとにセルを描画しています。if 文でセルが黒いか緑かを判断し、それに基づいて描画の色を変えています！

 

See the Pen
canvasで竈門炭治郎 by MAC-YA (@maclove1)
on CodePen.

関連記事