JavaScript简单五子棋（canvas）

最新推荐文章于 2023-08-22 17:18:44 发布
最新推荐文章于 2023-08-22 17:18:44 发布
阅读量479 收藏 4
点赞数 1
分类专栏： HTML5 文章标签： html5 JavaScript canvas
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u010217654/article/details/93891712
版权

JS 简单五子棋 canvas 版本

前面有写过一个 JavaScript 通过DOM操作的版本 JS五子棋

html代码

<body>
    <div class="bg" id="bg">
        <canvas id="myCanvas"></canvas>
    </div>
</body>

画棋盘

/**
 *初始化棋盘
 *
 * @param {*} canvas 画布
 * @param {*} canvasText 画笔
 * @param {*} n 
 */
function initChessboard(canvas, canvasText, n, s) {

    canvas.setAttribute('width', n * s + 60 + 'px');
    canvas.setAttribute('height', n * s + 60 + 'px')

    canvasText.strokeStyle = '#000';   // 画笔颜色
    for (let i = 0; i < n; i++) {

        canvasText.moveTo(30, i * s + 30);
        canvasText.lineTo(n * 30, i * s + 30);
        canvasText.stroke();

        canvasText.moveTo(i * s + 30, 30);
        canvasText.lineTo(i * s + 30, n * 30);
        canvasText.stroke();

        pieceArr[i] = [];

        for (let j = 0; j < n; j++) {
            pieceArr[i][j] = '0';
        }
    }

    // 背景大小
    document.querySelector('#bg').style.width = (n * s + 80) + 'px';
    document.querySelector('#bg').style.height = (n * s + 80) + 'px';
}

在这里插入图片描述

下棋

获取鼠标点击的坐标，在离点击点最近的棋盘交叉点上画上棋子

/**
 *画棋子
 *
 * @param {*} canvasText 画笔
 * @param {*} i x轴序号
 * @param {*} j y轴序号
 * @param {*} color  棋子颜色
 */
function drawPiece(canvasText, i, j, color) {
    let x = i * 30 + 30, y = j * 30 + 30;
    canvasText.beginPath();
    canvasText.arc(x, y, 13, 0, 2 * Math.PI);
    /**
     * createLinearGradient() 方法创建放射状/圆形渐变对象。
     * context.createRadialGradient(x0,y0,r0,x1,y1,r1);
     * x0   开始x坐标
     * y0   开始y坐标
     * r0   开始半径
     * x1   结束x坐标
     * y1   结束y坐标
     * r1   结束半径
     */
    var gradient = canvasText.createRadialGradient(x, y, size-2, x + 15, y + 15, 0)
    /**
     * addColorStop方法规定 gradient 对象中的颜色和位置
     * gradient.addColorStop(stop,color);
     * stop	介于 0.0 与 1.0 之间的值，表示渐变中开始与结束之间的位置。
     * color	在结束位置显示的 CSS 颜色值
     */
    if (color == 'black') {
        gradient.addColorStop(0, '#0a0a0a');
        gradient.addColorStop(1, '#636766');
    } else if (color == 'white') {
        gradient.addColorStop(0, '#d1d1d1');
        gradient.addColorStop(1, '#f9f9f9');
    }

    canvasText.fillStyle = gradient;
    canvasText.fill();

}


/**
 * 落子
 * @param {*} canvas 画布
 */
function play(canvas) {
    canvas.addEventListener('click', (e) => {
        if (!isOver) {
            let i = Math.round(e.offsetX / 30) - 1;
            let j = Math.round(e.offsetY / 30) - 1;
            if (pieceArr[j][i] == '0') {
                drawPiece(myCanvasText, i, j, pieceColor)
                pieceArr[j][i] = pieceColor;
                judgeWin(j, i, num, pieceColor);
                pieceColor = pieceColor == 'black' ? 'white' : 'black';
                textHint(myCanvasText, pieceColor, num, size)
            }
        }
    })
}

在这里插入图片描述

判胜

从4个方向（垂直、水平、45°、135°）分别判断是否有同一颜色的五子相连。

/**
 * 判胜
 *
 * @param {*} i x轴序号
 * @param {*} j y轴序号
 * @param {*} n
 * @param {*} color 棋子颜色
 */
