制作五子棋小游戏单机/在线联网对弈手把手精致设计含游戏服务器源码4

接上期。传送门：

http://liuxinyumo.cn/index.php?s=/Home/Index/content/id/5.html

项目仓库地址：https://github.com/liuxinyumocn/LittleGame

 

到目前为止我们完成了对棋盘的设计、欢迎界面以及从欢迎界面通过点击事件进入游戏界面的工作，在此之后我为了“美化”游戏，做了一个图片放置于DIV背景，并简单调整图片与线条的颜色，接下来我们继续完成课题设计。

本次篇幅我们将设计黑白双方棋子，通过点击事件拾取落点，并独立化落子功能，希望通过提供坐标以达到下棋目的，其作用在于未来联机时，不仅可以通过屏幕落子，并可以对来自网络数据给对手落子。

第一步我们需要绘制两种颜色的棋子元素。

代码编辑器打开IGraphElement.js文件，追加棋子定义：

{
		ID:"Piece",
		Version:100.00,
		Src:new Array(),
		Class:function(){
			this.Color;
			//初始化函数 
			this.SetWhite = function(){	//将棋子变成白色
				this.Color = "rgb(205,205,205)";
			}
			this.Constructor = function(){
				this.Color = "rgb(50,50,50)";//默认为黑色
			}
			this.Draw = function(ctx){
				ctx.beginPath();
				ctx.arc(this.Left,this.Top,18,0,Math.PI*2,true);
				ctx.fillStyle = this.Color;
				ctx.fill();
				ctx.closePath();
				return true;
			}
			this.Over = function(){		
				return false;
			}
		}
	}

其中我们使用了自定义成员函数 SetWhite() 稍后我会介绍自定义函数如何使用。

 

我们定义完了一个棋子的图像，但我们现在并不知道，棋子怎么落才为规范，于是我们现在需要独立定义一个工具类，用于管理落点，并能够通过提供偏移值修正落点（因为我们将来的棋盘位置可能随时发生调整）。

独立创建新的管理工具类，该类的具体作用是：提供棋盘中的编号坐标（虽然有字母，但我们统一使用数字），给出实际落点坐标；

或给出实际落点坐标（该坐标可能存在距离误差）我们给出误差范围内最近落点编号坐标，（为什么会有误差？因为人手落点位置不太容易精准点到棋盘落子点，误差范围内我们都认为点到了）

var PiecePostionKit = {
		//棋子落点工具
		//需要给出棋盘左上角的落点坐标（而非棋盘左上角坐标，因为有编号）
		//允许的误差半径
		//因为是工具类，设计成静态类即可
		Displacement:{	
		//棋盘偏移 我是一点点试出来因为比较快 你创建一个棋子看看什么位置能放在左上角即可
			x:52,
			y:52
		},
		Radius:20,
		BoardPostion:function(x,y){	//提供棋盘坐标 给出屏幕落点坐标
			var X,Y;
			X = this.Displacement.x + (x-1)*40;
			Y = this.Displacement.y + (y-1)*40;
			return {x:X,y:Y};
		},
		ScreenPostion:function(x,y){	//提供屏幕坐标 给出棋盘落点坐标
			var X,Y;
			X = x-this.Displacement.x+this.Radius+40;
			Y = y-this.Displacement.y+this.Radius+40;
			var X = parseInt(X/40);
			var Y = parseInt(Y/40);
			if(X>0 && X<16 && Y > 0 && Y <16)
				return {x:X,y:Y};
			return {x:-1,y:-1};
		}
	}

经过直接给棋盘坐标可以看见，能够准确给出屏幕坐标位置：

为了更好的游戏体验，我们增加落点定位器来辅助确定位置，同时也测试一下由给屏幕坐标是否能够准确给出棋盘坐标。

打开IGraphElement.js，创建一个定位辅助器。

{
		ID:"Sight",
		Version:100.00,
		Src:new Array(),
		Class:function(){
			this.Color;
			this.Radius;
			this.LineWeigth;
			this.Length;
			//初始化函数 
			this.Constructor = function(){
				this.Color = "rgb(200,200,200)";//默认为黑色
				this.Radius = 20;
				this.LineWeigth = 1;
				this.Length = 5;
			}
			this.Draw = function(ctx){
				ctx.beginPath();
				ctx.lineWidth = this.LineWeigth;

				var x1,x2,y1,y2;
				x1 = this.Left-this.Radius;
				x2 = this.Left+this.Radius;
				y1 = this.Top-this.Radius;
				y2 = this.Top+this.Radius;

				ctx.moveTo(x1+this.Length,y1);
				ctx.lineTo(x1,y1);
				ctx.lineTo(x1,y1+this.Length);
				
				ctx.moveTo(x2-this.Length,y2);
				ctx.lineTo(x2,y2);
				ctx.lineTo(x2,y2-this.Length);

				ctx.moveTo(x1+this.Length,y2);
				ctx.lineTo(x1,y2);
				ctx.lineTo(x1,y2-this.Length);
				
				ctx.moveTo(x2-this.Length,y1);
				ctx.lineTo(x2,y1);
				ctx.lineTo(x2,y1+this.Length);
				
				ctx.strokeStyle = this.Color;
				ctx.stroke();
				ctx.closePath();
				return true;
			}
			this.Over = function(){		
				return false;
			}
		}
	}

给出一个测试点位：

var Sight = this._MainPage.AddElement("Sight");
			var ps = PiecePostionKit.ScreenPostion(200,160);
			p = PiecePostionKit.BoardPostion(ps.x,ps.y);
			Sight.Left(p.x);
			Sight.Top(p.y);	
			Sight.Visible(true);

效果满意。

 

现在我们增加Move事件，保证在棋盘内，辅助器可以跟随鼠标进行落点定位。

if(this._Animation.CurrentPage == this._MainPage){
				var x = this._Listener.X;
				var y = this._Listener.Y;
				var ps = PiecePostionKit.ScreenPostion(x,y);
				if(ps.x != -1){
					var p = PiecePostionKit.BoardPostion(ps.x,ps.y);
					this._Sight.Left(p.x);
					this._Sight.Top(p.y);
				}
			}

这样，辅助器就可以跟随鼠标了，而且还能检验坐标工具坐标计算的是否正确。

 

今天就到这里了……