网页游戏开发入门教程三(简单程序应用)

答案：
网页游戏开发入门教程二（游戏模式+系统）
http://www.zhaoxi.net/article/20724.htm

一、选择开发语言 
后台：java .net php 
前台：flex javascript ajax 
数据库：mysql mssql 
用哪种组合，真的不重要。重要的是时间和成本。复杂的地方在数据的交互和完善，而不在技术或效果的实现。往往遇到一些问题。比如地图如何编？人物移动如何实现？其实这些问题从技术上实现都比较容易。难在实现后，数据如何交互。没有解决数据交互的问题，实现这些技术点的意义不大。我用的是php+javascript+mysql。 
原因：简单，上手快。可以比较快速的出产品。 
二、程序简单应用。 
、模板 
为了方便UI的修改。所以用模板。smart template还算方便。很简单。代码也可以嵌套在模板里。唯一的问题是如果美术不会程序，修改模板还得程序来。不科学啊。 
smart template的教程网上有。只说一点。可以在模板（.html的文件）里用<?php ?>嵌套任何代码。获得传值。用$_obj[‘xxx']或者用$_stack[0][‘']可以和{xxx}写法的代码嵌套。跟.php的文件一样，没任何区别。 
、地图 
因为游戏类型不是ogame模式的，所以地图并不是自动生成。而是全从数据库里调用。思路很简单。地图是一整张大图。切成多个小图块。数据库里记录下每个小图块对应大图的绝对坐标。显示的时候，调用相应坐标区域的小图块。 
代码类似： 
$sql="select * from map where mapx between $xxx and $xxx and mapy between $ yyy and $yyy "; 
意思就是从地图表里，获得横坐标xx到xx。纵坐标xx到xx的所有小图块。比如20个。假设我们写个函数showMap(x,y)，把获得的数据全显示出来。地图可以有很多层。 
每个小图块都是一个div。具体的控制就用css就行了。小图块可以当作div的背景。也可以用作div里的图片。控制好div的left和top就行了。（left和top就是小图块相对于大图块的绝对坐标）showMap(x,y)就放在下面两个层的里面。 
一个层处理地图大小： 
<div style=\"position:relative;width:".$mapwidth."px;height:".$mapheight."px;overflow:hidden\" > 
一个层处理拖动： 
复制代码 代码如下:
 
<div style=\"position:absolute;z-index:10;left:2px;top:2px;width:".$mapwidth."px;height:".$mapheight."px;\" onmousedown=\"fDragging(this, event,false);\"> 
//处理拖动的js代码。(网上抄的。。感谢这位大大。) 
<script> 
function fDragging(obj, e, limit){ 
if(!e) e=window.event; 
var x=parseInt(obj.style.left); 
var y=parseInt(obj.style.top); 
var x_=e.clientX-x; 
var y_=e.clientY-y; 
if(document.addEventListener){ 
document.addEventListener('mousemove', inFmove, true); 
document.addEventListener('mouseup', inFup, true); 
document.body.style.cursor="move"; 
} else if(document.attachEvent){ 
document.attachEvent('onmousemove', inFmove); 
document.attachEvent('onmouseup', inFup); 
document.body.style.cursor="move"; 
} 
inFstop(e); 
inFabort(e) 
function inFmove(e){ 
var evt; 
if(!e)e=window.event; 
if(limit){ 
var op=obj.parentNode; 
var opX=parseInt(op.style.left); 
var opY=parseInt(op.style.top); 
if((e.clientX-x_)<0) return false; 
else if((e.clientX-x_+obj.offsetWidth+opX)>(opX+op.offsetWidth)) return false; 
if(e.clientY-y_<0) return false; 
else if((e.clientY-y_+obj.offsetHeight+opY)>(opY+op.offsetHeight)) return false; 
//status=e.clientY-y_; 
} 
obj.style.left=e.clientX-x_+'px'; 
obj.style.top=e.clientY-y_+'px'; 
inFstop(e); 
} // shawl.qiu script 
function inFup(e){ 
var evt; 
if(!e)e=window.event; 
if(document.removeEventListener){ 
document.removeEventListener('mousemove', inFmove, true); 
document.removeEventListener('mouseup', inFup, true); 
} else if(document.detachEvent){ 
document.detachEvent('onmousemove', inFmove); 
document.detachEvent('onmouseup', inFup); 
} 
inFstop(e); 
document.body.style.cursor="auto"; 
//实现类似google地图的拖动效果。 
ajaxRead('map.php?mapx='+(e.clientX-x_)+'&mapy='+(e.clientY-y_)+'','2'); 
} // shawl.qiu script 
function inFstop(e){ 
if(e.stopPropagation) return e.stopPropagation(); 
else return e.cancelBubble=true; 
} // shawl.qiu script 
function inFabort(e){ 
if(e.preventDefault) return e.preventDefault(); 
else return e.returnValue=false; 
} // shawl.qiu script 
} 
//]]> 
</script> 
 
