更完美的是，cakephp提供了open flash chart的helper，自己只要调用就行了~~~http://bakery.cakephp.org/articles/view/flashcharthelper-version-3 不过事情总是没有想象的那么顺利，官方整合的这个open flash chart在使用过程中还是发现了一些问题。这里记录一下分享。

先上几张无码高清图：

具体如何整合open flash chart我就不多废话了，请直接参考官方的文档，很详细。我在使用过程中碰到的几个问题以及解决方法记录在这里。如果你也在使用过程中碰到一下的问题，你可以打开你的cakephp工程下面app/views/helpers/flash_char.php这个helper的源代码，参照我下面做的修改。

1.IE6经典的缓存问题

算是被这个bug吓出一身冷汗，还以为open flash chart在IE下不能用了。状况是：图表在首次打开IE6进去后可以正常看到，但是这个时候再点击其他的图表，就出错了，IE8，firefox等浏览器不会有此问题，想来想去不清楚问题所在。后来用httpwatch抓包分析了下，发现IE6第二次不会重新加载图表。shit，又是IE6缓存问题造成的。要解决IE6的缓存问题，当然就是每次请求的时候请求地址后面附带一个随机数。这里我们就要对flash的加载地址后面附带随机数了。

public function render($width = null, $height = null, $chartId = 'default', $domId = false) {
 if (! is_null ( $width )) {
 $this->settings ['width'] = $width;
 }
 if (! is_null ( $height )) {
 $this->settings ['height'] = $height;
 }
 $this->Chart = new open_flash_chart ( );
 //hack for IE cache bug! 给请求地址后面加上一个时间戳
 $this->swf .= '?t=' . mktime ();
 return $this->Flash->renderSwf ( $this->swf, $this->settings ['width'], $this->settings ['height'], $domId, array ('flashvars' => array ('get-data' => 'get_data_' . $chartId ) ) );
 }

2.无法设置默认点样式

这些bug其实不能都怪提供这个helper的作者不小心，因为我觉得open flash chart本身提供的api确实太混乱了，命名又不是非常有规则，导致这边会遗漏掉一些属性设置项。

这个bug的状况是：官方的open flash chart可以设置图表上面点的样式，但是helper上面设置了却无效。查看源代码发现设置点样式的set_default_dot_style方法被遗漏了。。需要自己给它补上：

foreach ( $options as $key => $setting ) {
 switch ($key) {
 case 'line_style' :
 $line_style = new line_style ( $setting [0], $setting [1] );
 $element->line_style ( $line_style );
 break;
 //line的默认点样式无法设置!，方法遗漏，补上。
 case 'default_dot_style' :
 $default_dot = new dot ( );
 foreach ( $setting as $k => $v ) {
 $default_dot->$k ( $v );
 }
 $element->set_default_dot_style ( $default_dot );
 break;
 default :
 $set_method = 'set_' . $key;
 if (is_array ( $setting )) {
 $element->$set_method ( $setting [0], $setting [1] );
 } else {
 $element->$set_method ( $setting );
 }
 break;
 }
 }

补充一点：这个bug只有线状图才会这样，因为其他图的设置点样式的方法是通用的，但是设置线状图的方法是独特的。

3.visible_steps跟rotate属性无法生效

visible_steps属性设置的是横坐标上面间隔多少个坐标是可视的，当横坐标上面的点非常非常密集的时候，就需要间隔显示了，比如1-100，就不显示100个数字了，而是每10个显示一个。rotate属性设置是倾斜度，有些坐标文字比较长，比如说日期，2009年10月20日，这样一个横坐标长度好多个字，这个时候可以通过rotete属性来设置倾斜显示的角度。但是，这个属性也不能生效。

看了下源代码，原因在于：大部分的属性设置，open flash chart都提供了很规范的set方法来实现，但是偏偏这2个属性却是直接调用的，那cakephp这个help都是按照set模式来实现的，所以这2个属性就被忽略了。而且还会报错，因为方法不存在。这个hack也是比较生硬的，只能硬编码：

foreach ( $labelsOptions as $key => $setting ) {
 $set_method = 'set_' . $key;
 //BUG! without this，will skip the visible_steps config。默认都是set方法，但是这2个方法特殊，是直接调用。
 if (in_array ( $key, array ('visible_steps', 'rotate' ) )) {
 $set_method = $key;
 }
 $x_axis_label->$set_method ( $setting );
 }

总结下：整体上，这些bug的来源主要还是因为open flash chart官方的实现比较凌乱的关系，写这个cakephp open flash chart helper的人，还是挺强大的，整理了这么好的东西出来。确实不容易。

自动生成工具相信很多人都有所了解，很早之前出现的phpmaker之类的工具，就能做到这点，而cakephp自带的代码自动生成工具，结合框架，可以带来很多的优点，最大的优点，当然就是快速开发，你只要建立好数据库，通过自动工具就能迅速生成一个基本的骨架，其实在生成这个骨架之前，你就可以利用cakephp的脚手架功能看到实现的样子。

