|
pc2g,电脑好游戏
以下文字转载自https://www.cnblogs.com/beyondnet/archive/2009/11/02/1594410.html
一、选择开发语言
后台:java .net 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 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)就放在下面两个层的里面。
一个层处理地图大小:
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(obj.style.top);
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(op.style.top);
35
36 if((e.clientX-x_)<0) return false;
37 else if((e.clientX-x_+obj.offsetWidth+opX)>(opX+op.offsetWidth)) return false;
38
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 obj.style.top=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(document.removeEventListener){
54 document.removeEventListener('mousemove', inFmove, true);
55 document.removeEventListener('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>
复制代码 |
|