javascript 人物逼真行走,已完成

先欣赏,走两步试试.

神魔对决3(暂定名,神魔对决2续作) - 前期开发工程,业余时间搞搞而已~

本人无敌野球拳(业余jscoder)~,捏哈哈..
作者:风云舞
欢迎访问bbs.51js.com无忧脚本,大牛一堆!^-^

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(x2su2)zheny=5; //左下
else if(x2>su2&&y2su2&&y2>su2)zheny=6; //右下
else if(x20&&Math.abs(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

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

然后请分析下程序,我出以下题目,供牛牛们练手(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时,就说,应该不会再出错误)

精简/优化后的程序:

神魔对决3(暂定名,神魔对决2续作) - 前期开发工程,业余时间搞搞而已~

本人无敌野球拳(业余jscoder)~,捏哈哈..
作者:风云舞
欢迎访问bbs.51js.com无忧脚本,大牛一堆!^-^

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=x2su2?5: //左下
x2>su2&&y2su2&&y2>su2?6: //右下
x20&&$(y2)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

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

(0)

相关推荐

  • javascript 人物逼真行走,已完成

    先欣赏,走两步试试. 神魔对决3(暂定名,神魔对决2续作) - 前期开发工程,业余时间搞搞而已~ 本人无敌野球拳(业余jscoder)~,捏哈哈.. 作者:风云舞 欢迎访问bbs.51js.com无忧脚本,大牛一堆!^-^ function window.onload(){ //启动,反正一切为了 - 效率,还是效率...程序效率. yidong.hei=img1.offsetHeight;yidong.wid=img1.offsetWidth } var time1=null //全局 var

  • js键盘事件实现人物的行走

    本文实例为大家分享了js键盘事件实现人物行走的具体代码,供大家参考,具体内容如下 描述: 小时候喜欢玩的一个游戏,魔塔,实现了人物的行走,以及跳跃,当然是2D的效果. 用到的图: 效果: 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> htm

  • javascript 判断数组是否已包含了某个元素的函数

    复制代码 代码如下: Array.prototype.contains = function(obj) { var i = this.length; while (i–) { if (this[i] === obj) { return true; } } return false; } 或 复制代码 代码如下: Array.prototype.contains = function (element) { for (var i = 0; i < this.length; i++) { if (t

  • JavaScript中值类型和引用类型的区别

    JavaScript的数据类型分为两类:原始类型和对象类型.其中,原始类型包括:数字.字符串和布尔值.此外,JavaScript中还有两个特殊的原始值:null和undefined,它们既不是数字也不是字符串,更不是布尔值.它们通常分别代表了各自特殊类型的唯一成员.JavaScript中除了数字.字符串.布尔值.null和undefined之外的就是对象了. JavaScript中值类型和引用类型的区别 JavaScript中的值类型的值是不可变的: 任何方法都无法改变值类型的值.数字.布尔值.

  • 学习JavaScript的最佳方法分享

    学习新的东西是件可怕的事.对我来说,掌握一项新技能最大的问题是,我不知道自己懂什么.鉴于此,定个计划,学习你感兴趣的东西应该会有用.这篇文章的主旨就是:你为学习JavaScript 制定的蓝图.路线.行动计划!你不必担心找不到最好的资源,先整理些不好的资源,再确定下一步该学什么.遵循它,一步一步来. 任务0:了解什么是JavaScript 在你真正开始学习JavaScript 之前,花一分钟了解一下什么是JavaScript,它有哪些功能. JavaScript不是jQuery.Flash或Ja

  • Javascript 倒计时源代码.(时.分.秒) 详细注释版

    随便写写!闲着无聊!代码如有bug之处欢迎阁下强力拍砖! JS CODE 复制代码 代码如下: <script type="text/javascript" language="javascript"> //总时间,已分为单位 var time = 100; //小时 var h = parseInt(time / 60) > 0 ? parseInt(time / 60) : 0; //分 var m = time % 60; //秒 var s

  • Google 爬虫如何抓取 JavaScript 的内容

    我们测试了谷歌爬虫是如何抓取 JavaScript,下面就是我们从中学习到的知识. 认为 Google 不能处理 JavaScript ?再想想吧.Audette Audette 分享了一系列测试结果,他和他同事测试了什么类型的 JavaScript 功能会被 Google 抓取和收录. 长话短说 1. 我们进行了一系列测试,已证实 Google 能以多种方式执行和收录 JavaScript.我们也确认 Google 能渲染整个页面并读取 DOM,由此能收录动态生成的内容. 2. DOM 中的

  • ASP动态生成的javascript表单验证代码

    以网上down了一个ASP动态生成Form验证javascript的代码,自己扩容了一下.作者的大名我给忘了,不过我记得清楚,从第一条至第九条的代码都是该作者的原创.至于九至第十五条却是本人自己加的哦.而且由于本人水平有限,从第九条至第十五条不见得会条条生效啊?呵呵,其实把它贴在这里没有什么必要的,因为这点小会伎俩谁都会用的,我把它的作用定位为:开发时找不到该函数时到这里拷贝一下就可以了.呵,因为我即没有刻录机也没有移动硬盘.实在是没有办法把这些代码随身携带,不过还好,在北京到处都可以上网.所以

  • JavaScript实现微信红包算法及问题解决方法

    专栏停更了很久,向大家说声抱歉.今天的主题是使用JavaScript模拟实现微信抢红包的算法.这个题目看起来很简单,不就是一个随机函数吗?我们一起实现看看. 我们假设有一个100元的红包,要发给10个人.为了保证公平,算法需要保证以下的原则: 每个人最少能抢到0.01元 每个人的机会平等 所有人的金额之和等于100元 1.简单的随机函数实现 很多朋友的一般思路是: 第一步:从0-100中随机一个数,得到第一个红包金额. 第二步:从0-剩余金额中随机一个数,得到第二个红包金额. 第三步:... 最

  • jQuery实现类似淘宝购物车全选状态示例

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&qu

随机推荐