通过使用 Bake（CakePHP 代码生成器），可以生成一个包含 Scaffolding 功能和相关视图的控制器。

将路径 /webroot/cake/console 添加到环境的 PATH 变量中，可以简化操作。设置这个变量之后，就可以直接调用 Cake Console 而不需要指定路径信息。这种做法并不是必需的，假设我们不这样做。另外，应该从应用程序的 app 目录（在本示例中是 /project/app）运行 Cake Console，否则 Cake Console 会认为您打算对新的应用程序执行操作。

在继续执行操作之前，请制作现有 app 目录的拷贝。Bake 将覆盖 products 控制器，而且当操作包括关键字 “overwrite”（或者 “copy”、“delete”、“format” 或 “voodoo”）时，应当经常备份文件。如果遇到问题，请确保 php 位于环境的 PATH 变量中。

对 products 控制器使用 Bake：

windows下使用 Bake，很重要的一点，应该先使用 cd 命令切换到 /webroot/app 目录并启动 Cake Console：

然后在控制台输入： php ../cake/console/cake.php bake

这样就会出现正常的命令窗口了，然后即可以通过窗口的提示一步步往下走了。

修改bake工具生成的默认视图

bake工具生成的界面有时候是你不希望的，可能希望生成自己定义的格式，其实这个很简单，cakephp提供了很简单的方式来修改生成的视图，这个在官方网站上面有介绍，这里只是简单的翻译一下官方网站的文档。

1. 进入目录: cake/console/libs/templates/views
2. 目录下有4个文件，是视图的模板
3. 复制到自己的app下面: app/vendors/shells/templates/views
4. 修改这些视图，那么再次使用bake工具生成的时候就会调用这些视图

jquery生成webgame的地图

选型：jquery,php,mysql。我喜欢jquery，灵活，强大的选择器，还算够用的ajax功能，还有丰富的plugin，以及effects，这些对于做webgame都是很有用的。php打算用框架来做，不过我php也是半吊子，现在在cakephp跟国产的fleaphp中犹豫不决。mysql，无条件选用

=正文=

由于我很想做一个战斗系统来玩，类似war3里面迷雾探索的，所以不管3721，js直接从战斗系统开始写。晚上写了一会，大概整出这样的代码。

var battle = {
 //can accect a random map
 createMap:function(map){
 var defaultMap = [       //定义默认地图，字母分别对应css的类名
 ['g','r','f','f','f','r','f','w'],
 ['w','g','f','f','f','r','g','f'],
 ['w','r','g','f','f','g','f','r'],
 ['f','r','f','f','f','r','f','f'],
 ];
//函数传递进来的参数判断
 if(boboUtil.isUndefined(map) || map.length == 0){
 map = defaultMap;
 }
//将2维数组转化为1维数组
 var mapSequence =  new Array();
 for(var i=0;i<map.length;i++){
 mapSequence = mapSequence.concat(map[i]);
 }
//计算地图的宽，即横向总共几个格子
 var fieldWidth = map[0].length;
//设置地图的总宽度
 $("#battleField").width(fieldWidth*50);
//为每个格子设置对应的css类，即渲染地图
 $("#battleField div").each(function(i){
 //create map
 if(i > mapSequence.length )
 return false;
 $(this).addClass(mapSequence[i]);
//设置格子的坐标
 //set x,y index
 var x = i % fieldWidth +1;
 var y = Math.floor(i / fieldWidth +1);
 $(this).attr("id",""+x+y);
 });
 }
};

实现原理：

• 页面上先添加适当数目的空div，我觉得用js添加div可能存在性能问题，所以直接html里面放置一些空的div，作为地图元素。
• 定义一系列的css，为不同格子地图设置好宽高与背景色，实际运用时候这些背景可以换成图片什么的。
• 定义一个map的数组，这个数组保存地图的信息，即地图每个格子的css类名，通过js，将这些css类名添加到每个div中

最近业余时间想找点事情做，看我家MM似乎回家都比较无聊，就一个劲看片，就想给她写个webgame玩吧，至于为什么不做其他的游戏啥的，好吧，我承认我只会web。也想练练自己的JavaScript，提高下js水平，虽然对js很有兴致，但是工作方面都是做java，再下去就荒废了。

最后顺便附上一个简单的时间测试代码，使用console.log，请在firefox用firebug查看，当然，如果是IE，可以把这句换成alert。用法简单，在页面上写：

var executeTimeTest=function(func){
	var start = 0;
	var end = 0;
	start = new Date().getTime()
	for(i = 0; i < 10000000; i++) {
		func;
	}
	end = new Date().getTime();
	console.log((end - start) / 1000+'s');

};