网络斗地主游戏的完整设计与实现(二）系统的核心技术路线

引言

在前面的文章《网络斗地主游戏的完整设计与实现(一）项目的基本结构》介绍了项目的整体结构。接下来说明一下系统中用到的核心技术路线
项目的源码可在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.Div=document.createElement("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;