JavaScript Canvas實現井字棋遊戲

阿新 • • 發佈：2021-08-23

本文例項為大家分享了 Canvas實現井字棋遊戲的具體程式碼，供大家參考，具體內容如下

index.html

<!DOCTYPE html>
<html>
    <head>
        <title>Tic Tac Toe</title>
        <style>
            * {
                padding: 0;
                margin: 0;
            }
 
            body,html,#game {
                height: 100%;
                background: #FCFCFC;
            }
 
            #game {
                display: flex;
                align-items: center;
                justify-content: center;
            }
        </style>
    </head>
    <body>
        <div id="game">
            <canvas id="canvas" width="300" height="300"></canvas>
        </div>
        <script src="game."></script>
    </body>
</html>

game.js

players = 2;
cell_count = 3;
winCount = 3;
cell_size = 100;
size = cell_size * cell_count;
 
 
var canvas = document.getElementById('canvas');
canvas.width = size;
canvas.height = size;
 
canvas.addEventListener('click',click,false);
 
 
var ctx = canvas.getContext('2d');
 
ctx.imageSmoothingEnabled = false;
ctx.lineWidth = 3;
 
 
function clear() {
    ctx.clearRect(0,canvas.width,canvas.height);
}
 
function line(x,y,w,h,color = '#ccc') {
    ctx.beginPath();
    ctx.moveTo(x,y 
);
    ctx.lineTo(x + w,y + h);
    ctx.strokeStyle = color;
    ctx.stroke();
    ctx.closePath();
}
 
function fillRect(i,j,color = '#F5F5F5') {
    ctx.fillStyle = color;
    ctx.fillRect(i * cell_size,j * cell_size,cell_size,cell_size);
}
 
var draw = {
    grid: (color = '#ccc') => {
        for (let i = 1; i < cell_count; i++) {
            line(cell_size * i,size,color);
            line(0,cell_size * i,color);
    }
    },// draw nothttp://www.cppcns.com 
hing,stub
    0: (i,_) => {
    },// draw X figure
    1: (i,color = '#3F51B5') => {
        let left = (i + 0.1) * cell_size,top = (j + 0.1) * cell_size,size = 0.8 * cell_size;
 
        line(left,top,color);
        line(left + size,-size,color);
    },// draw O figure
    2: (i,color = '#FF5722') => {
        ctx.beginPath();
        ctx.arc((i + 0.5) * cell_size,(j + 0.5) * cell_size,0.4 * cell_size,Math.PI * 2,false);
        ctx.strokeStyle = color;
        ctx.stroke();
        ctx.closePath();
    },// draw  figure
    3: (i,color = '#FDE619'/*'#FFEB3B'*/) => {
        let center = (i + 0.5) * cell_size,size = Math.sqrt(3) * 0.525 * cell_size,top = (j + 0.125) * cell_size,height = 0.75 * cell_size,step = size / 2;
 
        line(center,-step,height,color);
        line(center,step,color);
        line(center - step,top + height,color);
    }
};
 
 
let grid = new Array(cell_count * cell_count).fill(0),get = (i,j) => grid[j * cell_count + i],set = (i,val = 0) => grid[j * cell_count + i] = val,isFree = (i,j) => get(i,j) == 0,checkVictory = (who) => {
    let iterate = getter => {
        for (let i = 0; i < winCount; i++)
            if (getter(i) != who)
                return false;
        return true;
    };
 
    let row,col,path = {
        vertical: _ => iterate(i => get(row + i,col)),horizntl: _ => iterate(j => get(col,row + j)),diagonal: _ => iterate(i => get(row + i,col + i)),opposite: _ => iterate(i => get(row + i,col + winCount - 1 - i)),};
 
    for (row = 0; row <= cell_count - winCount; row++) {
        for (col = 0; col < cell_count; col++) {
            if (path.vertical())
                return ['vertical',row,col];
            if (path.horizntl())
                return ['horizntl',row];
        }
 
        for (col = 0; col <= cell_count - winCount; col++) {
            if (path.diagonal())
                return ['diagonal',col];
            if (path.opposite())
                return ['opposite',col];
        }
    }
 
    return [];
},onWin = ([type,col]) => {
    if (!type)
        return;
 
    let iterate = action => {
        for (let i = 0; i < winCount; i++)
            action(i);
    };
 
    let drawSequence = {
        vertical: _ => iterate(i => fillRect(row + i,horizntl: _ => iterate(j => fillRect(row,col + j)),diagonal: _ => iterate(i => fillRect(row + i,opposite: _ => iterate(i => fillRect(row + i,};
 
    clear();
    drawSequence[type]();
    draw.grid();
 
    for (let i = 0; i < cell_count; i++) {
        for (let j = 0; j < cell_count; j++)
            draw[get(i,j)](i,j);
    }
 
    return true;
};
 
 
let playerTurn = 0;
 
function click(e) {
    let i = e.offsetX / cell_size | 0,j = e.offsetY / cell_size | 0;
 
    if (isFree(i,j)) {
        let figure = playerTurn++ % players + 1;
 
        set(i,figure);
        draw[figure](i,j);
        onWin(chwww.cppcns.comeckVictory(figure)) && canvas.removeEventListener('click',false);
        ;
    }
}
 
 
draw.grid();

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。