前端实现五子棋小游戏1（本地双人对战）

最新推荐文章于 2024-05-16 11:07:07 发布

Gib Gas!

最新推荐文章于 2024-05-16 11:07:07 发布

阅读量1.3k

点赞数 3

分类专栏：前端学习文章标签： html canvas js css javascript

本文链接：https://blog.csdn.net/weixin_44584059/article/details/108173274

版权

前端学习专栏收录该内容

60 篇文章 2 订阅

订阅专栏

运用canvas写一个本地五子棋小游戏

HTML部分
JS 部分
CSS 部分
实现效果

HTML部分

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>五子棋小游戏</title>
    <link rel="stylesheet" type="text/css" href="./css/css.css">
</head>

<body>
    <canvas id="chess" width="450px" height="450px"></canvas>

    <script type="text/javascript" src="./js/script.js"></script>
</body>

</html>

JS 部分

// 轮流下棋
var me = true;
// 二维数组存储落子情况，不可重复落子
var chessBoard = [];
for (var i = 0; i < 15; i++) {
    chessBoard[i] = [];
    for (j = 0; j < 15; j++) {
        // 0为没有落子
        chessBoard[i][j] = 0;
    }
}
var chess = document.getElementById('chess');
var context = chess.getContext('2d');
// 变颜色
context.strokeStyle = "#BFBFBF";
// 画背景图
var logo = new Image();
logo.src = "./img/logo.jpg";
// 图片加载完之后调用方法才能显示
logo.onload = function () {
    context.drawImage(logo, 0, 0, 450, 450);
    drawChessBoard();
}

var drawChessBoard = function () {
    //画布是450*450  15个交叉点，14个间隔 每个间隔30像素两边留白15像素
    for (var i = 0; i < 15; i++) {
        // 竖线
        context.moveTo(15 + i * 30, 15);
        context.lineTo(15 + i * 30, 435);
        context.stroke();
        // 横线
        context.moveTo(15, 15 + i * 30);
        context.lineTo(435, 15 + i * 30);
        context.stroke();
    }
}
// ij是棋盘索引 me是白棋黑棋
var oneStep = function (i, j, me) {
    // 画棋子、画圆context.beginPath() context.closePath();
    context.beginPath();
    // arc画扇形 参数，起始位置 半径13 扇形弧度 0 2π
    context.arc(15 + i * 30, 15 + j * 30, 13, 0, 2 * Math.PI);
    // stroke描边
    context.stroke();
    context.closePath();
    // 设置黑子渐变 createRadialGradient参数 第一个圆原线性坐标 半径13 和第二个圆  黑旗颜色0A0A0A黑色
    var gradient = context.createRadialGradient(15 + i * 30 + 2, 15 + j * 30 - 2, 13, 15 + i * 30 + 2, 15 + j * 30 - 2, 0);
    if (me) {
        gradient.addColorStop(0, "#0A0A0A");
        gradient.addColorStop(1, "#636766");
    } else {
        gradient.addColorStop(0, "#D1D1D1");
        gradient.addColorStop(1, "#F9F9F9");
    }
    context.fillStyle = gradient;
    // 填充圆的颜色
    context.fill();
}
// 落棋设置
chess.onclick = function (e) {
    // 相对于左上角来设置坐标和索引
    var x = e.offsetX;
    var y = e.offsetY;
    // 向下取整
    var i = Math.floor(x / 30);
    var j = Math.floor(y / 30);
    // 判断不可重复落子
    if (chessBoard[i][j] == 0) {
        oneStep(i, j, me);
        // 黑棋为1，白棋为2
        if (me) {
            chessBoard[i][j] = 1;
        } else {
            chessBoard[i][j] = 2;
        }
        // 交替颜色
        me = !me;
    }


}



// 对角线
// context.moveTo(0, 0);
// context.lineTo(450, 450);
// context.stroke();

CSS 部分

canvas{
    display: block;
    margin:50px auto;
    box-shadow: -2px -2px 2px #EFEFEF, 5px 5px 5px #bb99bb;
}

实现效果

在这里插入图片描述

Gib Gas!

关注

3
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
前端实现五子棋小游戏1（本地双人对战）

运用canvas写一个本地五子棋小游戏HTML部分JS 部分CSS 部分实现效果HTML部分<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>五子棋小游戏</title&g
复制链接

扫一扫