javascript 人物逼真行走,已完成- Javascript

当前位置: 首页 > 图文教程 > 网络编程 > Javascript > javascript 人物逼真行走,已完成

Javascript: 自己开发Dojo的建议框架; js每次Title显示不同的名言; 不用AJAX和IFRAME,说说真正意义上的ASP+JS无刷新技术; 无限级别的菜单（侧拉菜单）; 点选TOP后并不是直接跳到页顶的，而是滚动上去; js下拉菜单中自动信息轮换播放; 英文首字母全大写的js实现脚本; 实例区别onClick和onDBClick两事件方法; 改变文本框字体颜色的js脚本; js星空效果代码; 判断li是否有样式的js代码; 文本框点击时文字消失，失去焦点时文字出现; 如何让一个层关闭之后，就算刷新页面了也不显示。除非关闭页面再次打开; 右下角弹出窗口效果代码; JS控制对象移动效果; 验证用户是否修改过页面的数据的实现方法; Javascript操作select方法大全[新增、修改、删除、选中、清空、判断存在等]; 正则表达式判断是否存在中文和全角字符和判断包含中文字符串长度; EXT富客户端后台管理系统初步代码; 不同浏览器javascript变量作用域的处理方法

No. « ‹ 110 111 112 113 › »

技术文章搜索

关键字

Javascript 中的 javascript 人物逼真行走,已完成

出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-10-12 浏览: 191 ::

收藏到网摘: n/a

jQuery对象和DOM对象相互转化基于jQuery图片平滑连续滚动插件

然后请分析下程序,我出以下题目,供牛牛们练手(RPG游戏开发 - 实战,不搞理论,着重程序实现思路). 先欣赏,走两步试试.

点击运行可以看到效果:

<HTML><HEAD>
<META http-equiv='Content-Type' content='text/html;charset=gb2312'>
<Meta name='Gemeratpr' content='网络程序员伴侣(Lshdic)2005'>
<TITLE>神魔对决3(暂定名,神魔对决2续作) - 前期开发工程,业余时间搞搞而已~</TITLE>
</HEAD><BODY topmargin='2' leftmargin='2'>
<center style="font-size:40;color:Red">本人无敌野球拳(业余jscoder)~,捏哈哈..
作者:风云舞
欢迎访问bbs.51js.com无忧脚本,大牛一堆!^-^</center>
<div id="me" style="position:absolute;left:400;top:300;">
<img src="/upload/tech/20091012/20091012094923_ef4e3b775c934dada217712d76f3d51f.gif" id="img1" style="position:absolute;clip:rect(0 25% 12.5% 0);top:-64;z-index:5;" jiange=0></div>
<div style="position:absolute;left:600;top:500;width:150;height:80;border:1 solid black;background-color:blue"></div>
<div style="position:absolute;left:100;top:380;width:150;height:80;border:1 solid black;background-color:blue"></div>
<script>
function window.onload(){ //启动,反正一切为了 - 效率,还是效率...程序效率.
yidong.hei=img1.offsetHeight;yidong.wid=img1.offsetWidth
}
var time1=null //全局
var yidong={yibu1:0,yibu2:0,su:3,haomiao:25, //移动/json程序集合
zhenx:1,zheny:1,hei:0,wid:0,
jiange:6,
cle:function(){if(time1!=null){clearInterval(time1);time1=null;yidong.yibu1=0;yidong.yibu2=0;}},
clips:function(){with(yidong){img1.style.clip="rect("+(12.5*zheny-12.5)+"% "+25*zhenx+"% "+(12.5*zheny)+"% "+25*(zhenx-1)+"%)"}},
ck:function(obj){ //RPG ck
with(yidong){
cle();var newx=event.x-30;newy=event.y+15,oldx=obj.offsetLeft;oldy=obj.offsetTop
var x1=Math.abs(newx-oldx),y1=Math.abs(newy-oldy)
if(y1>x1){var x2=su/(y1/(newx-oldx));yibu2=Math.abs(x1/x2);newy-oldy>0?y2=su:y2=-su;}
else{var y2=su/(x1/(newy-oldy));yibu2=Math.abs(y1/y2);newx-oldx>0?x2=su:x2=-su;}
var su2=su/2
if(x2<-su2&&y2<-su2)zheny=7; //左上
else if(x2<-su2&&y2>su2)zheny=5; //左下
else if(x2>su2&&y2<-su2)zheny=8; //右上
else if(x2>su2&&y2>su2)zheny=6; //右下
else if(x2<0&&Math.abs(y2)<su2)zheny=2; //左
else if(x2>0&&Math.abs(y2)<su2)zheny=3; //右
else if(Math.abs(x2)<su2&&y2<0)zheny=4; //上
else if(Math.abs(x2)<su2&&y2>0)zheny=1; //下
img1.style.top=-(hei/8*zheny);clips();
time1=setInterval(function(){move(obj,x2,y2)},haomiao)
}},
move:function(obj,x2,y2){ //RPG move
with(yidong){
if(++yibu1>yibu2)return cle();obj.style.left=x2*yibu1+oldx;obj.style.top=y2*yibu1+oldy;
if(++img1.jiange>jiange){
img1.jiange=0;zhenx<4?zhenx++:zhenx=1;
img1.style.left=-(wid/4*(zhenx-1));clips();
}
}}
} //json yidong over.
function document.onclick(){yidong.ck(me)}
</script>

