HTML5+JS 《五子飞》游戏实现(五)移动棋子
上一章 我们知道了怎么处理两个重要的吃棋动作,想要吃对方的棋子,首先得移动自己的棋子。现在里沃特跟大家分享分享,怎么移动棋子。
想要移动棋子,在页面上,首先要点击一下要移动的棋子,然后再点击一下目标位置,如果可以移动,则把棋子移动的目标位置,原来的位置就要清空。
上面这句话,我们要分两步来处理:1、判断目标是否可移动;2、可以移动则移动棋子。
1、判断目标是否可移动。
首先移动时只能按直线,其次目标位置与原始位置之间不能有其他棋子:
// 是否可移动 this.canMove = function (pDest, pSrc) { var pi = this.getIndex(pDest, pSrc); if (pi && pi.destIndex != pi.srcIndex) { if (this.chesses[pi.destIndex].player == Player.None && this.chesses[pi.srcIndex].player != Player.None) { var i1, i2, j; for (var i = 0; i < this.lines.length; i++) { i1 = $.inArray(pi.destIndex, this.lines[i]); i2 = $.inArray(pi.srcIndex, this.lines[i]); if (i1 != -1 && i2 != -1) { if (pi.destIndex < pi.srcIndex) { for (var j = Math.min(i1, i2); j < Math.max(i1, i2) - 1; j++) { if (this.chesses[this.lines[i][j]].player != Player.None) { return false; } } } else { for (var j = Math.min(i1, i2) + 1; j <= Math.max(i1, i2); j++) { if (this.chesses[this.lines[i][j]].player != Player.None) { return false; } } } return pi; } } } } return false; };
2、移动棋子:
可以移动时,要判断移动后,可不可以夹对方一个或挑对方一对,如果可以的话还要把对方被吃掉的棋子换成自己的棋子;同时根据上一章的函数,我们知道,夹一个或挑一对的同时有可能会出现同时有两条线或多条线的棋子被吃掉,(下一次我们再细讲)。:
// 移动棋子 this.moveChess = function (pDest, pSrc) { this.chessarray = null; var pi = this.canMove(pDest, pSrc); if (pi) { this.chesses[pi.srcIndex].moveTo(this.chesses[pi.destIndex]); var chess = this.chesses[pi.destIndex]; var r1 = this.canCarry(chess), r2 = this.canClip(chess); if (r1 || r2) { var rl = (r1 ? r1.length : 0) + (r2 ? r2.length : 0); if (rl == 1) { if (r1) { // 被替换掉的棋子 this.chessreplace.push(r1[0][0]); this.chessreplace.push(r1[0][1]); // 替换 this.chesses[r1[0][0].point.index].player = chess.player; this.chesses[r1[0][1].point.index].player = chess.player; } else { // 被替换掉的棋子 this.chessreplace.push(r2[0][0]); // 替换 this.chesses[r2[0][0].point.index].player = chess.player; } } else { // 如果有多条路线的棋子可以吃,先存起来,再提示用户选择吃哪一条线上的 this.chessarray = []; if (r1) { for (var i = 0; i < r1.length; i++) { this.chessarray.push(r1[i]); } } if (r2) { for (var i = 0; i < r2.length; i++) { this.chessarray.push(r2[i]); } } } } return true; } return false; };
这一节讲的比较简单,大家先消化一下。下一节我们将实现多重棋子的操作与提示。
分类:
游戏开发
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· Linux系列:如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· 单线程的Redis速度为什么快?
· SQL Server 2025 AI相关能力初探
· 展开说说关于C#中ORM框架的用法!
· AI编程工具终极对决:字节Trae VS Cursor,谁才是开发者新宠?