HTML5 游戏开发实战 ｜ 黑白棋

2023-07-05 08:38:59

 黑白棋，又叫反棋(Reversi)、奥赛罗棋(Othello)、苹果棋、翻转棋。黑白棋在西方和日本很流行。游戏通过相互翻转对方的棋子，最后以棋盘上谁的棋子多来判断胜负。黑白棋的棋盘是一个有8×8方格的棋盘。开始时在棋盘正中有两白两黑四个棋子交叉放置，黑棋总是先下子。

(1) 下子规则。

把自己颜色的棋子放在棋盘的空格上，而当自己放下的棋子在横、竖、斜8个方向内有一个自己的棋子，则被夹在中间的全部翻转成为自己的棋子。并且只有在可以翻转棋子的地方才可以下子。如果玩家在棋盘上没有地方可以下子，则该玩家对手可以连下。

(2) 胜负判定条件。

双方都没有棋子可以下时棋局结束，以棋子数目来计算胜负，棋子多的一方获胜。

在棋盘还没有下满时，如果一方的棋子已经被对方吃光，则棋局也结束。将对手棋子吃光的一方获胜。

本文开发黑白棋游戏程序，黑白棋游戏的运行界面如图上图所示。该游戏具有显示执棋方可以落棋子的位置提示功能和判断胜负功能。在游戏过程中，单击“帮助”按钮则显示执棋方可落子位置( 

表示可落子位置，如图1所示)。

■ 图1 表示执棋方(黑方)可落子位置 

01、黑白棋游戏设计的思路

棋子和棋盘

游戏开发时，需要事先准备黑白两色棋子和棋盘图片(如图2所示)。游戏最初显示时，棋盘上画上4个棋子。这里为了便于处理，采用一个qizi二维数组用来存储棋盘上的棋子。

■ 图2 黑白两色棋子和棋盘

翻转对方的棋子

需要从自己落子(x1，y1)为中心的横、竖、斜8个方向上判断是否需要翻转对方的棋子，程序中由鼠标的mousedown事件实现。在mousedown事件中参数event对象含有单击位置像素坐标(event．pageX，event．pageY)，处理后变成Canvas对象内像素坐标(x，y)。再由如下公式换算：

x1 = Math.round((x- 40) / 80);//Math.round 四舍五入y1 = Math.round((x- 40) / 80);

经过换算转换为棋盘坐标(x1，y1)。

最后从左、左上、上、右上、右、右下、下、左下8个方向上调用过程DirectReverse(x1，y1，dx，dy)翻转对方的棋子。而具体棋子的翻转由FanQi(x，y)实现。FanQi(x，y)修改数组qizi的(x，y)保存棋盘上的棋子信息。

function FanQi(x，y)
if(qizi[x][y]== BLACK)qizi[x][y]= WHITE;
else
qizi[x][y]= BLACK,

显示执棋方可落子位置

Can_go(x1，y1)从左、左上、上、右上、右、右下、下、左下8个方向上调用函数CheckDirect(x1，y1，dx，dy)判断某方向上是否形成夹击之势，如果形成且中间无空子则返回True，表示(x1，y1)可以落子，(x1，y1)处可以落子则用图片图片显示。

判断胜负的功能

qizi［］［］二维数组保存棋盘上的棋子信息，其中元素保存1，表示此处为黑子；元素保存2，表示此处为白子；元素保存0，表示此处为无棋子。通过对qizi数组中各方棋子数的统计，在棋盘无处可下时，根据各方棋子数判断出输赢。

 

02、关键技术

Canvas对象支持的JavaScript的鼠标事件

Canvas对象支持所有的JavaScript的鼠标事件，包括鼠标单击(Mouse Click)、鼠标按下(Mouse Down)、鼠标抬起(Mouse Up)和鼠标移动(Mouse Move)。对Canvas添加鼠标事件方式有两种，一种方式如下：

//鼠标事件 mouse event
canvas.addEventListener( "mousedown",doMouseDown,false);canvas.addEventListener( 'mousemove'，doMouseMove,false);canvas.addEventListener('mouseup'，doMouseUp，false);

另外一种方式在JavaScript中被称为反模式。

canvas.onmousedown = function(e)canvas.onmouseup = function(e)canvas.onmousemove = function(e)

获取鼠标在Canvas对象上的坐标

