惯例,先上下效果图片:
在上一篇玩玩webgame开发(1)大概给出了jquery方式的地图实现,最近又做了一些改进,加进了更多元素。代码全部改成jquery插件的方式。有机会做专门的介绍。
这次的主题主要是地图上面人物的移动以及战争迷雾的实现。
人物的移动其实比较简单,就是监听键盘上下左右按键事件。
$(document).keydown(function(event){
$.boboMove(event);
});
后台boboMove函数的写法:
switch(event.keyCode){
case 37:
if(bobo.pos.X > minX){ //判断地图边缘
bobo.pos.X -= 1; //坐标变化
$("#"+"X"+bobo.pos.X+"Y"+bobo.pos.Y).append(boboFace);//将人物移动到这个位置上,实际做法就是将人物的图片放在这个div上面
}
break;
case 38:
if(bobo.pos.Y < maxY){
bobo.pos.Y += 1;
$("#"+"X"+bobo.pos.X+"Y"+bobo.pos.Y).append(boboFace);
}
break;
case 39:
if(bobo.pos.X < maxX){
bobo.pos.X += 1;
$("#"+"X"+bobo.pos.X+"Y"+bobo.pos.Y).append(boboFace);
}
break;
case 40:
if(bobo.pos.Y > minY){
bobo.pos.Y -= 1;
$("#"+"X"+bobo.pos.X+"Y"+bobo.pos.Y).append(boboFace);
}
break;
}
cleanBattleFog(); //清除战争迷雾
我写的这个webgame打算做个战争迷雾的效果,玩过魔兽争霸或者英雄无敌的人应该对这个概念很清楚,就是在没有探索之前,地图上面的区域都是迷雾覆盖无法看到的。
迷雾覆盖效果实现其实很简单,对于我所做的系统来说,迷雾就是所有的区域div都加上一个battleFog的css。
移除战争迷雾的算法是这样的:在人物的视野内的格子div移除battleFog这个css类。例如人物视野为1,人物坐标3,3。那么视野内的(2,3),(3,3),(3,4),(4,3),(3,2)。显示出来就是一个十字形,如果视野是2,那么显示出来就类似一个星形。
在正式给出代码之前,各位看客可以自己考虑一下这个算法的实现。可能大家都觉得这个很简单。。但是今天在写这个的时候才发觉这个看似简单的问题要写好不那么好想,
可能很久没动脑筋了吧,这里卖个小关子,大家动动脑筋想想,给出人物当前的坐标,以及人物的视野,得出当前人物所有可以看到的坐标。
=================思考十分钟分割线=================
:D
:D
:D
:D
呵呵,最后给出我的战争迷雾移除算法:
function cleanBattleFog(){
var fogToBeClean = []; //将被移除迷雾的区域数组,保存所有将被移除迷雾的div的id
//bobo.pos.X 人物X坐标,
//bobo.pos.Y 人物Y坐标
//bobo.eyeshot 人物视野
for(var m =bobo.pos.X-bobo.eyeshot;m<=bobo.pos.X+bobo.eyeshot; m++ ){
for(var n=bobo.pos.Y-bobo.eyeshot;n<=bobo.pos.Y+bobo.eyeshot;n++){
var xdiff = m - bobo.pos.X;
var ydiff = n - bobo.pos.Y;
if(xdiff*xdiff + ydiff*ydiff <= bobo.eyeshot*bobo.eyeshot
&& m>=1 && n>=1 && m <= map.maxY && n <= map.maxX
){
fogToBeClean.push('#X'+m+'Y'+n);
}
}
}
$(fogToBeClean.join(',')).removeClass('battleFog');
}
其实算法不难,就是2点间坐标距离要小于视野。并且要注意考虑地图的边界,不然可能得到不在地图内的坐标。
每得到一个坐标,用数组的push方法保存到数组中。jquery支持用逗号分割的表达式获得多个对象,所以最后直接一个join搞定。
- 大小: 115.1 KB
分享到:
相关推荐
GappleRPG.rar,flexRPG游戏初步,WebGame游戏里的人物移动AS源代码+注释
webgame开发简明教程 这篇是挺实用的教程, 不过有些观点还是值得商榷 我觉得服务器定时器用计划任务调用脚本就可以实现,比如linux下用crontab定时执行某个php脚本,更新数据就可以。 研究所有点缺乏资料啊。讨论...
注释很详细,但由于文字功底不好,可能有些注释描述有些问题,还请谅解。如有疑问可加QQ290717270,一起讨论。
最简单的WebGame开发入门 示例是个人所写 实现一张png图片 进行人物的移动 可以上下左右移动人物 实现方法是通过BitMapData 和bitMap操作位图移动帧
webgame人物行走实例,用javascript写成 转载别人的
资源名称:webgame网页游戏开发设计简明教程 中文WORD版本文档是webgame网页游戏开发设计简明教程;webgame程序构成:三大部分。第一是数据流程。第二是程序。第三是美术。其中,数据流程包括了功能。也只有在功能中...
适合初学者! 本文来自CSDN博客,转载请标明出处:http://blog.csdn.net/gogo313/archive/2009/02/24/3933603.aspx
于2007夏天完成的一个不完整的webgame引擎 还没有完成AI部分
给大家贡献一遍比较好的webgame引擎开发学习的资料,希望对webgame开发的人有帮助。
WebGame的AS端开发心得 理解AS项目全局结构 打造相对通用的游戏代码库和开发流程
webgame源码 其中包括人物行走 地图动态加载等重要模块 非常适合FLEX WEBGAME 开发人员 提高技术 提高开发技巧 webgame的大概框架分层,是学习网页游戏开发非常好的资源!
webgame程序构成: 三大部分。 第一是数据流程。第二是程序。第三是美术。 其中,数据流程包括了功能。也只有在功能中才能体现数据流程。 数据流程相当的麻烦,后面再讨论。 比如最简单的卖买产品。 要实现这...
flex webgame源码 其中包括人物行走 地图动态加载等重要模块 非常适合FLEX WEBGAME 开发人员 提高技术 提高开发技巧 webgame的大概框架分层
最终幻想网页游戏,主要是用php开发,有兴趣的看一下
webgame asp javascript在线游戏 源代码
这是一套完整的以php语言开发的webgame源码,是对一个webgame入门新手很好的练习机会。
网页抓取 导入到 csv 表 在 js 中运行 python 删除千位分隔符逗号 require 未定义解决方法(不明白..)
webgame_server 这是我的网页游戏服务器。 文件夹:chat_email 检查common common_server 示例归档game_log gate gm map php_config switch test tool world
好玩的连连看webgame 注:网站必须支持JS
网页游戏开发设计简明教程 webgame程序构成: 第一是数据流程。第二是程序。第三是美术。