function judgeWin(i, j, n, color) {

    let x, y, s;

    // 垂直方向
    s = 1;
    for (y = j + 1; y < n && y < j + 5; y++) {
        if (pieceArr[i][y] == color) {
            s++;
            gameOver(s, color);
        } else {
            break;
        }
    }
    for (y = j - 1; y >= 0 && y > j - 5; y--) {
        if (pieceArr[i][y] == color) {
            s++;
            gameOver(s, color);
        } else {
            break;
        }
    }
    // 水平方向
    s = 1;
    for (x = i + 1; x < n && x < i + 5; x++) {
        if (pieceArr[x][j] == color) {
            s++;
            gameOver(s, color);
        } else {
            break;
        }
    }
    for (x = i - 1; x >= 0 && x > i - 5; x--) {
        if (pieceArr[x][j] == color) {
            s++;
            gameOver(s, color);
        } else {
            break;
        }
    }

    // 45°方向
    s = 1;
    for (x = i + 1, y = j + 1; x < n && x < i + 5 && y < n && y < j + 5; x++ , y++) {

        if (pieceArr[x][y] == color) {
            s++;
            gameOver(s, color)
        } else {
            break;
        }
    }

    for (x = i - 1, y = j - 1; x >= 0 && x > i - 5 && y >= 0 && y > j - 5; x-- , y--) {

        if (pieceArr[x][y] == color) {
            s++;
            gameOver(s, color)
        } else {
            break;
        }
    }
    // 135°方向
    s = 1;
    for (x = i - 1, y = j + 1; x >= 0 && x > i - 5 && y < n && y < j + 5; x-- , y++) {

        if (pieceArr[x][y] == color) {
            s++;
            gameOver(s, color)
        } else {
            break;
        }
    }

    for (x = i + 1, y = j - 1; x < n && x < i + 5 && y >= 0 && y > j - 5; x++ , y--) {

        if (pieceArr[x][y] == color) {
            s++;
            gameOver(s, color)
        } else {
            break;
        }
    }

}

/**
 * 游戏结束函数
 *
 * @param {*} s 棋子个数
 * @param {*} color 棋子颜色
 */
function gameOver(s, color) {

    if (s == 5) {

        isOver = true;
        if (color == 'black') {
            // 添加黑子胜利样式
            document.querySelector('#bg').classList.add('black-win')

        } else {
            document.querySelector('#bg').classList.add('white-win')
        }
    }
}

在这里插入图片描述

函数调用

let num = 20; //棋盘交叉点总数 num*num
let size = 30; //格子大小 size*size
let isOver = false;
let myCanvas = document.querySelector('#myCanvas'); // 画布
let myCanvasText = myCanvas.getContext('2d') // 画笔
let pieceColor = 'black';   //默认黑色先

let pieceArr = [];  //地图数组 0-没棋子 white-白棋 black-黑棋 

initChessboard(myCanvas, myCanvasText, num, size)

textHint(myCanvasText, pieceColor, num, size)
play(myCanvas)

源码下载

