溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

canvas如何實(shí)現(xiàn)五子棋游戲

發(fā)布時(shí)間：2020-10-16 16:17:55 來源：億速云 閱讀：152 作者：小新 欄目：web開發(fā)

這篇文章主要介紹了canvas如何實(shí)現(xiàn)五子棋游戲，具有一定借鑒價(jià)值，需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。

效果

canvas如何實(shí)現(xiàn)五子棋游戲

代碼

<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>五子棋</title>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
</head>
<body>
<canvas id="canvas" width="400" height="400"></canvas>
<script>
    (function () {    // 畫布繪制
        let canvas = document.getElementById("canvas");
        let context = canvas.getContext("2d");
        context.beginPath();
        for (let i = 0; i < 19; i++) {
            // 豎線繪制
            context.moveTo(10 + i * 20, 10);
            context.lineTo(10 + i * 20, 370);
            // 橫線繪制
            context.moveTo(10, 10 + i * 20);
            context.lineTo(370, 10 + i * 20);
        }
        context.stroke();
    })();
    // 鼠標(biāo)單擊
    let blorwh = 0;
    // 定義用于判斷落子的二維數(shù)組
    let matrix = new Array(19);
    // 進(jìn)行賦值
    for(let i = 0; i < 19; i++){
        matrix[i] = new Array(19);
        for(let j = 0; j < 19; j++){
            matrix[i][j] = 0;
        }
    }
    $("#canvas").click((event) => {
        // 每次落子的時(shí)候取反
        blorwh = !blorwh;
        console.log(event.offsetX);
        let canvas = document.getElementById("canvas");
        let context = canvas.getContext("2d");
        // 保存要落子的坐標(biāo)
        let arcPosX, arcPosY;
        // 保存棋子在數(shù)組中的位置
        let mtxPosX, mtxPosY;
        // 和每一條線進(jìn)行比較，如果相差10個(gè)像素以內(nèi)，即，靠近
        for(let x = 0; x < 19; x++){
            if(Math.abs(event.offsetX - (10 + x * 20)) < 10){
                // 獲得需要騾子的x
                arcPosX = 10 + x * 20;
                mtxPosX = x;
            }
            if(Math.abs(event.offsetY - (10 + x * 20)) < 10){
                // 獲得需要的y
                arcPosY = 10 + x * 20;
                mtxPosY = x;
            }
        }
        // 畫出棋子
        // 落子為空，進(jìn)行繪制，反之不繪制
        if(matrix[mtxPosX][mtxPosY] == 0) {
            context.beginPath();
            if (blorwh) {
                context.fillStyle = "white";
                context.arc(arcPosX, arcPosY, 10, 0, Math.PI * 2, false);
                context.stroke();
                // 白子為1
                matrix[mtxPosX][mtxPosY] = 1;
            } else {
                context.fillStyle = "black";
                context.arc(arcPosX, arcPosY, 10, 0, Math.PI * 2, false);
                // 黑子為2
                matrix[mtxPosX][mtxPosY] = 2;
            }
            context.fill();
        }
        // 獲勝檢測
        if(matrix[mtxPosX - 1][mtxPosY] == matrix[mtxPosX][mtxPosY] &&
            matrix[mtxPosX - 2][mtxPosY] == matrix[mtxPosX][mtxPosY]  &&
                matrix[mtxPosX -3][mtxPosY] == matrix[mtxPosX][mtxPosY]  &&
                    matrix[mtxPosY - 4][mtxPosY] == matrix[mtxPosX][mtxPosY]){
            if(matrix[mtxPosX][mtxPosY] == 1){
                alert("白方獲勝");
            }else{
                alert("黑方獲勝");
            }
        }
    })
</script>
</body>
</html>

思路

創(chuàng)建數(shù)組用于保存五子棋的位置即可。
輸贏判斷使用遍歷即可
重復(fù)落棋用判斷保存的數(shù)組的位置是否已經(jīng)有棋子即可
落在交叉線和附近的點(diǎn)判斷，如果相差小于一定數(shù)值進(jìn)行落棋。

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享canvas如何實(shí)現(xiàn)五子棋游戲內(nèi)容對大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，遇到問題就找億速云，詳細(xì)的解決方法等著你來學(xué)習(xí)!

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手