使用canvas寫五子棋游戲

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
html, body, div {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

div {
    display: flex;
}

canvas {
    margin: auto;
    border: 1px solid #000;
}

</style>
</head>
<body>

<div>
    <canvas id="canvas" width="780" height="780">
        你的瀏覽器不支持canvas
    </canvas>
</div>
<script>
/*
 1. 繪制棋盤
 2. 監聽鼠標的點擊事件
 
 把落下的每個棋子存起來 ：使用二維數組 存儲的是棋子的類型  0 沒有  1 白色  2 黑
 * */
var chesses;
(function (){
    var hasWin = false;

    var whiteChess = new Image();
    whiteChess.src = "./w.png";
    var blackChess = new Image();
    blackChess.src = "./b.png";
    /*應該誰來落子  1 表示白色  2表示黑色*/
    var whoChess = 1;
    chesses = [];  //存儲每個棋子
    //給chesses數組初始化。 默認沒有棋子
    for (var i = 0; i < 15; i++){
        chesses.push([]);
        var row = chesses[i];
        for (var j = 0; j < 15; j++){
            row.push(0);
        }
    }

    var canvas = document.getElementById("canvas");
    if (!canvas.getContext) return;

    var ctx = canvas.getContext("2d");
    drawBoard(); //繪制棋盤

    canvas.onclick = function (e){
        if (hasWin){
            ctx.clearRect(0, 0, 780, 780);
            drawBoard();
            for (var i = 0; i < 15; i++){
                for (var j = 0; j < 15; j++){
                    chesses[i][j] = 0;
                }
            }
            hasWin = false;
        }
        var x = e.offsetX;
        var y = e.offsetY;
        drawChess(x, y);
    }
    /*繪制棋子*/
    function drawChess(x, y){
        x = Math.round((x - 40) / 50) * 50 + 40;
        y = Math.round((y - 40) / 50) * 50 + 40;

        if (!isAllowChess(x, y)) return; //如果不允許落子，就直接返回

        var currentChess;
        if (whoChess == 1){
            currentChess = whiteChess;
        }else{
            currentChess = blackChess;
        }
        ctx.drawImage(currentChess, x - whiteChess.width / 2, y - whiteChess.height / 2);
        chesses[(y - 40) / 50][(x - 40) / 50] = whoChess;
        /*判贏*/
        if (judgeWin((y - 40) / 50, (x - 40) / 50)){
            ctx.save();
            ctx.fillStyle = "red";
            ctx.font = "60px sans-serif";
            ctx.textAlign = "center";
            if (whoChess == 1){
                ctx.fillText("白棋贏了!!!", 390, 390);
            }else{
                ctx.fillText("黑棋贏了!!!", 390, 390);
            }
            ctx.restore();
            hasWin = true;
        }
        /*下一次應該是白棋還是黑棋*/
        whoChess = whoChess == 1 ? 2 : 1;
    }
    
    /*判斷是否允許落子*/
    function isAllowChess(x, y){
        if (x < 40 || y < 40 || x > 740 || y > 740){
            return false;
        }else if (chesses[(y - 40) / 50][(x - 40) / 50] > 0){
            alert("此處不允許落子")
            return false;
        }
        return true;
    }
    
    /*繪制棋盤*/
    function drawBoard(){
        ctx.fillStyle = "lightgray";
        for (let i = 0; i < 14; i++){
            for (let j = 0; j < 14; j++){
                ctx.fillRect(40 + j * 50, 40 + i * 50, 49, 49);
            }
        }
    }
    
    /*i,j是剛剛落下的子在數組中的下標*/
    function judgeWin(i, j){
        if (judgeHorizontal(i, j)) return true;
        if (judgeVertical(i, j))  return true;
        if (judgeLeftRight(i, j))  return true;
        if (judgeRightLeft(i, j))  return true;

    }
    
    /*判斷水平*/
    function judgeHorizontal(i, j){
        var c = whoChess;
        for (; j >= 0 && chesses[i][j] == c; j--){  //向左跑，找到棋盤的邊緣或者不是當前落下棋

        }
        ;
        var count = 0;
        for (j++; j < 15 && chesses[i][j] == c; j++){
            count++;
        }
        if (count >= 5) return true;
    }
    
    /*判斷垂直*/
    function judgeVertical(i, j){
        var c = whoChess;
        /*判垂直*/
        for (; i >= 0 && chesses[i][j] == c; i--){  //向左跑，找到棋盤的邊緣或者不是當前落下棋

        }
        count = 0;
        for (i++; i < 15 && chesses[i][j] == c; i++){
            count++;

        }
        console.log(count);
        if (count >= 5) return true;
    }
    
    /*斜著1*/
    function judgeLeftRight(i, j){
        var c = whoChess;

        for (; i >= 0 && j >= 0 && chesses[i][j] == c; i--, j--){

        }
        count = 0;
        for (i++, j++; i < 15 && j < 15 && chesses[i][j] == c; i++, j++){
            count++;

        }
        if (count >= 5) return true;
    }
    
    /*斜著2*/
    function judgeRightLeft(i, j){
        var c = whoChess;
        for (; i >= 0 && j < 15 && chesses[i][j] == c; i--, j++){

        }
        count = 0;
        for (i++, j--; i < 15 && j >= 0 && chesses[i][j] == c; i++, j--){
            count++;

        }
        if (count >= 5) return true;
    }
})();

</script>
</body>
</html>
最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容