踏马红尘
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【JavaScript源代码】原生JavaScript实现简单五子棋游戏.docx
12-30
原生JavaScript实现简单五子棋游戏 　　本文实例为大家分享了JavaScript实现简单五子棋游戏的具体代码，供大家参考，具体内容如下　　HTML页面　　注释都很明确了，大家好好学习。　　<!DOCTYPE html>　　<html lang="en">　　  　　<head>　　  <meta charset="UTF-8">　　  <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=no">　　  <title>五子棋</t
基于JavaScript的简易五子棋游戏
superscales的博客
03-15 176
【代码】基于JavaScript的简易五子棋游戏。
JS实现双人五子棋简易游戏(上)
weixin_46514047的博客
11-13 3252
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录 前言 一、pandas是什么？ 二、使用步骤 1.引入库 2.读入数据 总结 前言 提示：这里可以添加本文要记录的大概内容： 例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。 提示：以下是本篇文章正文内容，下面案例可供参考 一、pandas是什么？ 示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分
canvas画图实现一个简单的五子棋小游戏
beiTiao_lys的博客
03-10 542
canvas画图的使用, 绘制简单五子棋效果
VUE+Canvas实现简单的五子棋游戏
denglouhen的博客
05-07 5143
之前的canvas小游戏系列欢迎大家戳： 《VUE实现一个Flappy Bird~~~》 《VUE+Canvas实现上吊火柴人猜单词游戏》 《VUE+Canvas 实现桌面弹球消砖块小游戏》 《VUE+Canvas实现雷霆战机打字类小游戏》 《VUE+Canvas实现财神爷接元宝小游戏》 在布局上，五子棋相比那些目标是随机运动的游戏，实现起来相对简单许多，思路也很清晰，总共分为： （1）画棋盘； （2）监听点击事件画黑白棋子； （3）每次落子之后判断是否有5子相连，有则赢。 最复杂的恐怕
利用开源HTML5引擎lufylegend.js结合javascript实现的五子棋人机对弈
李熠专用博客_白帽子一枚，人称低危终结者
09-05 9090
前言     本文主要介绍利用开源引擎lufylegend.js开发基于Html5的游戏--五子棋,主要叙述其详细开发过程。 游戏规则     玩过五子棋的都应该知道五子棋的规则，这里就简单介绍其规则。     1、传统五子棋的棋具与围棋大致相同，棋子分为黑白两色，棋盘为15×15，棋子放置于棋盘线交叉点上。两人对局，各执一色，轮流下一子，先将横、竖或斜线的5个或5个以上同色棋子连成不间断
原生Javascript实现五子棋
qq_41961383的博客
08-26 3437
原生Javascript实现五子棋
JavaScript应用：五子棋游戏实战开发
黑夜开发者的博客
08-10 2758
本篇文章介绍了如何使用JavaScript开发一个简单的五子棋游戏。通过绘制棋盘、实现开始按钮和游戏逻辑、处理用户交互、判断胜负和游戏结束等功能，我们完成了一个基本的五子棋游戏。当然，我们还可以对游戏进行优化和扩展，例如增加悔棋功能、提示下一步最佳落子位置等。JavaScript是一种非常强大和灵活的编程语言，可以用于开发各种类型的应用程序和游戏。希望通过这篇文章，你对使用JavaScript开发游戏有了更深入的了解。如果你对五子棋游戏开发还有任何问题或建议，欢迎在评论区留言讨论。
学弟学妹看我文章顺利毕业，基于HTML+Javascript五子棋人机博弈系统设计与实现《记得收藏》
苏州程序大白的博客
07-03 3581
基于HTML+Javascript五子棋人机博弈系统设计与实现《记得收藏》目录????️‍????1、需求分析1.1.1、功能性需求分析 目录 ????开讲啦！！！！ ????️‍????1、需求分析 1.1.1、功能性需求分析 本系统的主要功能是人机在线进行对弈， 能统计下棋的棋数目以及输赢的总数。 能对用户名进行修改，使用vcsode开发，基于win10操作系统开发的在线人机对弈平台，阐述了系统的总体架构，逻辑，并且说明了系统的总体设计的策略。说明了本软件的需求规格。人机五子棋博弈项目，
js实现五子棋落子，判定结果
wwtx2048的博客
08-22 222
黑子先行不可让子上下、左右、右上左下、左上右下,四个方向有一个方向连成5子即获胜。
js实现五子棋游戏
01-26
js实现五子棋游戏 js五子棋 五子棋游戏 js五子棋 五子棋游戏
JavaScript五子棋
12-27
基于JavaScript 以及html5 canvas实现的双人五子棋对战小游戏
基于javascript canvas实现五子棋游戏
10-15
主要介绍了基于javascript canvas实现的五子棋游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Gobang:js五子棋 canvas
05-03
Gobang AIjs五子棋 canvas五子棋人机对战实际上，有禁手的五子棋才是五子棋，没有禁手的叫五字连珠，哈哈哈哈，叫错这么多年. 赢法数组棋盘初始化 var chessB = []; //用作存棋盘 // init for (var i = 0; i < 15...
五子棋源码(js+canvas)
12-11
简易的五子棋小游戏 , 由原生JavaScript + canvas 开发, 适合初学者学习js 和canvas的应用!
svg-captcha生成验证码以及验证
u010217654的博客
08-01 2152
生成验证码 构建简单的node服务器 新建serve文件夹 进入 serve文件夹初始化npm项目 npm init 新建server.js文件 const express = require('express'); const http = require('http'); const app = express(); const server = http.createServer(app); const svgCaptcha = require('svg-captcha'); //验证码插件
使用node.js实现简单注册登录功能
u010217654的博客
12-08 2070
使用node.js实现简单注册登录功能资源下载链接：node.js实现简单注册登录功能 服务器实现 /** * Created by SWF on 2016/11/5. */ //引入模块 以及中间件 const express = require('express'); const app = express(); const bodyParser = require('body-parser
初学python---图书借阅Demo
u010217654的博客
08-19 1040
源码下载 https://gitee.com/swfcode/flask_book_borrow 项目介绍 这是一个图书借阅Demo 服务器使用python3的 flask框架搭建 数据库是 MySQL 前端ui框架 hui 功能介绍 用户注册 头像上传(保存在 static下的 uploads 文件夹) 密码加密(hash加密) 用户登陆 检测账号是否存在数据库 检测密码...
JavaScript五子棋简单
u010217654的博客
06-27 563
JavaScript五子棋简单demo html 代码 <body> <main class="gobang-box"> <h2>五子棋</h2> <div id="gobang" class="gobang"></div> <p id="orderHint" c...
javascript canvas
最新发布
10-19
JavaScript Canvas是HTML5中的一个元素，它提供了一种在网页上绘制图形的方法。通过使用Canvas，我们可以在网页上绘制出各种形状、图像、动画等等。Canvas可以用于制作游戏、数据可视化、图表等等。我们可以使用JavaScript来控制Canvas，实现各种复杂的效果。Canvas提供了丰富的API，可以让我们轻松地绘制出各种形状和图像，并且可以对它们进行各种操作，例如填充、描边、旋转、缩放等等。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值