网上书店网站建设,个人网站有什么内容,企业网站网上推广的途径,专门做旅游的视频网站今天是农历五月初五#xff0c;端午节。在此#xff0c;祝大家端午安康#xff01;端午节是中华民族古老的传统节日之一。端午也称端五#xff0c;端阳。此外#xff0c;端午节还有许多别称#xff0c;如#xff1a;午日节、重五节、五月节、浴兰节、女儿节、天中节、地… 今天是农历五月初五端午节。在此祝大家端午安康端午节是中华民族古老的传统节日之一。端午也称端五端阳。此外端午节还有许多别称如午日节、重五节、五月节、浴兰节、女儿节、天中节、地腊、诗人节、龙日等。不好意思跑题了就此打住。事情的经过是这样的今年端午节公司给每位员工都准备了一个粽子礼盒本以来就几个粽子而已没想到今年的粽子礼盒内暗藏玄关内附一个棋盘和五子棋子。粽子什么的都不重要主要是这个五子棋我还挺喜欢的哈哈哈。????正好这段时间用 Blazor 将之前的博客重构了一遍于是就想着能否用 Blazor 写一个五子棋⚫⚪小游戏呢说干就干本篇主要是分享基于 Blazor 开发的五子棋小游戏先放试玩地址https://blazor.meowv.com/gobang 。大家可以先打开链接让他先加载一会(挂在GitHub有点慢~????)再继续回来看文章哈。刚开始本来我是自己写的发现越写越复杂遂放弃就在Github上寻找有没有实现过类似的需求别说还真有一位大神用 Blazor 实现了地址https://github.com/ut32/gobang/ 所以我的代码逻辑基本上都参考这位大神的代码。????????????接下来看看实现过程新建一个Gobang.razorrazor组件设置路由page /gobang。我这里直接放在之前 Blazor 实战系列的项目中如果你没有看过我的 Blazor 实战系列文章建议你快去刷一遍。????相信五子棋大家都玩过规则我就不说了。先理一下需求和实现步骤在页面上显示一个 19x19 的棋盘。给两个选项电脑先手还是我先手。开始游戏按钮结束游戏按钮一个按钮文字动态显示。落子问题黑子始终先手黑白交替落子已经落子的地方不允许继续落子。黑白棋子落子的样式问题。人机对战电脑如何最佳选择位置进行落子。如何判断输赢四个方向横竖撇捺。实现一个简单的五子棋小游戏不考虑放弃落子、禁手等问题。先渲染一个 19x19 的棋盘直接两层 for 循环配合 CSS 搞定。div classgobang-boxdiv classchessfor (var i 0; i 19; i){for (var j 0; j 19; j){var _i i;var _j j;div classcell onclick(async () await Playing(_i, _j))span classchess(Chess[i, j])/span/div}}/div
/div
其中的onclick方法先不看主要是我方落子的点击事件。Chess是定义的一个二维数组private int[,] Chess new int[19, 19];。最重要的棋子就是span标签用class来控制黑白当class chess1为黑子当class chess2为白子。同时在棋盘旁边添加一些按钮选择谁先手的选项和描述信息。div classchess-infoh1五子棋⚫⚪/h1pb⚡是时候表演真正的技术了快来一场人机大战吧⚡/b/pplabelinput typeradio namechess checkedchecked onclick(() first ai) 电脑先手/label/pplabelinput typeradio namechess onclick(() first me) 我先手/label/ppbutton classbox-btn onclickStartGame(IsInGame ? 结束游戏 : 开始游戏)/button/pdiv classchess-msgpbmsgs/b/pp游戏规则/pspan1请选择电脑先手还是你先手黑棋始终先手。/spanspan2点击开始游戏按钮开始对局。/spanspan3点击结束游戏按钮结束对局。/spanspan4对局双方各执一色棋子。/spanspan5空棋盘开局。/spanspan6黑先、白后交替下子每次只能下一子。/spanspan7棋子下在棋盘的空白点上棋子下定后不得向其它点移动不得从棋盘上拿掉或拿起另落别处。/spanspan8黑方的第一枚棋子可下在棋盘任意交叉点上。/spanspan9轮流下子是双方的权利del但允许任何一方放弃下子权即PASS权/del。/spanspan10del五子棋对局执行黑方指定开局、三手可交换、五手两打的规定。整个对局过程中黑方有禁手白方无禁手。黑方禁手有三三禁手、四四禁手和长连禁手三种。/del/span/div
/div
这里同时把用到的css样式给到大家。.gobang-box {width: 1200px;margin: 0 auto;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;
}
.chess {width: 760px;height: 760px;float: left;
}
.chess .cell {float: left;width: 40px;height: 40px;position: relative;cursor: pointer;font-size: 10px;color: #ffd800;
}
.chess .cell::after {content: ;position: absolute;height: 2px;display: block;width: 100%;border-bottom: #f5d099 1px solid;background: #c8a06f;top: 50%;left: 0;z-index: 2;
}
.chess .cell::before {content: ;position: absolute;height: 100%;display: block;width: 2px;border-right: #f5d099 1px solid;background: #c8a06f;top: 0;left: 50%;z-index: 1;
}
.chess .cell .chess1 {display: block;width: 30px;height: 30px;border-radius: 15px;text-align: center;line-height: 54px;background: #000000;left: 5px;top: 5px;position: absolute;z-index: 10;background-image: radial-gradient(#444 5%, #111 15%, #000 60%);box-shadow: 0px 0px 3px #333;
}
.chess .cell .chess2 {display: block;width: 30px;height: 30px;border-radius: 15px;text-align: center;left: 5px;top: 5px;position: absolute;z-index: 10;line-height: 54px;background-image: radial-gradient(#ffffff 5%, #f1f1f1 15%, #f1f1f1 60%);box-shadow: 0px 0px 3px #333;
}
.chess-info {float: left;width: 400px;height: 760px;padding-left: 20px;margin-left: 40px;
}
.chess-info input {display: initial;width: initial;height: initial;visibility: initial;
}
.chess-msg {margin-top: 20px;color: #aaa;
}
.chess-msg span {display: block;font-size: 12px;
}
现在来把用到的一些变量和方法搞进来。private int[,] Chess new int[19, 19];private string first ai;private bool IsInGame false;private string msgs;private int AIChess 1;private int MineChess 2;
Chess是棋盘的二维数组。first为先手字段默认电脑先手我这里赋值为ai用他来判断是我先手还是电脑先手。IsInGame用来判断当前游戏状态是否开始游戏可以根据它来动态控制按钮文字内容。msgs是一个提示信息告诉玩家双方执子情况。AIChess 1和MineChess 2就是黑白子默认电脑为黑子我为白子。上方两个radio标签用来选择谁先手点击事件分别给first赋值按钮点击事件StartGame。private void StartGame()
{// 初始化棋盘Chess new int[19, 19];// 是否开始游戏点击按钮重置显示消息if (IsInGame){msgs string.Empty;}else{// 电脑先手if (first ai){AIChess 1;MineChess 2;// 电脑落子正中心天元位置Chess[9, 9] AIChess;msgs 电脑执黑子 ⚫ 我执白子 ⚪;}else{// 我先手的话则我执黑子电脑执白子MineChess 1;AIChess 2;msgs 我执黑子 ⚫ 电脑执白子 ⚪;}}// 改变游戏状态用于显示不同文字的按钮IsInGame !IsInGame;
}
开始游戏之前先初始化一下棋盘然后判断当前是否在游戏中在游戏中点了按钮对应的肯定是结束游戏那么此时将提示消息清空。如果未开始游戏点了按钮就是开始对局了此时就去判断电脑先手还是我先手。根据这两种情况分别给AIChess和MineChess赋值给出对应的提示消息。如果是电脑先手那么自动在棋盘正中心位置落子查了一下这个位置叫天元。直接将棋盘数组赋值Chess[9, 9] AIChess;即可最后点了按钮是需要改变状态的IsInGame !IsInGame;。那么如果是我先手或者电脑落子之后此时需要我方落子那么我方落子的方法就是Playing(int row, int cell)方法。private async Task Playing(int row, int cell)
{// 是否开始游戏当前判断没开始给出提示if (!IsInGame){await Common.InvokeAsync(alert, \n????点击开始游戏按钮开启对局请阅读游戏规则????);return;}// 已落子直接返回不做任何操作if (Chess[row, cell] ! 0)return;// 根据传进来的坐标进行我方落子Chess[row, cell] MineChess;if (IsWin(MineChess, row, cell)){await Common.InvokeAsync(alert, \n恭喜你赢了????);IsInGame !IsInGame;return;}// 我方落子之后电脑落子await AIPlaying(AIChess);
}
我放落子之前先判断是否开始游戏如果为点击开始游戏按钮则给出弹窗提示直接返回不做任何操作接着有一种情况我方点击了已经落子了的位置也不做任何操作直接返回。某位置是否落子可以根据传进来的坐标进行判断Chess[row, cell] 0 表示未落子Chess[row, cell] ! 0就表示已经落子了这里不可以继续落子了。然后就可以将我方点击的位置进行落子了直接给数组赋值即可Chess[row, cell] MineChess;。落子之后需要判断输赢这里引入了一个新的方法IsWin(...)后面说。如果返回true就是赢了给出提示改变游戏状态。如果没有赢我方落子之后就该电脑落子了这里也是引入了一个新的方法AIPlaying(...)。private async Task AIPlaying(int chess)
{// 我方var minePoints new ListValuedPoint();// 电脑var aiPonints new ListValuedPoint();for (int i 0; i 19; i){for (int j 0; j 19; j){// 还未落子的位置列表if (Chess[i, j] 0){minePoints.Add(GetValuedPoint(chess, i, j));aiPonints.Add(GetValuedPoint((chess 1 ? 2 : 1), i, j));}}}// 获取最佳位置var minePoint minePoints.OrderByDescending(x x.Score).FirstOrDefault();var aiPonint aiPonints.OrderByDescending(x x.Score).FirstOrDefault();if (minePoint ! null aiPonint ! null){// 如果某个位置对手分数高于我方则抢占位置if (minePoint.Score aiPonint.Score){Chess[minePoint.Point.Row, minePoint.Point.Cell] chess;if (IsWin(AIChess, minePoint.Point.Row, minePoint.Point.Cell)){await Common.InvokeAsync(alert, \n电脑赢了你个渣渣????);IsInGame !IsInGame;return;}}else{Chess[aiPonint.Point.Row, aiPonint.Point.Cell] chess;if (IsWin(AIChess, aiPonint.Point.Row, aiPonint.Point.Cell)){await Common.InvokeAsync(alert, \n电脑赢了你个渣渣????);IsInGame !IsInGame;return;}}}
}
电脑落子采用的是遍历计分方式计算每一个空位的分数分数由高到底于是先构建一个对象ValuedPoint。//ValuedPoint.cs
public class ValuedPoint
{public Point Point { get; set; }public int Score { get; set; }
}//Point.cs
public struct Point
{public int Row { get; set; }public int Cell { get; set; }
}
添加我方和电脑计分对象列表minePoints和aiPonints遍历棋盘中未落子的位置进行分数计算计算分数策略引入一个新的方法GetValuedPoint(...)。然后分别获取黑子和白子双方应该落子的最佳位置即获取到分数最高的位置坐标就电脑落子来说如果我分数高于电脑电脑就会抢占这个位置进行落子。落子之后同样调用IsWin(...)来判断电脑是否赢了赢了给出提示改变状态结束对局没赢就继续下。现在来看看计分的策略GetValuedPoint(...)。private ValuedPoint GetValuedPoint(int chess, int row, int cell)
{var aiChess chess 1 ? 2 : 1;int HScore 0, VScore 0, PScore 0, LScore 0;#region 横方向 ➡⬅{var i 1;var score 1;var validPlace 0;var rightValid true;var leftValid true;var rightSpace 0;var leftSpace 0;var isDead false;while (i 5){var right cell i;if (rightValid right 19){if (Chess[row, right] chess){if (rightSpace 0)score;validPlace;}else if (Chess[row, right] 0){rightSpace;validPlace;}else if (Chess[row, right] aiChess){rightValid false;if (rightSpace 0)isDead true;}}var left cell - i;if (leftValid left 0){if (Chess[row, left] chess){if (leftSpace 0)score;validPlace;}else if (Chess[row, left] 0){leftSpace;validPlace;}else if (Chess[row, left] aiChess){leftValid false;if (leftSpace 0)isDead true;}}i;}if (score 5)HScore 100000;if (score 4){if (!isDead)HScore 80000;elseHScore validPlace 4 ? 0 : 8000;}if (score 3){if (!isDead)HScore validPlace 4 ? 0 : 4000;elseHScore validPlace 4 ? 0 : 2000;}if (score 2){if (!isDead)HScore validPlace 4 ? 0 : 600;elseHScore validPlace 4 ? 0 : 300;}}#endregion#region 竖方向 ⬇⬆{var i 1;var score 1;var validPlace 0;var topValid true;var bottomValid true;var topSpace 0;var bottomSpace 0;var isDead false;while (i 5){var top row - i;if (topValid top 0){if (Chess[top, cell] chess){if (topSpace 0)score;validPlace;}else if (Chess[top, cell] 0){topSpace;validPlace;}else if (Chess[top, cell] aiChess){topValid false;if (topSpace 0)isDead true;}}var bottom row i;if (bottomValid bottom 19){if (Chess[bottom, cell] chess){if (bottomSpace 0)score;validPlace;}else if (Chess[bottom, cell] 0){bottomSpace;validPlace;}else if (Chess[bottom, cell] aiChess){bottomValid false;if (bottomSpace 0)isDead true;}}i;}if (score 5)VScore 100000;if (score 4){if (!isDead)VScore 80000;elseVScore validPlace 4 ? 0 : 8000;}if (score 3){if (!isDead)VScore validPlace 4 ? 0 : 4000;elseVScore validPlace 4 ? 0 : 2000;}if (score 2){if (!isDead)VScore validPlace 4 ? 0 : 600;elseVScore validPlace 4 ? 0 : 300;}}#endregion#region 撇方向 ↙↗{var i 1;var score 1;var validPlace 0;var topValid true;var bottomValid true;var topSpace 0;var bottomSpace 0;var isDead false;while (i 5){var rightTopRow row - i;var rightTopCell cell i;if (topValid rightTopRow 0 rightTopCell 19){if (Chess[rightTopRow, rightTopCell] chess){if (topSpace 0)score;validPlace;}else if (Chess[rightTopRow, rightTopCell] 0){topSpace;validPlace;}else if (Chess[rightTopRow, rightTopCell] aiChess){topValid false;if (topSpace 0)isDead true;}}var leftBottomRow row i;var leftBottomCell cell - i;if (bottomValid leftBottomRow 19 leftBottomCell 0){if (Chess[leftBottomRow, leftBottomCell] chess){if (bottomSpace 0)score;validPlace;}else if (Chess[leftBottomRow, leftBottomCell] 0){bottomSpace;validPlace;}else if (Chess[leftBottomRow, leftBottomCell] aiChess){bottomValid false;if (bottomSpace 0)isDead true;}}i;}if (score 5)PScore 100000;if (score 4){if (!isDead)PScore 80000;elsePScore validPlace 4 ? 0 : 9000;}if (score 3){if (!isDead)PScore validPlace 4 ? 0 : 4500;elsePScore validPlace 4 ? 0 : 3000;}if (score 2){if (!isDead)PScore validPlace 4 ? 0 : 800;elsePScore validPlace 4 ? 0 : 500;}}#endregion#region 捺方向 ↘↖{var i 1;var score 1;var validPlace 0;var topSpace 0;var bottomSpace 0;var topValid true;var bottomValid true;var isDead false;while (i 5){var leftTopRow row - i;var leftTopCell cell - i;if (topValid leftTopRow 0 leftTopCell 0){if (Chess[leftTopRow, leftTopCell] chess){if (topSpace 0)score;validPlace;}else if (Chess[leftTopRow, leftTopCell] 0){topSpace;validPlace;}else if (Chess[leftTopRow, leftTopCell] aiChess){topValid false;if (topSpace 0)isDead true;}}var rightBottomRow row i;var rightBottomCell cell i;if (bottomValid rightBottomRow 19 rightBottomCell 19){if (Chess[rightBottomRow, rightBottomCell] chess){if (bottomSpace 0)score;validPlace;}else if (Chess[rightBottomRow, rightBottomCell] 0){bottomSpace;validPlace;}else if (Chess[rightBottomRow, rightBottomCell] aiChess){bottomValid false;if (bottomSpace 0)isDead true;}}i;}if (score 5)LScore 100000;if (score 4){if (!isDead)LScore 80000;elseLScore validPlace 4 ? 0 : 9000;}if (score 3){if (!isDead)LScore validPlace 4 ? 0 : 4500;elseLScore validPlace 4 ? 0 : 3000;}if (score 2){if (!isDead)LScore validPlace 4 ? 0 : 800;elseLScore validPlace 4 ? 0 : 500;}}#endregionreturn new ValuedPoint{Score HScore VScore PScore LScore,Point new Point{Row row,Cell cell}};
}
分别对给定位置的棋子四个方向横方向 ➡⬅、竖方向 ⬇⬆、撇方向 ↙↗、捺方向 ↘↖ 进行遍历计算每一个空位的分数分数由高到低最后返回ValuedPoint对象。最后判断是否赢棋五子连珠的方法IsWin(int chess, int row, int cell)。private bool IsWin(int chess, int row, int cell)
{#region 横方向 ➡⬅{var i 1;var score 1;var rightValid true;var leftValid true;while (i 5){var right cell i;if (rightValid right 19){if (Chess[row, right] chess){score;if (score 5)return true;}elserightValid false;}var left cell - i;if (leftValid left 0){if (Chess[row, left] chess){score;if (score 5)return true;}elseleftValid false;}i;}}#endregion#region 竖方向 ⬇⬆{var i 1;var score 1;var topValid true;var bottomValid true;while (i 5){var top row - i;if (topValid top 0){if (Chess[top, cell] chess){score;if (score 5)return true;}elsetopValid false;}var bottom row i;if (bottomValid bottom 19){if (Chess[bottom, cell] chess){score;if (score 5)return true;}else{bottomValid false;}}i;}}#endregion#region 撇方向 ↙↗{var i 1;var score 1;var topValid true;var bottomValid true;while (i 5){var rightTopRow row - i;var rightTopCell cell i;if (topValid rightTopRow 0 rightTopCell 19){if (Chess[rightTopRow, rightTopCell] chess){score;if (score 5)return true;}elsetopValid false;}var leftBottomRow row i;var leftBottomCell cell - i;if (bottomValid leftBottomRow 19 leftBottomCell 0){if (Chess[leftBottomRow, leftBottomCell] chess){score;if (score 5)return true;}elsebottomValid false;}i;}}#endregion#region 捺方向 ↘↖{var i 1;var score 1;var topValid true;var bottomValid true;while (i 5){var leftTopRow row - i;var leftTopCell cell - i;if (topValid leftTopRow 0 leftTopCell 0){if (Chess[leftTopRow, leftTopCell] chess){score;if (score 5)return true;}elsetopValid false;}var rightBottomRow row i;var rightBottomCell cell i;if (bottomValid rightBottomRow 19 rightBottomCell 19){if (Chess[rightBottomRow, rightBottomCell] chess){score;if (score 5)return true;}elsebottomValid false;}i;}}#endregionreturn false;
}
当对弈双方在棋盘落子后基于落子的坐标在四个方向横方向 ➡⬅、竖方向 ⬇⬆、撇方向 ↙↗、捺方向 ↘↖ 找到是否有五个连子如果可以找到就返回true表示赢了结束本局没找到就继续对弈。以上便是基于 Blazor 开发五子棋⚫⚪小游戏的实现过程功能比较单一请君赏阅最后再次祝大家端午节安康好了我不能再写了我女朋友喊我下五子棋⚫⚪去了。????????????