[Ctrl+A 全选提示:你可先修改部分代码,再按运行]

然后请分析下程序,我出以下题目,供牛牛们练手(RPG游戏开发 - 实战,不搞理论,着重程序实现思路).
1:我的程序,你还能否再精简?优化/改编算法?提高效率?试试吧,不过不能说太容易..提示:我目前认为,判断8个移动方向的程序,虽然效率可以,但IF ELSE的写法真有点老套,我也在想新的思路来简化这段程序,你若有,就漏两手吧!
2:都想玩寻路是吧?哈哈,那么就请试试碰触那个蓝色方块?注:假设,将来出现的障碍,是随机的,不是固定的..你碰到了比说任何蓝色障碍,就停住,或说,饶过去....提醒你:关键是思路.
3:有个问题我也不知道,就是CSS的clip,我发现就是,虽然裁剪了一小块,但其他被裁掉的部分,虽然看不见,但是,依然占用地方(原大小),比如,人物走到中间,却因为空白的下半部分超出,就会有滚动条了,这个,能不能就硬性去掉裁剪掉的部分?不让其影响滚动条?(别说BODY加上scroll=no就完事了,这个我可知道^-^)
4:谁有本事改成FF也能运行?注:我没装那玩意,哈哈,不过,我认为不太容易/可能很难改....

注:以上4点,你只需完成一点即可(就很牛),当然了,你4点都能/都想解决,那更牛B了,呵呵开个玩笑,反正随便你^-^.
以下是新增的内容:
1:采取了campaign的建议,使用其超级三元表达式,支持多行?能加注释?堪比多个IF ELSE?真牛..使用了,剩了不少代码.
2:借鉴了winter的思路,使用CSS的backgroundPosint方式代替了clip裁剪,简便易用....一个DIV就搞定了,无需在包容一个IMG
3:参考了理论家hax的代码,HTML代码使用了兼容写法,不过,JS程序没浏览器测试,无法写标准,呵呵..
4:自己,又实现了[鼠标按住],不停变换方向移动,你这次测试,可以单击,可以一直按住鼠标左键不停移动...思路就是用一个计时器不停检测,也占极少CPU,不知大家还有没更好思路?还有,用了setCapture()这种鼠标锁定.
5:自己,经测,堵住了几个异常漏洞(当值为0或NaN时,就说,应该不会再出错误)
精简/优化后的程序:

