关于作者

想做个web游戏刚做了人物移动希望大家帮助实现躲障寻路

上一篇 / 下一篇 2007-06-23 16:25:54

查看( 1651 ) / 评论( 27 )

CODE:

<style>
.abs{ position: absolute;}
.0{ width:30px; height:30px; float:left; border:1px solid gray;}
.1{ width:30px; height:30px; float:left; border:1px solid gray;background:gray}
</style>
<body bgcolor="#eeeeee" background="http://www.cpp114.com/cppjob/map.png" style="margin:0px">
<scrīpt>
var mainImg = new Image();
mainImg.src = "http://www.cpp114.com/cppjob/boy.gif";

//document.css = document.createStyleSheet("css");
//document.css.addRule(".1", "color:red")
var map = [[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],
                   [1,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,1],
                   [1,0,0,0,0,0,1,0,0,0,1,0,0,0,0,0,0,0,0,1],
                   [1,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,1],
                   [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],
                   [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],
                   [1,0,0,0,0,0,1,0,1,0,0,0,0,1,0,0,0,0,0,1],
                   [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],
                   [1,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,1],
                   [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],
                   [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],
                   [1,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,1],
                   [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],
                   [1,0,0,0,0,0,0,0,0,1,0,0,0,0,0,1,0,0,0,1],
                   [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],
                   [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],
                   [1,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,1],
                   [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],
                   [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],
                   [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]];

document.write("<div style='width:600px;height:600px;'>")
for(var i=0;i<map.length;i++){
        for(var j=0;j<map[0].length;j++){
                document.write("<div class='" + map[i][j] + "'></div>");
        }
}
document.write("</div>")

function movingMan(p){
        this.oldPoint = p;
        this.nowPoint = p;
        this.container = $("container");
        this.direction = 0;  // 0--下; 1--左; 2--右; 3--上; 4--左下; 5--右下; 6--左上; 7--右上
        this.order = 0;      //行走顺序
        this.count = 0;      //行走延时切换图片
        this.endPoint;
        this.timer;
        srcObj = this;

        this.shiftImage = function(){
                if(arguments[0] == true) this.order = 0;

                this.container.scrollTop = 125 * this.direction + (125-75);
                this.container.scrollLeft = 125 * this.order + (124-40)/2;
                this.order++;
                if(this.order == 8) this.order = 0;
        }
        
        this.move = function(){
                 if(Math.abs(srcObj.nowPoint.x - srcObj.endPoint.x) <=1 && Math.abs(srcObj.nowPoint.y-srcObj.endPoint.y)<=1){
                        window.clearInterval(srcObj.timer);
                        srcObj.shiftImage(true);
                 }else if(Math.abs(srcObj.nowPoint.x-srcObj.endPoint.x)<=1){
                        if(srcObj.nowPoint.y < srcObj.endPoint.y) srcObj.direction = 0;
                        else srcObj.direction = 3;
                 }else if(Math.abs(srcObj.nowPoint.y-srcObj.endPoint.y)<=1){
                        if(srcObj.nowPoint.x < srcObj.endPoint.x) srcObj.direction = 2;
                        else srcObj.direction = 1;
                 }else{
                         if(srcObj.nowPoint.x > srcObj.endPoint.x){
                                if(srcObj.nowPoint.y < srcObj.endPoint.y) srcObj.direction = 4;
                                else srcObj.direction = 6;
                         }else{
                                if(srcObj.nowPoint.y < srcObj.endPoint.y) srcObj.direction = 5;
                                else srcObj.direction = 7;
                         }
                 }
                
                 switch (srcObj.direction){
                        case 0:{
                                srcObj.nowPoint.y ++; break;
                                }
                        case 1:{
                                srcObj.nowPoint.x --; break;
                                }
                        case 2:{
                                srcObj.nowPoint.x ++; break;
                                }
                        case 3:{
                                srcObj.nowPoint.y --; break;
                                }
                        case 4:{
                                srcObj.nowPoint.x --; srcObj.nowPoint.y ++; break;
                                }
                        case 5:{
                                srcObj.nowPoint.x ++; srcObj.nowPoint.y ++; break;
                                }
                        case 6:{
                                srcObj.nowPoint.x --; srcObj.nowPoint.y --; break;
                                }
                        case 7:{
                                srcObj.nowPoint.x ++; srcObj.nowPoint.y --; break;
                                }
                 }

                 srcObj.container.style.left = srcObj.nowPoint.x - 20 + "px";
                 srcObj.container.style.top = srcObj.nowPoint.y - 70 + "px";
                 
                 srcObj.count++;
                 if(srcObj.count % 10 == 0){
                        srcObj.shiftImage();
                        srcObj.count = 0;
                 }
        }

        this.Go = function(p){
                this.endPoint = p;

                window.clearInterval(this.timer);
                
                this.timer = window.setInterval(srcObj.move, 10);
        }

        this.shiftImage(true);
}

function Point(){
        this.x = arguments[0]?arguments[0]:0;
        this.y = arguments[1]?arguments[1]:0;
}

function doMove(e){
        //if(event.srcElement.id == "container" || event.srcElement.tagName == "IMG") return;
        if(event.srcElement.className != "0") return;

        actor.Go(new Point(event.x, event.y));
}

