可以使用键盘和鼠标控制页面上的小女孩在屏幕上走动，而且各个方向的动作都有
第一步：
在<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>标签，增加相关的响应事件
<BODY onload="Init();" onclick="f_MoveTo()" ondblclick="f_dblClick()" onkeydown="f_Keydown()" onkeyup="f_Keyup();">
游戏中用到的图片，是一张整图