注意下面这段代码: 
ajaxRead('map.php?mapx='+(e.clientX-x_)+'&mapy='+(e.clientY-y_)+'','2'); 
这句代码的位置，是在拖动层后，释放鼠标的时候触发的。你可以用alert(“地图拖动到了这里”); 替换。测试下效果。这句代码的意思是，根据当前地图被拖动的坐标。调用一个ajax。也就是重新从数据库里获得地图信息。AjaxRead（）是一个ajax的调用函数。你可以全部自己写。也可以用如prototype.js之类的框架写。 
//处理ajax的代码。(还是网上抄的，有轻微的改动。。。唉，怎么老抄呢。。主要是为了节约开发时间。。还有一点就是我的JavaScript很垃圾的(*^__^*) 嘻嘻) 
复制代码 代码如下:
 
function ajaxRead(file,action) 
{ 
var xmlObj = null; 
if(window.XMLHttpRequest) 
{ 
xmlObj = new XMLHttpRequest(); 
} 
else if(window.ActiveXObject) 
{ 
xmlObj = new ActiveXObject("Microsoft.XMLHTTP"); 
} 
else 
{ 
return; 
} 
function ajaxDo(action) 
{ 
switch(action) 
{ 
case "2": 
document.getElementById('display').innerHTML = xmlObj.responseText;//这里的display是你在页面上层的id。上面的地图代码都需要放到这个层里。如<div id=display name=display></div>写id和name，是为了方便firefox和ie的兼容。 
break; 
} 
} 
xmlObj.onreadystatechange = function() 
{ 
/* 
if(xmlObj.readyState == 1 )//loading状态。 
{ 
document.getElementById('xianshi2').innerHTML = "正在载入"; 
} 
*/ 
if(xmlObj.readyState == 4)//完成状态时。 
{ 
ajaxDo(action); 
} 
} 
xmlObj.open ('GET', file, true); 
//xmlObj.reload('GET', file, true); 
xmlObj.send (null); 
//xmlObj.abort (''); 
} 
 
整个代码的意思就是： 
当拖动地图释放鼠标后，显示层重新获得数据。并无刷新的显示出来。地图里的图片都用的png32的透明图。Ie7和ff3都没问题。遇到ie6的话。。用gif的替代吧。map.php的功能。根据获得的x,y显示相应的一谢谢小图块。这个功能其实就是上面说的showMap(x,y)，这个很像google地图的拖动。不过简单了很多。简单，效果还不错。2、角2、角色属性 
因为设定的要求。角色需要有装备加成，有状态加成（buff,debuff）。这时候，把所有需要的加成，都放到角色类里。是一个很好的方法。 
大概像这样： 
复制代码 代码如下:
 
class role 
{ 
//获得角色数据。 
getRloe() 
{ 
从数据库里获得角色信息。 
} 
//获得装备加成。 
getEquip() 
{ 
获得装备加成信息。 
} 
//获得状态加成 
getState() 
{ 
获得状态加成信息。 
} 
//把上面获得的信息相加或者相减，或者调整。 
//返回角色数据。 
Return xxx 
} 
 
专门把这条提出来说。是因为没把加成放到角色对象里时。每次要战斗或者要干点什么的时候。获得角色数据后，还要加一大堆代码处理加成。重复太多。一让代码前置，世界就清静了。。。 
、道具 
道具比较特殊。因为种类繁多，使用方式多，可能有多个存放地点，可能有唯一道具。有天看了web魔兽的代码。发现他的道具只有一个表。有一个字段，来处理道具位置，如（1，拍卖行，2，背包，3，仓库，4，商店）这个办法挺好的。不过，如果道具的复杂度上去了。比如不同的仓库，不同的拍卖行，需要合成等等。还是只有分表。 
基础道具表： 
id 
itemname 名称 
itemprice 价格 
itemimage 图片 
itemtype 类型 
uptype 增加类型 
uppoint 增加点数 
addtype 增加类型(永久) 
addpoint 增加点数（永久） 
cleardebuff 清除debuff 
addbuff 增加buff 
从uptype开始。都可以写成xx|yy|zz的形式。最好一一对应。分割符号可以自己选。 
调用和处理数据的时候，可以用类似下面的方式： 
复制代码 代码如下:
 
$uptype = explode("|"

上一个：PHP 面向对象实现代码
下一个：超级简单的php+mysql留言本源码