点击运行可以看到效果:

<html><head>
<title>神魔对决3(暂定名,神魔对决2续作) - 前期开发工程,业余时间搞搞而已~</title></head>
<body>
<p style="font-size:40px;color:Red;text-align:center">本人无敌野球拳(业余jscoder)~,捏哈哈..
作者:风云舞
欢迎访问bbs.51js.com无忧脚本,大牛一堆!^-^
<div id="me" style="position:absolute;left:400px;top:300px;background:url('/upload/tech/20091012/20091012094923_ef4e3b775c934dada217712d76f3d51f.gif') no-repeat;z-index:5;width:64px;height:64px;" jiange="0"></div>
<div style="position:absolute;left:600px;top:500px;width:150px;height:80px;border:1px solid black;background-color:blue"></div>
<div style="position:absolute;left:100px;top:380px;width:150px;height:80px;border:1px solid black;background-color:blue"></div>
<script>
var ckin=false,$=Math.abs,time1=null //全局,变量加速.
var yidong={yibu1:0,yibu2:0,oldx:0,oldy:0,evx:0,evy:0,su:4,haomiao:20, //移动/json程序集合
zhenx:1,zheny:1,jiange:5,min:64,
cle:function(){if(time1!=null){clearInterval(time1);time1=null;yidong.yibu1=0;yidong.yibu2=0;}},
clips:function(){me.style.backgroundPosition=(-yidong.zhenx+1)*yidong.min+" "+(-yidong.zheny+1)*yidong.min;},
//上面新采取winter的backgroundPosition思路,感觉比clip方便多了..★★★★★好使!
ck:function(obj){ //RPG ck
with(yidong){
cle();var newx=evx-30,newy=evy-50
oldx=obj.offsetLeft,oldy=obj.offsetTop
var x1=$(newx-oldx),y1=$(newy-oldy)
if(y1>x1){var x2=su/(y1/(newx-oldx));yibu2=$(x1/x2);newy-oldy>0?y2=su:y2=-su;}
else{var y2=su/(x1/(newy-oldy));yibu2=$(y1/y2);newx-oldx>0?x2=su:x2=-su;}
if(x2==0||x2==NaN||y2==0||y2==NaN)return; //这里新堵住了值为0/NAN的异外漏洞
var su2=su/2
zheny=x2<-su2&&y2<-su2?7: //左上,这里是采取campaign的超级三元多行表达式...呵呵,比if else剩不少..★★★★★好使!
x2<-su2&&y2>su2?5: //左下
x2>su2&&y2<-su2?8: //右上
x2>su2&&y2>su2?6: //右下
x2<0&&$(y2)<su2?2: //左
x2>0&&$(y2)<su2?3: //右
$(x2)<su2&&y2<0?4:1 //4=上,1=下
clips();time1=setInterval(function(){move(obj,x2,y2)},haomiao)
}},
move:function(obj,x2,y2){ //RPG move
with(yidong){
if(++yibu1>yibu2)return cle();try{obj.style.left=x2*yibu1+oldx;obj.style.top=y2*yibu1+oldy}catch(e){}
if(++obj.jiange>jiange){
obj.jiange=0;zhenx<4?zhenx++:zhenx=1;
clips();
}
}}
} //json yidong over.
function document.onmousedown(){ckin=true;yidong.ck(me);document.body.setCapture();}
function document.onmousemove(){yidong.evx=event.x;yidong.evy=event.y}
function document.onmouseup(){ckin=false;document.body.releaseCapture();}
setInterval("if(ckin)yidong.ck(me)",150) //目前思路是150毫秒,检查一次鼠标左键是不是按住了....不停变换方向.
</script>

[Ctrl+A 全选提示:你可先修改部分代码,再按运行]

jQuery对象和DOM对象相互转化基于jQuery图片平滑连续滚动插件

Javascript 中的 javascript 人物逼真行走,已完成

评论 (0) All