function $(){
        return document.getElementById?document.getElementById(arguments[0]):eval(arguments[0]);
}

document.onclick = doMove;
document.onkeydown = function(){
        alert(actor.direction + " " + actor.order)
}

var _left = (document.body.clientWidth - 40) / 2;
var _top = document.body.clientHeight / 2 - 70;
document.write("<div id='container' class='abs' style='overflow:hidden;width:40px;height:72px;top:" + _top + "px;left:" + _left + "px;background:transparent'><img src='" + mainImg.src +"'></div>");

var actor = new movingMan(new Point(_left+20, _top+70));

</scrīpt>

</body>

看样子地图得用拼的这样不行

[ 本帖最后由秦皇也爱JS 于 2007-6-16 16:33 编辑 ]

全部脚印 不留脚印留下脚印:

67386
89498

论坛模式推荐收藏分享给好友推荐到圈子管理

TAG:

编程浪子发布于2007-06-16 14:22:20: 不错啊，这种游戏有意思，楼主继续努力！

秦皇也爱JS 发布于2007-06-16 14:25:02: 谢谢老大!

子林发布于2007-06-16 14:38:46: 恩，支持你，
在这里最希望看到这种东西．．．

子林发布于2007-06-16 14:42:37: 走路的方向似乎不对，
．．．　其实角色在移动的时候如果是平地，可以直接走直线，角色的人物图象和最靠近那八个方向中的一个就可以了，
不用走４５度角再走直线的．幻宇的４５度角思路并不正确

秦皇也爱JS 发布于2007-06-16 14:46:05: 我也想过但是觉得人物图片看起来不协调

Mapleleaf123发布于2007-06-16 14:55:15: 强淫

效果发布于2007-06-16 15:16:10: 呵呵,不错...

JXQ 发布于2007-06-16 15:27:11: 斜走的时候，感觉象是簸脚的。

秦皇也爱JS 发布于2007-06-16 15:35:57: 估计是图片没切好啊

秦皇也爱JS 发布于2007-06-16 16:43:42: 看了各种的寻路版本欲哭无泪不懂!
我这里还要坐标转换麻烦啊

效果发布于2007-06-16 16:47:37: QUOTE:
原帖由 秦皇也爱JS 于 2007-6-16 16:43 发表
看了各种的寻路版本欲哭无泪不懂!
我这里还要坐标转换麻烦啊
多看看代码就懂了...

秦皇也爱JS 发布于2007-06-16 16:52:10: 搜索找到终点不难但我不明白最近路线是怎么得来的?

效果发布于2007-06-16 17:03:38: 我是理解是:向四(八)个方向搜索,看哪一个东东最快到达终点,然后沿着这个东东,一直往回走,一直走到起点,这个东东走过的路线就是最近的...

aasvvv发布于2007-06-16 22:49:30: 大的游戏地图，用一般的寻路程序就可以，大的会有路径这种东西，即制作地图的时候，分成一块块的，然后每一块中间有线连着，这些线代表着可以走的路，人物走的时候，直接找最近的这些路线，然后再通过路线去向走。

另外我红警游戏发现它只是向着目标走，如果前面两边走都是离目标远了，即被档住了，才执行寻路程序。

winter 发布于2007-06-16 23:41:45: 先确定你的地图规模
如果地图规模较小在100*100或以下的话广度优先是最好的选择
如果地图规模大一点达到1000*1000的话用A*比较好但是注意先用一次广度优先去掉不可到达的"死区"
如果地图极大就不能用精确搜索了只能根据方向估计行进方向也可以作有限范围的广度优先或者A*

winter 发布于2007-06-17 00:01:48: 另外先做好一些准备工作
应该先约定好路径的数据格式（比如说数组）
写好一个函数 function goAlong(path,map){/*...*/}

然后选好一种寻路算法
看清楚它的地图数据格式和路径的数据格式（可能是一维数组或者二维数组字符串之类的）
写好它的格式和你的格式的转换函数
然后就可以用了：P

winter 发布于2007-06-17 00:05:02: QUOTE:
原帖由子林于 2007-6-16 14:42 发表
走路的方向似乎不对，
．．．　其实角色在移动的时候如果是平地，可以直接走直线，角色的人物图象和最靠近那八个方向中的一个就可以了，
不用走４５度角再走直线的．幻宇的４５度角思路并不正确
用A*似乎能找到这样的路线不过印象中早期的RPG都是先走45度再走直线

秦皇也爱JS 发布于2007-06-23 14:09:01: 咋没人帮下我呢
要不我就先不管寻径了?

Starling发布于2007-06-25 09:57:10: LZ这个做RPG可能麻烦了点，但要做个WEB版的英雄无敌倒是没什么大问题了，HOHO。
顺便拜一下秦皇大牛～～以及各位大大牛～～～

秦皇也爱JS 发布于2007-06-27 09:11:30: winter帮忙把广搜的算法写个例子啊

进入论坛，查看全部评论

关于作者

想做个web游戏 刚做了人物移动 希望大家帮助实现躲障寻路

全部脚印 不留脚印 留下脚印:

想做个web游戏刚做了人物移动希望大家帮助实现躲障寻路

全部脚印不留脚印留下脚印: