⽹络⽃地主游戏的完整设计与实现（⼆）系统的核⼼技术路线
引⾔
在前⾯的⽂章《》介绍了项⽬的整体结构。接下来说明⼀下系统中⽤到的核⼼技术路线
项⽬的源码可在CSDN资源中
游戏界⾯的呈现
⽃地主游戏的玩家分成三个，⽽且在未叫牌与叫牌后玩家的⾓⾊会发⽣变化，因此要⽤不同的图⽚加以呈现。本项⽬没有使⽤cocos2d之类的游戏框架，⽽是使⽤基本的javascrpt+jquery实现游戏界⾯。
具体对这个项⽬来说，主要的游戏界⾯分为⼏⼤类：
1.背景类
这个项⽬中背景基本上保持不变，所以只要在⽹页上显⽰⼀副较⼤的背景图⽚就可以了，如下图所⽰
在背景图上的⼀些位置预留了空⽩，⽤于显⽰相应的⽂本。
2. ⼈物图像类
这⾥主要显⽰两类⾓⾊，“地主”与“农民”，随着游戏状态的变化，⼈物的形象也有可能发⽣变化。但基本的⼈物形象如下图所⽰：
与背景图⽚不同之处在于，⼈物图像需要显⽰在某个合适的位置，所以要有办法移动图⽚显⽰的位置。这⼀点可以通在将图⽚⽤DIV标签包裹起来，然后动态地设置DIV的位置来实现。
由于原⽣的javascript不直接⽀持class的定义，所以⽤function的⽅式包装了图⽚的显⽰功能
相应的代码如下：
ImageDiv.js
//图象DIV
function ImageDiv(imgFileName,tagValue)
{
this.Name="ImageDiv";
this.value=tagValue;
this.imgFileName=imgFileName;
this.x=0;
this.y=0;
this.z=0;
this.visib=false
this.ateElement("div");
this.Div.style.position='absolute';
this.Div.name=this.Name;
this.Div.style.width='74px';
this.Div.style.height='98px';
//this.Div.style.backgroundColor='#ffffff';
this.Div.style.visibility='hidden';
if(imgFileName!="")
this.Div.innerHTML="<img src='"+imgFileName+"'>";
document.body.appendChild(this.Div);
this.GetDiv=function()
{
return this.Div;
}
this.GetValue=function()
{
return this.value;
}
this.GetX=function()
{
return this.x;
}
this.GetY=function()
{
return this.y;
}
this.GetZ=function()
{
return this.z;
}
this.SetClass=function(Classf)
{
this.Div.style.width=null; this.Div.style.height=null; this.Div.className=Classf;
}
this.SetId=function(Id)
{
this.Div.id=Id;
}
this.SetW=function(value)
{
this.Div.style.width=value+'px'; }
this.SetH=function(value)
{
this.Div.style.height=value+'px'; }
this.SetX=function(value)
{
php游戏源码this.Div.style.left=value+'px';
this.x=value;
}
this.SetY=function(value)
{
this.p=value+'px';
this.y=value;
Y=value;
}
this.SetZ=function(zValue)
{
this.Div.style.zIndex=zValue;
this.z=zValue;
}
this.SetXY=function(nx,ny)
{
this.Div.style.left=nx+'px';
this.x=nx;
this.p=ny+'px';
this.y=ny;
}
this.SetV=function(bVisible)
{
if(bVisible)
{
this.Div.style.visibility='visible';
}
else
{
this.Div.style.visibility='hidden';
}
}
this.SetImg=function(imgurl)
{
this.Div.innerHTML="<img src='"+imgurl+"'>";
this.imgFileName=imgurl;
}
this.SetHtml=function(Html)
{
this.Div.innerHTML=Html;
}
{
veChild(this.Div);
}
}
其中的imgFileName指明要显⽰的图⽚⽂件，⽽SetX,SetY⽅法设置了图⽚显⽰的位置，SetZ⽅法设置叠放次序。
3.扑克牌图像类
由于扑克牌图像有时需要显⽰⼀张，有时需要显⽰⼀组，所以⽤CardDiv.js与CardGroupDiv.js进⾏包装。⽽且扑克牌⼜分为⽔平显⽰与重直显⽰两种情形，所以⼜分别⽤CardHorizonGrpDiv.js与CardVerticalGrpDiv.js进⾏包装。相应的源码可以将完整的项⽬后进⾏查看。
4.⽂字类
需要在指定的位置动态显⽰⽂本块，⽤TextDiv.js与TextGroupDiv.js进⾏包装。与显⽰图像类似的是要可以动态地设置⽂本块的位置。游戏状态的刷新
为了能够及时地刷新游戏的状态，需求前端与后台服务器进⾏通信。由于浏览器与服务器间的通信过程是请求、应答式的。⼀旦服务上的状态发⽣了变化，该如何及时地通知前端呢？理论是有两种解决⽅案
1，由服务器推送消息给客户端
2，由客户端连续不断地向服务器进⾏查询，也就是轮询。
本项⽬采⽤轮询的⽅式，客户端每秒向服务器发起⼀次请求，检查是否有新的状态需要更新。与此同时，每秒发出⼀次请求，也做为⼼跳请求，如果服务器发现客户端长期没有⼼跳，就会判断客户端已经离线。
由存储过程实现后台业务逻辑
数据库表只能保存静态数据，如果要想实现后台的业务逻辑，必须安排在某处执⾏相关的代码。⼀般来说这种后台业务逻辑缓组成⼀个业务逻辑层。这层代码可以由jsp,serverlet,php,asp等等服务器脚本技术来实现。
本项⽬将业务逻辑交由数据库的存储过程来实现。为此设计了⼀个调⽤其它存储过程的⼊⼝存储过程。
CREATE PROCEDURE dbo.callProc
@procName varchar(100),
@inStr varchar(200),
@outStr varchar(4000) output
as
set nocount on
begin
declare@SQLString nvarchar(500)
declare@ParmDefinition nvarchar(500)
declare@outPara varchar(4000)
if rtrim(ltrim(@inStr))<>''
begin
set@inStr=@inStr+','
end
set@SQLString= N'exec '+@procName+' '+@inStr+'@outPara out'
set@ParmDefinition= N'@outPara varchar(4000) OUTPUT'
EXECUTE sp_executesql @SQLString,@ParmDefinition,@outPara=@outStr output
return0
end
这样⼀来，就可以极⼤地简化后台脚本代码。下⾯是调⽤这个⼊⼝存储过程的php代码proc.php

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。