网页游戏开发入门教程三(简单程序应用)
一、选择开发语言
后台：java php
前台：flex javascript ajax
数据库：mysql mssql
用哪种组合，真的不重要。重要的是时间和成本。复杂的地方在数据的交互和完善，而不在技术或效果的实现。往往遇到一些问题。比如地图如何编？人物移动如何实现？其实这些问题从技术上实现都比较容易。难在实现后，数据如何交互。没有解决数据交互的问题，实现这些技术点的意义不大。我用的是php+javascript+mysql。
原因：简单，上手快。可以比较快速的出产品。
二、程序简单应用。
1、模板
为了方便UI的修改。所以用模板。smart template还算方便。很简单。代码也可以嵌套在模板里。唯一的问题是如果美术不会程序，修改模板还得程序来。不科学啊。
smart template的教程网上有。只说一点。可以在模板（.html的文件）里用<?php ?>嵌套任何代码。获得传值。用$_obj[‘xxx’]或者用$_stack[0][‘’]可以和{xxx}写法的代码嵌套。跟.php的文件一样，没任何区别。

2、地图
因为游戏类型不是ogame模式的，所以地图并不是自动生成。而是全从数据库里调用。思路很简单。地图是一整张大图。切成多个小图块。数据库里记录下每个小图块对应大图的绝对坐标。显示的时候，调用相应坐标区域的小图块。
代码类似：
1$sql="select * from mapwhere mapxbetween $xxxand $xxxand mapybetween $ yyyand $yyy ";
意思就是从地图表里，获得横坐标xx到xx。纵坐标xx到xx的所有小图块。比如20个。假设我们写个函数showMap(x,y)，把获得的数据全显示出来。地图可以有很多层。
每个小图块都是一个div。具体的控制就用css就行了。小图块可以当作div的背景。也可以用
作div里的图片。控制好div的left和top就行了。（left和top就是小图块相对于大图块的绝对坐标）showMap(x,y)就放在下面两个层的里面。
一个层处理地图大小：
1<div style=\"position:relative;width:".$mapwidth."px;height:".$mapheight."px;overflow:hidden\" >
一个层处理拖动：
1<div style=\"position:absolute;z-index:10;left:2px;top:2px;width:".$mapwidth."px;height:".$mapheight."px;\" onmousedown=\"fDragging(this, event,false);\">
2
3//处理拖动的js代码。(网上抄的。。感谢这位大大。)
4<script>
5 function fDragging(obj, e, limit){
6 if(!e) e=window.event;
7 var x=parseInt(obj.style.left);
8 var y=parseInt(p);
9
10 var x_=e.clientX-x;
11 var y_=e.clientY-y;
12
13 if(document.addEventListener){
14 document.addEventListener('mousemove', inFmove,true);
15 document.addEventListener('mouseup', inFup,true);
16 document.body.style.cursor="move";
17 }else if(document.attachEvent){
18 document.attachEvent('onmousemove', inFmove);
19 document.attachEvent('onmouseup', inFup);
20 document.body.style.cursor="move";
21 }
22
23 inFstop(e);
24 inFabort(e)
25
26 function inFmove(e){
27
28 var evt;
29 if(!e)e=window.event;
30
31 if(limit){
32 var op=obj.parentNode;
33 var opX=parseInt(op.style.left);
34 var opY=parseInt(p);
35
36 if((e.clientX-x_)<0)return false;
37 else if((e.clientX-x_+obj.offsetWidth+opX)>(opX+op.offsetWidth))return false;
38 游戏xml文件修改
39 if(e.clientY-y_<0)return false;
40 else if((e.clientY-y_+obj.offsetHeight+opY)>(opY+op.offsetHeight))return false;
41 //status=e.clientY-y_;
42 }
43
44 obj.style.left=e.clientX-x_+'px';
45 p=e.clientY-y_+'px';
46
47 inFstop(e);
48 }// shawl.qiu script
49 function inFup(e){
50 var evt;
51 if(!e)e=window.event;
52
53 if(veEventListener){
54 veEventListener('mousemove', inFmove,true);
55 veEventListener('mouseup', inFup,true);
56 }else if(document.detachEvent){
57 document.detachEvent('onmousemove', inFmove);
58 document.detachEvent('onmouseup', inFup);
59 }
60
61 inFstop(e);
62
63 document.body.style.cursor="auto";
64
65 //实现类似google地图的拖动效果。
66 ajaxRead('map.php?mapx='+(e.clientX-x_)+'&mapy='+(e.clientY-y_)+'','2');
67
68 }// shawl.qiu script
69
70 function inFstop(e){
71 if(e.stopPropagation)return e.stopPropagation();
72 else return e.cancelBubble=true;
73 }// shawl.qiu script
74 function inFabort(e){
75 if(e.preventDefault)return e.preventDefault();
76 else return e.returnValue=false;
77 }// shawl.qiu script
78 }
79//]]>
80</script>
注意下面这段代码:
1ajaxRead('map.php?mapx='+(e.clientX-x_)+'&mapy='+(e.clientY-y_)+'','2');
这句代码的位置，是在拖动层后，释放鼠标的时候触发的。你可以用alert(“地图拖动到了这里”); 替换。测试下效果。这句代码的意思是，根据当前地图被拖动的坐标。调用一个ajax。也就是重新从数据库里获得地图信息。AjaxRead（）是一个ajax的调用函数。你可以全部自己写。也可以用如prototype.js之类的框架写。
1//处理ajax的代码。(还是网上抄的，有轻微的改动。。。唉，怎么老抄呢。。主要是为了节约开发时间。。还有一点就是我的JavaScript很垃圾的(*^__^*) 嘻嘻)
2function ajaxRead(file,action)
3{
4 var xmlObj= null;
5 if(window.XMLHttpRequest)
6 {
7 xmlObj= new XMLHttpRequest();
8 }
9 else if(window.ActiveXObject)
10 {
11 xmlObj= new ActiveXObject("Microsoft.XMLHTTP");
12 }
13 else
14 {
15 return;
16 }
17
18
19 function ajaxDo(action)
20 {
21 switch(action)
22 {
23
24 case "2":
25 ElementById('display').innerHTML= sponseText;//这里的display是你在页面上层的id。上面的地图代码都需要放到这个层里。如<div id=display name=display></div>写id和name，是为了方便firefox和ie的兼容。
26
27 break;
28 }
29
30 }
31
32 adystatechange= function()
33 {
34 /*
35 adyState == 1 )//loading状态。
36 {
37 ElementById('xianshi2').innerHTML = "正在载入";
38 }
39 */
40 if(adyState== 4)//完成状态时。
41 {
42 ajaxDo(action);
43 }
44 }
45
46 xmlObj.open ('GET', file,true);
47 //load('GET', file, true);
48 xmlObj.send (null);
49 //xmlObj.abort ('');
50}
整个代码的意思就是：
当拖动地图释放鼠标后，显示层重新获得数据。并无刷新的显示出来。地图里的图片都用的png32的透明图。Ie7和ff3都没问题。遇到ie6的话。。用gif的替代吧。map.php的功能。根据获得的x,y显示相应的一谢谢小图块。这个功能其实就是上面说的showMap(x,y)，这个很像google地图的拖动。不过简单了很多。简单，效果还不错。2、角2、角属性
因为设定的要求。角需要有装备加成，有状态加成（buff,debuff）。这时候，把所有需要的加成，都放到角类里。是一个很好的方法。
大概像这样：
1class role
2{
3//获得角数据。
4getRloe()
5{
6 从数据库里获得角信息。
7}
8//获得装备加成。
9 getEquip()
10{
11 获得装备加成信息。
12}
13
14//获得状态加成
15getState()
16{
17 获得状态加成信息。
18}
19
20 //把上面获得的信息相加或者相减，或者调整。
21
22//返回角数据。
23 Return xxx
24}
专门把这条提出来说。是因为没把加成放到角对象里时。每次要战斗或者要干点什么的时候。获得角数据后，还要加一大堆代码处理加成。重复太多。一让代码前置，世界就清静了。。。
3、道具
道具比较特殊。因为种类繁多，使用方式多，可能有多个存放地点，可能有唯一道具。有天看了web魔兽的代码。发现他的道具只有一个表。有一个字段，来处理道具位置，如（1，拍卖行，2，背包，3，仓库，4，商店）这个办法挺好的。不过，如果道具的复杂度上去了。比如不同的仓库，不同的拍卖行，需要合成等等。还是只有分表。

基础道具表：
id
itemname名称
itemprice价格
itemimage图片
itemtype类型
uptype增加类型
uppoint增加点数
addtype增加类型(永久)
addpoint增加点数（永久）