由于Canvas上鼠标事件中不能直接获取鼠标在Canvas的坐标，所获取的都是基于整个屏幕的坐标。所以通过鼠标事件e．clientX与e．clientY来获取鼠标位置，然后通过Canvas．getBoundingClientRect()方法来获取Canvas对象相对浏览器窗口的位置(方法返回一个矩形对象，包含四个属性：left、top、right和bottom。分别表示Canvas对象各边与页面上边和左边的距离)，通过计算得到鼠标在Canvas中的坐标。

事件坐标转换成Canvas坐标代码如下：

function getPointOnCanvas(canvas，x，y)var bbox = canvas.getBoundingClientRect()return(x: x - bbox.left,
y:y - bbox.top);

如果同时考虑CSS设置width和height的情况，则代码如下。

function getPointOnCanvas(canvas，x，y)
var bbox = canvas.getBoundingClientRect();
return(x: x- bbox.left *(canvas.width / bbox.width)y:y- bbox.top *(canvas.height/bbox.height)

03、黑白棋游戏设计的步骤

游戏页面index.html

<html >
< head >
< title>黑白棋</title>
<meta http - equiv= content - type content = "text/html; charset = utf - 8">< meta name="Generator" content ="EditPlus">
<meta name ="Author" content = "
n<meta name ="Keywords” content =
<meta name ="Description" content = "</head >
<body onload="init()”onkeydown ="DoKeyDown(event)"><canvas id="myCanvas”width="720”height ="720"你的浏览器还不支持</canvas>< img id= "whitestone"src = "img/whitestone.png"style= "display:none;">< img id= "blackstone"src = "img/blackstone.ng" style= "display:none;">< img id="gi pan1"src = "img/qi panl.jpg"style= "display:none;"><img id="Info2"src ="img/Info2.ng”style = "display:none;">
<div id= "message txt" style= "text - align:center;border:lpx solid red; width:720px;height20px;font- size:20px;"></div>
< input type ="button”value="走棋提示”onclick ="DoHelp()">< script type ="text/javascript"src ="Main.js"></script></body>
</html>

设计脚本(Main．js)

1． 常量定义

游戏中常量定义，其中BLACK黑棋为1，WHITE白棋为2，无棋为0。

//常量
var BLACK = 1;
var WHITE = 2;
var KONG = 0;
var w= 80;
var h= 80:

以下获取Canvas对象，以及用到的棋子和棋盘图片、提示图片。

//构造一个 gizi[][]二维数组用来存储棋子//当前走棋方var mycanvas = document.getElementById('myCanvas');var context = mycanvas.getContext(2d'):
var gizi=new Array();
var curQizi= BLACK;
var whitestone= document.getElementById("whitestone");var blackstone = document.getElementById("blackstone");var qipan = document.getElementById("qi pan1");var info = document.getElementById("Info2");var message txt = document.getElementById("message txt");
//白棋图片//黑棋图片//棋盘//提示图形//提醒文字

2． 初始化游戏界面

游戏开始时，调用init()函数对保存棋盘上的棋子信息的qizi数组初始化，同时在棋盘上显示初始的4个棋子。

function init()f
initLevel();
showMoveInfo();
//棋盘上初始 4个棋子
//当前走棋方信息
mycanvas.addEventListener( "mousedown,doMouseDown,false);
function initLevel()var i,j;for(i=0;i<8;i++){
   qizi[i]= new Array();for(j=0;j<8;j++)qizi[i][j]= KONG;
//棋盘上初始 4 个棋子
//1 为黑,2为白,0为无棋子qizi[3][3]= WHITE;qizi[4][ 4]= WHITEqizi[3][4] = BLACKqizi[4][3]= BLACK;DrawMap();
//初始化界面
//画棋盘和所有棋子
message txt.innerHTML="该黑棋走子”
//画棋盘和所有棋子
function DrawMap()
context.clearRect (0，0,720，720);context.drawImage(qipan,0,0,qipan.width,gipan.height);for(i= 0;i<gizi.length;i++)
//行号
//列号for(j= 0;j< gizi[i].length;j++)
var pic;
switch(qizi[i][j])
case KONG:
break;
case BLACK:
//0
//1
pic =blackstone:context.drawImage(pic，w * j，h *,pic.width,pic.height);break;
//2
case WHITE:
pic = whitestone;context.drawImage(pic，w * j，h *i，pic.width,pic.height);break;
}
}
}
}

