详细内容

角色扮演类游戏的人物控制
兼容性：更新时间：2008-10-8
简介：可以使用键盘和鼠标控制页面上的小女孩在屏幕上走动，而且各个方向的动作都有
使用键盘或者鼠标控制小女孩走动

查看全部代码：查看
代码使用方法：

第一步：
在<head>区添加以下代码
<STYLE>
v\:* { Behavior: url(#default#VML) }
</STYLE>
<SCRIPT LANGUAGE="JavaScript">
/******************************************************
* 角色扮演控制 Share JavaScript (http://www.ShareJS.com)
* 使用此脚本程序，请保留此声明
* 获取此脚本以及更多的JavaScript程序，请访问 http://www.ShareJS.com
******************************************************/

<!--
//64*64
//0西南1东北2西北3东南4西5东6北7南


//+----------------------------------------------------------------------------
//  Function:                        Person
//  Description:                Person对象
//  Parameters:        src  大图路径
//                                                        height 每个小图高度
//                                                        width 每个小图宽度
//                                                        cols 每个方向有几个动作
//  Returns:                        
//-----------------------------------------------------------------------------
function Person(_src,_width,_height,_cols)
{
        this.timeout = 300; //默认动画延时
        this.speed = 5; //默认移动速度

        this.currentDirection = 7;        //当前方向

        this.width = _width;         //每个小图的宽度
        this.height = _height;        //每个小图的高度
        this.cols = _cols;        //每个方向有几个动作
        this.obj;        //记录当前对象
        eval(this.obj + "=this");

        this.iActTimeoutID = null;        
        this.iMoveTimeoutID = null;

        this.person = window.document.createElement("span");
        this.person.style.clip="rect(0 "+this.width+" "+this.height+" 0)";
        this.person.style.position = "absolute";
        this.person.style.width = this.width;
        this.person.style.height = this.height;

        //+----------------------------------------------------------------------------
        //  Function:                        getX
        //  Description:                获取当前x坐标
        //-----------------------------------------------------------------------------
        this.getX = function()
        {
                return this.person.style.pixelLeft;
        }
        //+----------------------------------------------------------------------------
        //  Function:                        getY
        //  Description:                获取当前Y坐标
        //-----------------------------------------------------------------------------
        this.getY = function()
        {
                return this.person.style.pixelTop;
        }
        //+----------------------------------------------------------------------------
        //  Function:                        setX
        //  Description:                获取当前Y坐标
        //-----------------------------------------------------------------------------
        this.setX = function(x)
        {
                this.person.style.pixelLeft = x;
        }
        //+----------------------------------------------------------------------------
        //  Function:                        setY
        //  Description:                获取当前Y坐标
        //-----------------------------------------------------------------------------
        this.setY = function(y)
        {
                this.person.style.pixelTop = y;
        }

        this.Img = window.document.createElement("img");
        this.Img.src = _src;
        this.Img.style.position = "absolute";
        this.Img.style.pixelLeft = 0;
        this.Img.style.pixelTop = 0;

        this.person.appendChild(this.Img);

        //+----------------------------------------------------------------------------
        //  Function:                        GetImg
        //  Description:                获取某行某列的小图
        //  Parameters:        row  行
        //                                                        col 列
        //-----------------------------------------------------------------------------
        this.GetImg = function(row,col)
        {
                this.Img.style.pixelTop = -row * this.height;
                this.Img.style.pixelLeft = -col * this.width;
        }

        this.switchImg = f_switchImg;         //通过轮换图片来达到动画效果

        //+----------------------------------------------------------------------------
        //  Function:                        Act
        //  Description:                连续播放小图，产生动画效果
        //  Parameters:        direction 动作方向（0西南1东北2西北3东南4西5东6北7南）
        //-----------------------------------------------------------------------------
        this.Act = function(direction)
        {
                this.switchImg(direction,0);
        }
        this.ActStop = function()
        {
                window.clearTimeout(this.iActTimeoutID);
                                this.GetImg(this.currentDirection,0);
                this.iActTimeoutID = null;
        }
        this.MoveStop = function()
        {
                window.clearTimeout(this.iMoveTimeoutID);
                this.iMoveTimeoutID = null;
        }
        //+----------------------------------------------------------------------------
        //  Function:                        MoveTo
        //  Description:                移动到指定位置
        //  Parameters:        x 要移动到的x坐标
        //                                                        y 要移动到的y坐标
        //-----------------------------------------------------------------------------
        this.MoveTo = function(x1,y1)
        {
                var x0 = this.getX();
                var y0 = this.getY();

                //0西南1东北2西北3东南4西5东6北7南
                var direction = f_Direction(x0,y0,x1,y1);
                if(this.iActTimeoutID==null)        //方向未改变则动画继续
                {
                        this.Act(direction);
                }
                else if(this.currentDirection!=direction)
                {
                        this.ActStop();
                        this.Act(direction);
                }
                this.currentDirection = direction;
                this.MoveStop();
                this.moveTo(x0,y0,x1,y1);
        }

        //+----------------------------------------------------------------------------
        //  Function:                        moveTo
        //  Description:                移动到指定位置
        //  Parameters:        x0 起点x坐标
        //                                                        y0 起点y坐标
        //                                                        x1 终点y坐标
        //                                                        y1 终点y坐标
        //-----------------------------------------------------------------------------
        this.moveTo = function(x0,y0,x1,y1)
        {        
                var x = Math.abs(x0-x1);
                var y = Math.abs(y0-y1);
                var sx = this.speed * (x/Math.sqrt(x*x+y*y));
                var sy = this.speed * (y/Math.sqrt(x*x+y*y));
                x0<x1 ? x0 += sx : x0 -= sx;
                y0<y1 ? y0 += sy : y0 -= sy;

                if(x<sx)
                        x0 = x1;
                if(y<sy)
                        y0 = y1;

                this.setX(x0);
                this.setY(y0);
                
                if(x0==x1 && y0 ==y1)
                {
                        this.ActStop();
                        this.MoveStop();
                        return;
                }
                else
                        this.iMoveTimeoutID = window.setTimeout(this.obj+".moveTo("+x0+","+y0+","+x1+","+y1+")",100);
        }

}

//+----------------------------------------------------------------------------
//  Function:                        f_switchImg
//  Description:                连续播放小图，产生动画效果
//  Parameters:        direction 动作方向（0西南1东北2西北3东南4西5东6北7南）
//-----------------------------------------------------------------------------
function f_switchImg(direction,index)
{
        if(index>=this.cols)
                index = 0;
        this.GetImg(direction,index);
        index ++;
        this.iActTimeoutID = window.setTimeout(this.obj+".switchImg("+direction+","+ index +")",this.timeout);
}
//+----------------------------------------------------------------------------
//  Function:                        f_Direction
//  Description:                根据两点坐标判断移动方向
//  Parameters:        x0         起点x坐标
//                                                        y0         起点y坐标
//                                                        x1         终点x坐标
//                                                        y1         终点y坐标
//  Returns:                        返回代表方向的数字（0西南1东北2西北3东南4西5东6北7南）
//-----------------------------------------------------------------------------
function f_Direction(x0,y0,x1,y1)
{
        var x = x1 - x0;
        var y = y1 - y0;

        //根据tan值看动画方向
        var tan = y/x;

        if(x==0 && y<0)                                                //正北
                return (6);
        else if(x==0 && y >0)                                                //正南
                return (7);
        else if(tan>=-2 && tan<=-0.5 && x<0 && y>0)        //西南
                return (0);
        else if(tan>=-2 && tan<=-0.5 && x>0 && y<0)        //东北
                return (1);
        else if(tan>=0.5 && tan<=2 && x<0 && y<0)        //西北
                return (2);
        else if(tan>=0.5 && tan<=2 && x>0 && y>0)        //东南
                return (3);
        else if(tan>-0.5 && tan<0.5 && x<=0)        //西
                return (4);
        else if(tan>-0.5 && tan<0.5 && x>=0)        //东
                return (5);
        else if((tan>2 || tan<-2) && y<0)                //北
                return (6);
        else if((tan>2 || tan<-2) && y>0)                //南
                return (7);
        return 7;
}

//-->
</SCRIPT>
</HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!--
var girl = new Person("BX7B_girl.gif",64,64,4);
var currentKeyCode;
//+----------------------------------------------------------------------------
//  Function:                        Init
//  Description:                初始化
//-----------------------------------------------------------------------------
function Init()
{
        girl.GetImg(7,0);
        girl.setX(200);
        girl.setY(200);
        window.document.body.appendChild(girl.person);
}
//+----------------------------------------------------------------------------
//  Function:                        f_MoveTo
//  Description:                点击鼠标移动小女孩
//-----------------------------------------------------------------------------
function f_MoveTo()
{
        girl.MoveTo(event.x-girl.width/2,event.y-girl.height/2);
}
function f_dblClick()
{
}
function f_Keydown()
{
        var keycode = event.keyCode;
        if(keycode =="40")
        {
                f_Move(7,girl);
        }
        if(keycode =="37")
        {
                f_Move(4,girl);
        }
        if(keycode =="38")
        {
                f_Move(6,girl);
        }
        if(keycode =="39")
        {
                f_Move(5,girl);
        }
        currentKeyCode = keycode;
}
function f_Move(direction,Obj)
{
        if(Obj.iMoveTimeoutID != null)
                Obj.MoveStop();
        if(Obj.iActTimeoutID == null)
        {
                Obj.Act(direction);
        }
        else
        {
                if(Obj.currentDirection != direction)
                {
                        Obj.ActStop();
                        Obj.Act(direction);
                }
        }
        Obj.currentDirection = direction;
        var s = Math.sqrt(2)/2
        switch(direction)
        {
                case 0:
                        Obj.setX(Obj.getX()-2*s);
                        Obj.setY(Obj.getY()+2*s);
                        break;
                case 1:
                        Obj.setX(Obj.getX()+2*s);
                        Obj.setY(Obj.getY()-2*s);
                        break;
                case 2:
                        Obj.setX(Obj.getX()-2*s);
                        Obj.setY(Obj.getY()-2*s);
                        break;
                case 3:
                        Obj.setX(Obj.getX()+2*s);
                        Obj.setY(Obj.getY()+2*s);
                        break;
                case 4:
                        Obj.setX(Obj.getX()-2);
                        break;
                case 5:
                        Obj.setX(Obj.getX()+2);
                        break;
                case 6:
                        Obj.setY(Obj.getY()-2);
                        break;
                case 7:
                        Obj.setY(Obj.getY()+2);
                        break;
        }
}
function f_Keyup()
{
        if(currentKeyCode == event.keyCode)
                girl.ActStop();
}
//-->
</SCRIPT>
第二步：
修改<body>标签，增加相关的响应事件

游戏中用到的图片，是一张整图
下载：从本地下载
上一篇：求两个字符串的相似度下一篇：可以调节宽度和排序的表格