五子棋小游戏代码

Html

Css

var win = false;
// 棋盘比例
var bl
// 棋盘线条数
var rowNum = 17
// 棋盘线条间距
var invl = 2
// 棋盘边距
var margin = 1.5
// 棋盘宽度
var width = (rowNum - 1) * invl + margin * 2

// 棋子数组
var arr = []

// 画布DOC元素
var c
// 画布
var ctx
// 步数
var step = 0

/**
 * 初始化数组
 */
function gArr() {
    for (var i = 0; i < rowNum; i++) {
        arr[i] = []
        for (var j = 0; j < rowNum; j++) {
            arr[i][j] = -1
        }
    }
}

/**
 * 初始化画布
 */
function initCanvas() {
    c = document.getElementById("c")
    c.width = width
    c.height = width
    ctx = c.getContext("2d");
}

/**
 * 绘制棋盘
 */
function drawCheckerboard() {
    ctx.fillStyle = "#ffc201";
    ctx.fillRect(0, 0, width, width);
    drawLine()
}

/**
 * 绘制棋盘线条
 */
function drawLine() {
    var ofs = margin
    for (var i = 0; i < rowNum; i++, ofs += invl) {
        console.log(ofs)
        var end = width - margin
        // 画竖线
        ctx.moveTo(ofs, margin);
        ctx.lineTo(ofs, end);
        ctx.stroke();
        // 画横线
        ctx.moveTo(margin, ofs);
        ctx.lineTo(end, ofs);
        ctx.stroke();
    }
}

/**
 * @param x 棋子位置X坐标
 * @param y 棋子位置Y坐标
 * @param piece 1.黑子 0.白子
 */
function drawPiece(x, y, piece) {
    var color;
    if (piece == 1) {
        color = "#000000";
    } else if (piece == 0) {
        color = "#ffffff";
    } else {
        return;
    }
    ctx.beginPath();
    ctx.arc(x, y, invl * 0.4, 0, 2 * Math.PI);
    //设置填充颜色
    ctx.fillStyle = color;
    //开始填充
    ctx.fill();
    //将线条颜色设置为蓝色
    ctx.strokeStyle = color;
    ctx.stroke();
}

/**
 * 根据比例初始化数据
 */
function initBl() {
    var w = window.innerWidth
    if (window.innerHeight < w) {
        w = window.innerHeight
    }
    w = w - 40;
    bl = w / width
    invl = bl * invl
    margin = bl * margin
    width = (rowNum - 1) * invl + margin * 2
}

/**
 * @param arrX 棋子数字横索引
 * @param arrY 棋子数字纵索引
 * @param piece 1.黑子 0.白子
 */
function isWin(arrX, arrY, piece) {
    // 判断4次：横、纵、左斜、右斜
    for (var i = 0; i < 4; i++) {
        var count = 1
        var sl = true
        var xl = true
        var cX = arrX
        var cY = arrY
        // 判断除自己外的其它4个棋子
        for (var j = 0, sx = cX - 1, xx = cX + 1, sy = cY - 1, xy = cY + 1; j < 4; j++, sx--, xx++, sy--, xy++) {
            if (i == 0) {
                if (sl = (sl && sx >= 0)) {
                    sl = (arr[sx][arrY] == piece)
                }
                if (xl = (xl && xx <= rowNum)) {
                    xl = (arr[xx][arrY] == piece)
                }
            } else if (i == 1) {
                if (sl = (sl && sy >= 0)) {
                    sl = (arr[arrX][sy] == piece)
                }
                if (xl = (xl && xy <= rowNum)) {
                    xl = (arr[arrX][xy] == piece)
                }
            } else if (i == 2) {
                if (sl = (sl && sx >= 0 && sy >= 0)) {
                    sl = (arr[sx][sy] == piece)
                }
                if (xl = (xl && xx <= rowNum && xy <= rowNum)) {
                    xl = (arr[xx][xy] == piece)
                }
            } else if (i == 3) {
                if (sl = (sl && sx >= 0 && xy <= rowNum)) {
                    sl = (arr[sx][xy] == piece)
                }
                if (xl = (xl && xx <= rowNum && sy >= 0)) {
                    xl = (arr[xx][sy] == piece)
                }
            }
            if (sl) {
                count++
            }
            if (xl) {
                count++
            }
            console.log(piece, ",", i, ":", count);
            if (count >= 5) {
                return true;
            }
        }
    }
    return false
}

window.onload = function() {
    initBl()
    initCanvas()
    gArr()
    drawCheckerboard()

c.style.cursor = "pointer";
    // 点击下棋
    c.onclick = function(e) {
        if (win) {
            return
        }
        // TODO 鼠标落子可能存在偏移问题，定位存在问题

console.log("鼠标点击：", e.clientX + "," + e.clientY)
        // 回算比例间距
        var blInvl = invl / bl

// 根据鼠标点击位置以及比例计算落子索引
        var blX = (e.clientX - margin) / bl
        var arrX = parseInt(blX / blInvl) + (blX % blInvl <= blInvl / 2 ? 0 : 1)

var blY = (e.clientY - margin) / bl
        var arrY = parseInt(blY / blInvl) + (blY % blInvl <= blInvl / 2 ? 0 : 1)

// 该位置已落子，则不能再落子
        if (arr[arrX][arrY] != -1) {
            return;
        }
        // 标记落子颜色（1.黑子 0.白子）
        var piece = (++step) % 2
        arr[arrX][arrY] = piece

// 计算真实落子位置
        blX = arrX * blInvl * bl + margin;
        blY = arrY * blInvl * bl + margin;

console.log("棋子位置：", blX + "," + blY)
        drawPiece(blX, blY, piece)

win = isWin(arrX, arrY, piece)
        if (win) {
            alert(piece == 1 ? "黑棋赢" : "白棋赢")
        }
    }
}

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

立即下载

五子棋小游戏代码



代码描述：原生js和canvas画布实现的五子棋小游戏

更新时间：2021-07-27 02:09:38
原生js和canvas画布实现的五子棋小游戏
1.canvas画布画棋盘
2.canvas画布画棋子
3.鼠标点击定位棋子位置
4.输赢结果判断

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

checheai

相关代码

五子棋小游戏代码

最新