JavaScript Canvas で三目並べゲームを実装

この記事では、JavaScript Canvasで三目並べゲームを実装するための具体的なコードを参考までに紹介します。具体的な内容は次のとおりです。

インデックス.html

<!DOCTYPE html>
<html>
    <ヘッド>
        <title>三目並べ</title>
        <スタイル>
            * {
                パディング: 0;
                マージン: 0;
            }
 
            本文、html、#game {
                高さ: 100%;
                背景: #FCFCFC;
            }
 
            ＃ゲーム {
                ディスプレイ: フレックス;
                アイテムの位置を中央揃えにします。
                コンテンツの中央揃え: 中央;
            }
        </スタイル>
    </head>
    <本文>
        <div id="ゲーム">
            <キャンバスid="キャンバス" 幅="300" 高さ="300"></キャンバス>
        </div>
        <script src="game.js"></script>
    </本文>
</html>

ゲーム.js

プレイヤー = 2;
セル数 = 3;
勝利数 = 3;
セルサイズ = 100;
サイズ = セルサイズ * セル数;
 
 
var キャンバス = document.getElementById('キャンバス');
キャンバスの幅 = サイズ;
キャンバスの高さ = サイズ;
 
canvas.addEventListener('click', click, false);
 
 
var ctx = canvas.getContext('2d');
 
ctx.imageSmoothingEnabled = false;
ctx.lineWidth = 3;
 
 
関数クリア() {
    ctx.clearRect(0, 0, キャンバス.幅, キャンバス.高さ);
}
 
関数 line(x, y, w, h, color = '#ccc') {
    ctx.beginPath();
    ctx.moveTo(x, y);
    ctx.lineTo(x + w, y + h);
    ctx.strokeStyle = 色;
    ctx.stroke();
    ctx.closePath();
}
 
関数fillRect(i, j, color = '#F5F5F5') {
    ctx.fillStyle = 色;
    ctx.fillRect(i * セルサイズ、j * セルサイズ、セルサイズ、セルサイズ);
}
 
var 描画 = {
    グリッド: (色 = '#ccc') => {
        (i = 1; i < cell_count; i++) の場合 {
            行(セルサイズ * i, 0, 0, サイズ, 色);
            行(0, セルサイズ * i, サイズ, 0, 色);
    }
    },
 
    // 何も描画しない、スタブ
    0: (i, j, _) => {
    },
 
    // X図形を描く
    1: (i, j, 色 = '#3F51B5') => {
        左 = (i + 0.1) * セルサイズとします。
                上 = (j + 0.1) * セルサイズ、
                サイズ = 0.8 * セルサイズ;
 
        線(左、上、サイズ、サイズ、色);
        線(左 + サイズ、上、 - サイズ、サイズ、色);
    },
 
    // O 図形を描く
    2: (i, j, 色 = '#FF5722') => {
        ctx.beginPath();
        ctx.arc((i + 0.5) * セルサイズ、(j + 0.5) * セルサイズ、0.4 * セルサイズ、0、Math.PI * 2、false);
        ctx.strokeStyle = 色;
        ctx.stroke();
        ctx.closePath();
    },
 
    // Δ図形を描く
    3: (i, j, 色 = '#FDE619'/*'#FFEB3B'*/) => {
        中心 = (i + 0.5) * セルサイズとします。
                サイズ = Math.sqrt(3) * 0.525 * セルサイズ、
                上 = (j + 0.125) * セルサイズ、
                高さ = 0.75 * セルサイズ、
                ステップ = サイズ / 2;
 
        線(中心、上、-ステップ、高さ、色);
        線(中心、上、ステップ、高さ、色);
        line(center - step, top + height, size, 0, color);
    }
};
 
 
グリッド = 新しい配列(セル数 * セル数).fill(0) とします。
        get = (i, j) => grid[j * cell_count + i]、
        set = (i, j, val = 0) => grid[j * cell_count + i] = val、
        isFree = (i, j) => get(i, j) == 0、
        checkVictory = (誰) => {
    反復処理をします = ゲッター => {
        (i = 0 とします; i < winCount; i++)
            if (getter(i) != who)
                false を返します。
        true を返します。
    };
 
    行、列、パス = {
        垂直: _ => iterate(i => get(row + i, col)),
        水平方向: _ => iterate(j => get(col, row + j)),
        対角線: _ => iterate(i => get(row + i, col + i))、
        逆: _ => iterate(i => get(row + i, col + winCount - 1 - i)),
    };
 
    (行 = 0; 行 <= セル数 - winCount; 行++) {
        (col = 0; col < cell_count; col++) の場合 {
            パスが垂直の場合
                ['vertical', row, col] を返します。
            （path.horizntl()）の場合
                ['horizntl', col, row] を返します。
        }
 
        (col = 0; col <= cell_count - winCount; col++) {
            （パス.対角線()）の場合
                ['diagonal', row, col] を返します。
            （パスの反対（））の場合
                ['opposite', row, col] を返します。
        }
    }
 
    戻る [];
},
        onWin = ([タイプ、行、列]) => {
    if (!type)
        戻る;
 
    繰り返し処理をします = アクション => {
        (i = 0 とします; i < winCount; i++)
            アクション(i);
    };
 
    描画シーケンスを {
        垂直: _ => iterate(i => fillRect(row + i, col)),
        水平方向: _ => iterate(j => fillRect(行、列 + j))、
        対角線: _ => iterate(i => fillRect(row + i, col + i)),
        逆: _ => iterate(i => fillRect(row + i, col + winCount - 1 - i)),
    };
 
    クリア（）;
    drawSequence[type]();
    グリッドを描画します。
 
    (i = 0; i < cell_count; i++) の場合 {
        (j = 0; j < cell_count; j++ とします)
            描画[取得(i, j)](i, j);
    }
 
    true を返します。
};
 
 
playerTurn = 0 とします。
 
関数クリック(e) {
    i = e.offsetX / cell_size | 0 とします。
            j = e.offsetY / セルサイズ | 0;
 
    もし(isFree(i, j)) {
        Figure を playerTurn++ % プレイヤー + 1 とします。
 
        set(i, j, 図);
        [図]を描画します(i, j);
        onWin(checkVictory(figure)) && canvas.removeEventListener('click', click, false);
        ;
    }
}
 
 
グリッドを描画します。

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません: