新年快樂，JS與CSS大哉問：這個五子棋網頁怎麼做呀？

js javascript 前端網頁網頁前端

Oo_花之舞__oO 2024-02-15 01:39:20 ‧ 3097 瀏覽

分享至

前言

新年快樂各位龍好運
祝大家超開心幸福美滿賺大錢

問題來了

直接給連結
https://www.playok.com/p/?g=gm160127940#5

我知道它是把棋盤弄成不同點位去紀錄黑白之間誰下哪
可以變成json格式之類的

我想知道的是棋盤的部分要畫線以及每一格交叉的位置能下子是十字交叉處
而不是直接一個方塊這部分的JS跟CSS感覺難度超大的
很想研究出來怎麼去製作這樣可以自己弄不同樣式的棋盤跟棋子XD

希望前輩們能指點~~~感謝各位

題外話

它其實有點類似遮罩(? 有些時候玩線上遊戲我也想用JS弄一個遮罩
把畫面分隔成很多區塊然後這樣也可以進行一些輔助(?
有看過有人這樣做超酷的~~

froce iT邦大師 1 級 ‧ 2024-02-15 08:48:13 檢舉

找個現代瀏覽器，對你有疑問的地方按右鍵->檢測/檢查...
這用canvas畫的。

japhenchen iT邦超人 1 級 ‧ 2024-02-16 07:57:25 檢舉

昏倒，做一個DIV，STYLE加一個border-radius:50%，圓就出來了！

froce iT邦大師 1 級 ‧ 2024-02-16 08:17:16 檢舉

> 昏倒，做一個DIV，STYLE加一個border-radius:50%，圓就出來了！

他有問題的不是棋子，是棋盤。CSS要畫的確有點麻煩但硬要畫還是可以。
有時間的話我用vue寫一個簡單的好了。

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

8 個回答

鬼王很慘

iT邦新手 2 級 ‧ 2024-02-15 09:43:10

讓我猜測你的認知
你懂得用div的border做直線橫線
你也會用div做button當作落子處
可是兩者要合在一起難度就很大
或許你想到的是position relative排版

但也可以換個角度想
就只有落子的div
直線橫線只是它的裝飾或背景
這樣應該就簡單很多了
撇除套件，CSS也能表現很多圖形
https://css-tricks.com/the-shapes-of-css/

我前端沒很熟，有講錯歡迎指正

回應 1
分享
檢舉

Oo_花之舞__oO iT邦新手 1 級 ‧ 2024-02-15 14:27:54 檢舉

這思路有點屌被你命中了您這樣解說我有比較清楚了xd
好厲害感謝!!!

登入發表回應

rain_yu

iT邦新手 1 級 ‧ 2024-02-15 14:25:58

我覺得如果你有先寫好其他的部分，
你應該先將程式PO上來，再看如何解決。
同上面的回答，先使用canvas畫出格線

<!DOCTYPE html>
<html>
<head>
    <title>五子棋棋盤</title>
    <style>
        canvas {
            background-color: #8B4513; /* 咖啡色背景 */
            border: 1px solid #000;
        }
    </style>
</head>
<body>
    <canvas id="chessboard" width="400" height="400"></canvas>

    <script>
        const canvas = document.getElementById('chessboard');
        const ctx = canvas.getContext('2d');
        const size = 25; // 每個格子的大小
        const rows = 15; // 棋盤的列數
        const cols = 15; // 棋盤的行數

        // 繪製棋盤
        function drawChessboard() {
            ctx.strokeStyle = '#000000'; // 格線的顏色

            // 繪製垂直格線
            for (let col = 0; col <= cols; col++) {
                const x = col * size;
                ctx.beginPath();
                ctx.moveTo(x, 0);
                ctx.lineTo(x, canvas.height);
                ctx.stroke();
            }

            // 繪製水平格線
            for (let row = 0; row <= rows; row++) {
                const y = row * size;
                ctx.beginPath();
                ctx.moveTo(0, y);
                ctx.lineTo(canvas.width, y);
                ctx.stroke();
            }
        }

        drawChessboard();
    </script>
</body>
</html>