调用showMoveInfo()函数显示轮到哪方走棋。

function showMoveInfo(
// 当前走棋方是黑棋message_txt.innerHTML ="该黑棋走子”
if(curOizi== BLACK)
else
message_txt.innerHTML="该白棋走子”

init()函数同时对canvas添加鼠标单击事件侦听，如果canvas被单击则执行doMouseDown函数完成走棋功能。

3． 走棋过程

如果是棋盘被单击，则此位置像素信息(event．clientX，event．clientY)可以转换成棋盘坐标(x1，y1)，然后判断当前位置(x1，y1)是否可以放棋子(符合夹角之势)，如果可以则此位置显示自己的棋子图形，调用FanALLQi(i，j)函数从左、左上、上、右上等8个方向翻转对方的棋。最后判断对方是否有棋可走，如果对方可以走棋则交换走棋方。如果对方不可以走棋，则自己可以继续走棋，直到双方都不能走棋，显示输赢信息。

function doMouseDown(event)
var x = event.clientX
var y = event.clientY:
var canvas = event.target;
var loc = getPointOnCanvas(canvas，x，y);console.log("mouse down at point( x:"+ loc.x+"，y:"+ loc.y+")");clickQi(loc);
function getPointOnCanvas(canvas，x，y)
var bbox = canvas.getBoundingClientRect();return( x: x-bbox.left * (canvas.width/ bbox.width)y:y- bbox.top * (canvas.height / bbox.height)};
function clickQi(thisQi){
   
var x1，yl;xl = parseInt((thisQi.y- 20)/ 80);yl= parseInt((thisQi.x- 20)/ 80);if(Can_go(x1，y1)){
   //trace("can");qizi[x1][yl]= curQizi;//从左、左上、上、右上、右、右下、下、左下方向翻转对方的棋FanALLO(x1，yl);DrawMap();
//parseInt()函数丢弃小数部分，保留整数
// 判断当前位置是否可以放棋子
//判断对方是否有棋可走，如有交换走棋方
&&checkNext(WHITE))if(curQizi== WHITE &&checkNext(BLACK) curQizi== BLACK
if(curQizi== WHITE) [
curQizi= BLACK;
message txt.innerHTML ="该黑棋走子”;else
curQizi= WHITE;
message txt.innerHTML=“该白棋走子“
else if(checkNext(curQizi)) 
//判断自己是否有棋可走,如有,给出提示
message txt.innerHTML ="对方无棋可走请继续
//双方都无棋可走，游戏结束，显示输赢信息elseisLoseWin();
//统计双方的棋子数量，显示输赢信息
else {
   
message txt.innerHTML="不能落子!";

4． 可否落子判断

Can_go(x1，y1)从左、左上、上、右上、右、右下、下、左下8个方向判断(x1，y1)处可否落子。

function Can go( x1，yl)//从左、左上、上、右上、右、右下、下、左下 8 个方向判断if(CheckDirect(x1，y1，- 1，0)== true)[return true;
if(CheckDirect(x1，y1,- 1，-1)== true){
   return true;
if(CheckDirect(x1，yl，0,- 1) == true) (return true;
if(CheckDirect(x1，y1，1,- 1)== true) {
   return true;
if(CheckDirect(x1，y1，1，0)== true) {
   return true;
if(CheckDirect(x1，y1，1，1)== true) {
   return true;
if(CheckDirect(x1，y1，0，1)== true) {
   return true;
if(CheckDirect(x1，y1,- 1，1)== true) {
   return true;
return false;

调用CheckDirect()函数判断某方向上是否形成夹击之势。如果形成且中间无空子则返回True。

function CheckDirect(x1，yl，dx，dy)l
var x,Y;
var flag = false;
x=x1 + dx;
y=yl + dy;while(InBoard(x，y) && !Ismychess(x，y) && qizi[x][y] != 0){
   x+= dx;
y += dy;
flag = true;
//构成夹击之势
if(InBoard(x，y) && Ismychess(x，y) && flag == true) {
   //该方向落子有效return true;
return false;

调用checkNext(i)函数验证参数代表的走棋方是否还有棋可走。

验证参数代表的走棋方是否还有棋可走￥@param i代表走棋方，1为黑方,2为白方
@return true/false￥
function checkNext(i)!
old= curQizi;
curOizi=i;
if(Can Num()> 0){
   
curQizi=old;
return true;
else
curQizi=old;
return false;
}
}

调用Can_Num()函数统计可以落子的位置数。

function Can Num()var i，j,n=0;for(i=1;i<=8;i++) (for(j=1;j<=8;j++){
   if(Can go(i，j)){
   
//统计可以落子的位置数
n=n+1;
return n;
//可以落子的位置数

5． 翻转对方的棋子

FanALLQi(int x1，int y1)从左、左上、上、右上、右、右下、下、左下8个方向翻转对方的棋子。

function FanALLQi(x1，yl)//从左、左上、上、右上、右、右下、下、左下 8 个方向翻转if(CheckDirect(x1，y1，- 1，0)== true){DirectReverse(xl，y1，- 1，0);
if(CheckDirect(x1，yl,- 1,- 1) == true) {
   DirectReverse(x1，y1，- 1，-1);
if(CheckDirect(x1，yl，0，- 1)== true) {
   
DirectReverse(x1，y1，0，- 1);
if(CheckDirect(x1，y1，1,- 1) == true) (DirectReverse(x1，yl，1，- 1);
if(CheckDirect(x1，yl，1，0) == true) {
   DirectReverse(x1，yl，1，0);
if(CheckDirect(x1，y1，1，1) == true) {
   DirectReverse(x1，yl，1，1);
if(CheckDirect(x1，y1，0，1)== true) {
   DirectReverse(x1，y1，0，1);
if(CheckDirect(x1，y1,- 1，1)== true) {
   DirectReverse(x1，yl，- 1，1);
}

调用DirectReverse()函数针对某方向上已形成夹击之势的对方棋子进行翻转。

function DirectReverse(x1，yl，dx，dy)
var x，Y;
var flag = false;
x= x1 + dx;
y= yl + dy;while(InBoard(x，y) && !Ismychess(x，y) && qizi[x][y] != 0)x+= dx;
y += dy;flag = true;
//构成夹击之势
if(InBoard(x，y) && Ismychess(x，y) && flag == true)do !
x-= dx;y-=dy;if((x!= xl y! y1)){
   FanQi(x，y);
) while((x != xl  y!= y1));

调用FanQi(int x，int y)函数将存储(x，y)处棋子信息qizi［x］［y］进行反色处理。

function FanQi(x，y)
if(qizi[x][y]== BLACK)qizi[x][y]= WHITE;
else(
qizi[x][y]= BLACK;

调用InBoard()函数判断(x,y)是否在棋盘界内。如果在界内则返回True，否则返回False。

//InBoard()函数判断(x,y)是否在棋盘界内function InBoard(x,yif(x>=0&& x<=7 && y>=0 && y<=7){return true;
else 
return false;

6． 显示执棋方可落子位置

“走棋提示”按钮单击事件函数是DoHelp()函数，它显示可以落子的位置提示。调用Show_Can_Position()函数用图片


显示可以落子的位置。

function DoHelp)
showCanPosition();
//显示可以落子的位置
function showCanPosition()
//显示可以落子的位置
var i,j;
var n=0;
for(i=0;i<=7;i++)[
//可以落子的位置统计
for(j=0;j<=7; j++)[
if(gizi[i][j]==0 && Can_go(i,j)){
   n=n+1;pic = info;//显示提示图形
context.drawImage(pic,w*i+ 20,h*i+20,pic.width,pic.height);

7． 判断胜负功能

调用isLoseWin()函数统计双方的棋子数量，显示输赢信息。

//显示输赢信息
function isLoseWin() 
var whitenum = 0;
var blacknum = 0;
var n=0,x,Y;
for(x=0;x<= 8;x++)(for(y=0;y<=8;y++){
   if(qizi[x][y] != 0)[{
   n=n+1;if(qizi[x][y]== 2) {
   whitenum += 1;
if(qizi[x][y]== 1){
   blacknum += 1;
if(blacknum > whitenum) f
message txt.innerHTML ="游戏结束黑方胜利,黑方:"+ String(blacknum)"白方+String(whitenum);
elsemessage txt.innerHTML="游戏结束白方胜利，黑方:"+ String(blacknum)+"白方:
+String(whitenum);
}
}

至此，就完成黑白棋游戏设计了。

 

更多推荐

助力经销商打赢旺季攻坚战，全兴在全国范围内拉开“兴风暴”

执笔|姜姜编辑|萧萧中秋、国庆历来是白酒消费的旺季，也是完成当年任务的关键期，尤其今年“双节”合一，各大食品饮料企业都憋足了劲，白酒促销大戏也轮番上演。作为中国“老八大名酒”之一的全兴酒业谋定而动，以积极奔跑的姿态，不断精耕重点区域地级市场，紧抓双节动销，助力渠道伙伴在白酒旺销季打一场大胜仗。对话金牌酒商，老名酒筑牢大

终于还是熬不住了，转行了，分享一波刚学到的知识吧,字符串的自带函数.py

网传IT行业很难，没错我是真真正正的体验到了(😭)大家好，我原来是在大学自学了java的大部分技术，基本上可以达到企业级开发了，大三一结束我就在浙江杭州开始找工作，找了两个月，中间一共找到过三个关于后端开发的工作，加在一起工作了半个月左右，种种原因都没有继续工作。后来面试了一个Python爬虫做rpa自动化的实习生，

华为云CodeArts Check代码检查服务用户声音反馈集锦（6）

CodeArtsCheck（原CodeCheck），是自主研发的代码检查服务。建立在华为30年自动化源代码静态检查技术积累与企业级应用经验的沉淀之上，为用户提供代码风格、通用质量与网络安全风险等丰富的检查能力，提供全面质量报告、便捷的问题闭环处理帮助企业有效管控代码质量，助力企业成功：感兴趣的小伙伴可以点此>>体验下服

马斯洛需求层次模型分析之云安全浅谈

基于马斯洛需求层次模型，我们可以将互联网云安全建设和运营分析分为五个阶段，每个阶段对应一些关键的安全关键词，以下内容是对这些阶段的浅显分析：第一阶段：基础设施安全（生理需求）在初始阶段，云服务提供商需要确保基础设施的安全性，包括数据中心、网络、系统等方面。这涉及到的关键词有：数据中心安全：确保数据中心物理设施的安全，如

kubernetes（k8s）PVC

概念PVC的全称是：PersistentVolumeClaim（持久化卷声明），PVC是用户存储的一种声明，PVC和Pod比较类似，Pod消耗的是节点，PVC消耗的是PV资源，Pod可以请求CPU和内存，而PVC可以请求特定的存储空间和访问模式。对于真正使用存储的用户不需要关心底层的存储实现细节，只需要直接使用PVC即

【AGC】认证服务开发问题汇总

1.开发者在服务端集成认证服务SDK，想通过验证用户凭据接口来验证从客户端获取的token，在调用过程中响应数据报code203818355的错误解决方案：该错误显示accessToken格式不正确。首先确认Authorization中的accesstoken是通过管理员角色，项目为N/A的ClientID和Clien

【mysql】—— 函数的基本介绍

前言：MySQL是一种常用的关系型数据库管理系统，它提供了许多内置的函数来进行数据操作和处理。本期，我将给大家介绍的就是关于“函数”的相关知识！！！目录（一）日期函数（二）字符串函数（三）数学函数（四）其它函数总结（一）日期函数MySQL提供了一系列用于处理日期和时间的内置函数，可以对日期值进行提取、格式化、计算和比较

企业蓄电池怎么实时监测？这个方法最简单使用！

在这个数字时代，企业对电力的依赖性愈发显著，这使得电池系统成为维持业务连续性的不可或缺的一环。蓄电池监控不仅有助于实时跟踪电池系统的性能和状态，还有助于预测问题，提前采取措施以防止电力中断。它还可以帮助企业降低能源成本，延长电池寿命，提高能源效率，以及满足可持续性和环保目标。客户案例常州某制药公司生产设施在各地内分布，

C++回顾录03-C++类和对象

类是创建对象的模板，一个类可以创建多个对象，每个对象都是类类型的一个变量；创建对象的过程也叫类的实例化。每个对象都是类的一个具体实例（Instance），拥有类的成员变量和成员函数。类是用户自定义的类型，如果程序中要用到类，必须提前说明，或者使用已存在的类（别人写好的类、标准库中的类等），C++语法本身并不提供现成的类

京东医疗器械分类汇总

京东医疗器械分类汇总,发布医药商品的时候需要选择的分类,有需要的吗整理为HTML代码<selectname="type"><optionvalue=""></option><optionvalue="Ⅱ类6866">Ⅱ类6866</option><optionvalue="Ⅱ类6822">Ⅱ类6822</option>

Hadoop设置固定ip无效的解决办法

今天配置Hadoop的时候，执行vi/etc/sysconfig/network-scripts/ifcfg-ens33修改网络配置文件后，一切正常，但重启后IP改变了，并且在修改以及重启网络连接数次后，IP依旧不按照我在ifcfg-ens33中配置的那样，检查了各处地方，仍然不行，在数小时的查错改错过程中发现了问题所

热文推荐
  1. Docker基础入门：Docker基础总结篇--超详细

    Docker基础入门：Docker基础总结篇[docker3要素、docker安装配置、容器使用、镜像管理发布]一、Docker3要素1.1、镜像（Image）1.2、容器（Container）1.3、仓库（Registry）1.4、总结二、Docker安装配置2.1、卸载旧版Docker2.2、需要的安装包依赖2.3

  2. 【容器】docker基础使用

    文章目录一、docker常见命令二、注意事项Reference一、docker常见命令docker是一个容器化平台。Docker介绍：（官网：https://www.docker.com/get-started）Docker是一个开源的应用容器引擎，你可以把它当作一个轻量级的虚拟机。它可以让开发者打包他们的应用以及依赖

  3. Learn Prompt-基础用法

    基本法则​相比于搜索引擎，ChatGPT的优势在于其高效的想法关联和信息归纳能力。在进一步讲解提示的构建思路前，我希望你可以了解到两点通用的经验法则，用来提高生成AI模型的输出质量。其中包括尝试提示的多种表述以获得最佳结果使用清晰简短的提示，避免不必要的词语减少不精确的描述当然，这并不是所有的经验法则。我们希望的是，你

  4. Qt浏览器模块的几点说明

    Qt5.6以前用的是webkit，Qt5.6版本以后分两种情况，一种是mingw编译器（windows系统）对应的Qt库不再提供浏览器模块。Qt5.6以后的版本在linux系统和mac等系统，都不存在没有浏览器控件的情况，都使用的是webengine。仅仅是windows上的mingw编译器的Qt版本没有，其他系统其实

  5. 【线性回归、岭回归、Lasso回归分别预测患者糖尿病病情】数据挖掘实验一

    Ⅰ、项目任务要求任务描述：将“diabetes”糖尿病患者数据集划分为训练集和测试集，利用训练集分别结合线性回归、岭回归、Lasso回归建立预测模型，再利用测试集来预测糖尿病患者病情并验证预测模型的拟合能力。具体任务要求如下：搜集并加载“diabetes”患者糖尿病指数数据集。定义训练集和测试集（训练集和测试集比例分别

  6. 并发编程系列-AQS

    AbstractQueuedSynchronizer（AQS）是一个抽象队列同步器，它用于构建依赖于先进先出（FIFO）等待队列的阻塞锁和相关同步器的框架。该类的目的在于提供基本功能的封装，适用于大多数需要使用单个原子int值表示同步状态的同步器。举例来说，ReentrantLock、Semaphore以及Future

  7. 《计算机视觉中的多视图几何》笔记（3）

    3ProjectiveGeometryandTransformationsof3D这章主要讲的是3D的射影几何，与2D的射影几何差不多。主要区别是：3D射影几何对偶的是点和平面，直线是自对偶的。3D空间中直线有4个自由度，这一现象并不是那么容易直接得出。一种方法是把直线用正交平面两个交点表示。文章目录3Projecti

  8. 【Rust 基础篇】Rust 父trait：扩展和组织trait的继承体系

    导言Rust是一种以安全性和高效性著称的系统级编程语言，其设计哲学是在不损失性能的前提下，保障代码的内存安全和线程安全。在Rust中，trait是一种用于抽象类型行为的机制。有时候，我们需要在一个trait的基础上扩展更多的行为，或者将多个trait组合起来形成一个更大的trait继承体系。这时，Rust的父trait

  9. vue3 - 前端 Vue 项目提交GitHub 使用Actions自动化部署

    GitHubDemo地址在线预览参考文章使用GithubActions发布Vue网站到GithubPage使用GithubActions将Vue项目部署到GithubPages前端使用githubpages部署自己的网站GitHubActions自动化部署前端项目指南前言vue前端项目写好之后，想部署到线上通过在线地址