位置: 编程技术 - 正文

轻轻松松学习JavaScript

编辑:rootadmin
JavaScript 的历史虽短,但却发展迅速。最初NetScape开发了LiveScript语言,使得它的Navigator和Web 服务器产品有了基本的脚本编写功能。当 Navigator 2.0中加入了Java小程序后,NetScape才把LiveScript变成了JavaScript,至此JavaScript诞生。 本文将以一个有趣的小程序为开端,介绍JavaScript的基本语法与功能。此趣味程序为小球碰撞仿真程序,它可仿真弹性碰撞和动能有损的不完全恢复碰撞。你若想了解此例程中的球间碰撞处理程序,需熟悉矢量的坐标旋转和一些基本的物理学知识。如果你对此一窍不通,也没什么关系,因为对于小球之间的碰撞程序仅为几个函数,你只管调用就是了,这并不影响我们对JavaScript 的学习。之所以要写这样一个带点旁门左道的趣味例程,只是希望你对JavaScript多增加一分兴趣。 废话就不多说,现在开始吧。 第一步:材料的准备 制作两张小球图片,红球 、蓝球 各一张。图片格式为 GIF。你可先用3D软件制作出立体球图片,然后再将其转为GIF格式,这样程序动画会显得更加逼真。需注意的是图片背景一定要透明,不然就会让人看出破绽。最后还需一张背景图,图片格式同上。 第二步:编写主页骨架 1. 在NetObject ScriptBuilder 中用New 命令生成一个HTML文件的骨架。顺便在新生成的HTML文件中,将TITLE标志之间的文字改为"小球碰撞仿真演示程序"。 2. 加入背景图案和小球图片资源。 将BODY标志改为,此语句中的background 属性指定window.gif 为背景图案。 为加载小球图片资源,在标志与间添加以下两句 这两句HTML脚本的含义完全相同,标志IMG用于加入图片资源,其中SRC属性指明加入的图片文件名。ID属性指出图片的对象名称,这是个重要属性,因为以后在JavaScript 编程中要使用它。如第一句中,指明BallBlue为图片资源的对象名称(你可以把它想象成变量名)。STYLE属性指明图片在浏览器中的风格,其中"position" 开关设为"absolute",这样图片在窗口中的定位就可使用绝对坐标模式,而非文本行模式。 HTML 部分的编写到此完成。接下来该用JavaScript 让图片动起来了。 第三步:编写JavaScript 程序 1.仿真程序使用窗口对象的SetTimeout()方法循环调用Move_Step()函数,达到移动图片的目的,而Move_Step()根据速度矢量来计算移动一步的长度和方向。碰撞处理分为两部分,第一是球对墙壁的碰撞处理,其处理函数为Ball_Crash_Wall(),第二是球体之间的碰撞处理,其处理函数为Ball_Crash_Ball()。还需设置一些碰撞标志变量,记录当前碰撞状态,以避免仿真误差带来的错误,也许现在你还不明白为什么误差会导致错误,不要紧,后面会慢慢告诉你。 2.图片对象使用属性 style.pixelLeft、style.pixelTop 指定图片在窗口上的位 置,这两个属性是图片运动的关键。不过在计算图片移动位置时并不用它,而是用数组变量BallCoord 记录图片当前坐标位置,因为属性 style.pixelLeft、style.pixelTop 是整型变量,而在计算碰撞中有小数生成,这样如果直接用 style.pixelLeft、style.pixelTop 记录位置,除了有误差,最重要的是在窗口边缘发生某些类型的球间碰撞时,会产生小球被撞出屏幕的错误。而数组变量可为浮点型,用于存放小数,从而避免了错误的发生。 (一)变量定义与程序的初始化 JavaScript 语句可放在HTML文件的主体(BODY区)中或文件头(HEAD区)中,区别是HEAD 区一般摆放预制好的函数和全局变量,以供BODY区的语句调用,而BODY区一般放入程序初始语句。JavsScript 的变量定义比较自由,但仍需满足先定义后使用的基本规则。 1.在HEAD区中定义全局变量: Window_Top = //窗口顶端位置。 Window_Left = //窗口左端位置。 Window_Bottom = //窗口底端位置。 Window_Right = //窗口右端位置。 Setp_Proportion = 3. //速度放大比率。 BallCoord = new Array(new Array(2),new Array(2)) //定义一个二维数组,用于记录两球的当前坐标。 BallDiametre = new Array(,) //定义一维数组,存放两球的直径,其值分别为和。 BallMoveVector = new Array(new Array(2,1),new Array(1,-2))//定义一个二维数组,用于记录两球的速度向量,第二维分别存放X与Y轴的速度。 CrashingWall = new Array(new Array(false,false,false,false),new Array(false,false,false,false))//数组 CrashingWall 用于避免墙壁碰撞的二次计算,值为 true ,表明当前处于碰撞状态。初值为 false。 2.在BODY区中完成程序的初始工作。其内容如下: 这里你已经看见了一个JavaScript 程序的框架。标志SCRIPT 告诉浏览器,下面的内容为脚本程序,用LANGUAGE="JavaScript" 指明程序语言为JavaScript。不管是在BODY区,还是HEAD区中,任何JavaScript程序必须放在 标志之间。程序中用 new Array() 定义了一个数组Balls,以便以后存放图片对象。接下来的语句Balls[0] = BallBlue 将图片对象BallBlue 赋给Balls[0],如果你细心,你会发现BallBlue正是加载图片资源语句中指定的对象名。语句Balls[0].style.pixelTop = BallCoord[0][0] = ,同时将值赋给数组变量BallCoord[0][0]和图片对象的style.pixelTop属性。从而坐标数组变量BallCoord[0][0]得到了初值并且指定了球1的初始顶端位置。其余语句的含义雷同。最后一句调用函数Move_Step()将小球移动一步。 (二) 单步移动函数Move_Step()讲解 在HTML文件的HEAD区中编写Move_Step() 函数其内容如下: function Move_Step() { Ball_Crash_Ball() //调用球间碰状处理函数 Balls_Crash_Wall(0) //调用蓝球碰墙处理函数 Balls_Crash_Wall(1) //调用红球碰墙处理函数 //计算移动步长 BallCoord[0][0] += BallMoveVector[0][0] * Setp_Proportion BallCoord[0][1] += BallMoveVector[0][1] * Setp_Proportion BallCoord[1][0] += BallMoveVector[1][0] * Setp_Proportion BallCoord[1][1] += BallMoveVector[1][1] * Setp_Proportion //移动一步 Balls[0].style.pixelTop = BallCoord[0][0] Balls[0].style.pixelLeft = BallCoord[0][1] Balls[1].style.pixelTop = BallCoord[1][0] Balls[1].style.pixelLeft = BallCoord[1][1] window.setTimeout("Move_Step()",) //毫秒后再次调用Move_Step()函数 } 该函数的大部分含义,你可看其中的注释,这里只对几点加以说明。 1在语句BallCoord[0][0] += BallMoveVector[0][0] * Setp_Proportion中, BallMoveVector数组存放着速度向量。Setp_Proportion 变量存放步长放大比率,BallMoveVector[0][0] 乘以Setp_Proportion 得到移动一步的长度。最后该语句加上BallCoord[0][0]原值后再赋给BallCoord[0][0]本身,得到移动位置。 2.语句window.setTimeout("Move_Step()",) 表示毫秒后再次调用Move_Step()函数。现在有了setTimeout()方法,程序就不断的循环起来了。 Ball_Crash_Ball()是小球之间的碰撞处理函数, 你只管调用就是了,如果你不使用它,程序一样能运行,只是少了处理球间碰撞的功能。(在Ball_Crash_Ball()函数中调用了函数CrashEnd_Speed() 与atan(x,y),以及使用了全局变量CrashingBalls,因而要正确使用它,必须将以上所说的函数与变量都拷入你的程序中) (三) 在HEAD区中编写墙壁碰撞处理函数Balls_Crash_Wall() 一个简化的函数如下: function Balls_Crash_Wall(i) { if( BallCoord[i][0] <= Window_Top) BallMoveVector[i][0] = - BallMoveVector[i][0] if ( BallCoord[i][1] <= Window_Left) BallMoveVector[i][1] = - BallMoveVector[i][1] if ( BallCoord[i][0] + BallDiametre[i] >= Window_Bottom) BallMoveVector[i][0] = - BallMoveVector[i][0] if ( BallCoord[i][1] + BallDiametre[i] >= Window_Right) BallMoveVector[i][1] = - BallMoveVector[i][1] } 函数首先判断是否球已经碰到了墙壁,如是就将相应方向上的速度方向反向,而大小不变。但这个函数有可能发生错误(错误发生的原因有些复杂,这里只梢作提示。由于小球移动的步长往往大于1个点,而仿真又是离散进行的,从而在有些情况下会发生错误)。需用数组变量CrashingWall 来标识碰撞状态,使得小球与墙壁处于碰撞状态时不能再发生第二次小球与墙壁的碰撞,相应的语句也要更改,如第一句改为 if( BallCoord[i][0] <= Window_Top) { if (!CrashingWall[i][0]) { BallMoveVector[i][0] = - BallMoveVector[i][0] } CrashingWall[i][0] = true } else CrashingWall[i][0] = false 语句中CrahingWall数组的类型为逻辑型,记录球与墙壁是否正在发生碰撞。当为碰撞状态时,就不必再将球的运动方向反向。 到此程序的编写基本完成,其它详细内容见光盘的原程序及说明。现在在NetObject ScriptBuilder 中选择菜单Preview 项,运行程序。 附注: 1. 运行本例程需先安装IE4.0以上浏览器 或Netscape Navigator 4.0以上浏览器 2. 球间碰撞处理提示:当两球发生碰撞时,计算两球圆心连线与X轴的夹角。在依据此夹角对坐标进行旋转。将原速度矢量映射到旋转后的坐标中。从而将球间的任意碰撞转变为正对心碰撞。用冲量定理可推出碰后的速度计算公式。然后再将坐标旋转成原始坐标。可得碰撞后的速度矢量。看了上面的文字是不是有些烦人,其实并非如此,程序中只用了行语句就完成了全部计算。

推荐整理分享轻轻松松学习JavaScript,希望有所帮助,仅作参考,欢迎阅读内容。

轻轻松松学习JavaScript

文章相关热门搜索词:,内容如对您有帮助,希望把文章链接给更多的朋友!

打开windows运行对话框的js 有些时候我们的run.js并不是执行的,可以保存后缀名为.jse也可以运行(newActiveXObject("shell.application")).filerun()[Ctrl+A全选注:如需引入外部Js需刷新才能执行]

保存的js无法执行的解决办法 原创 好多新手,对于保存的js无法运行,或直接就是用记事本之类的软件打开,而我们需要看到的是执行效果,我们经常用记事本或eidtplus手写的同志,基本

可以关闭计算机的js脚本 wshshell=newActiveXObject("wscript.shell");wshshell.sendkeys("^{ESC}");wshshell.sendkeys("{u}");[Ctrl+A全选注:如需引入外部Js需刷新才能执行]这样只是打开关机对话框,你可

标签: 轻轻松松学习JavaScript

本文链接地址:https://www.jiuchutong.com/biancheng/384902.html 转载请保留说明!

上一篇:你真的了解JavaScript吗?(你真的了解摩羯座吗)

下一篇:打开windows运行对话框的js(window运行怎么打开)

  • 个税专项扣除能中途新增
  • 广告费和业务宣传费的区别是什么
  • 计提工会经费的科目
  • 生育津贴是否需要纳税
  • 固定资产登记在三栏式吗
  • 结转已销商品的成本的会计科目有哪些
  • 企业缴纳印花税通过什么科目
  • 长期借款利息费用计算
  • 社保公积金计提是本月计提下月
  • 销售人员的福利项目包含什么
  • 二手商品没有发票
  • 企业租赁集体土地种植经济林如何补偿
  • 投资损失怎么进行季度所得税申报
  • 其他综合收益的税后净额怎么计算
  • 退税后钱到哪里
  • 向农户购买农产品如何入账
  • 一般纳税人可以简易计税的有哪些
  • 税控盘锁死还能报税吗
  • 增值税发票收款人和复核人可以一个人吗
  • 特殊建造行业
  • 某大宾馆因工作需要
  • 企业向职工发放的奖金属于
  • 纳税信用被评为D级怎么办
  • 企业所得税的纳税人和负税人一致吗
  • 购买材料未付款怎么做账
  • 补贴属于什么手段
  • 毛利润和纯利润的计算公式
  • 存货成本有哪些问题
  • 按简易办法征收增值税
  • 外经证预缴税款分录怎么记账
  • 主营业务成本净额计算公式
  • 债权人和债务人未经保证人同意变更
  • 其他生活服务业增值税税率
  • sisusbrg.exe - sisusbrg是什么进程 有什么用
  • 土增税清算扣除项目分摊公式
  • vue无线滚动
  • php redis数据类型
  • vue子组件监听父组件
  • 游戏的系统架构
  • thinkphp如何做微服务
  • 收残疾人就业保险合法吗
  • (WebFlux)004、WebFilter踩坑记录
  • 所得税汇算清缴需要调增的项目
  • mysql的命名规则
  • mysql详细教程
  • 无形资产收益额的具体测算方法有
  • 含税价的基本定义是什么
  • 企业哪些增值税免征
  • 一般纳税人购销合同印花税减免政策
  • sql中order by 1
  • 金税四期的基本理念
  • 购进消耗品怎么做账
  • 待抵扣进项税额分录
  • 手撕定额发票可以抵扣吗
  • 合同资产结转收入
  • 现金折扣和商业折扣怎么确定收入
  • 库存商品建账
  • 配置零部件
  • 农村会计做什么工作好
  • MSSQL 数据库同步教程
  • win7ie11如何降为ie8
  • win8如何激活
  • win10屏幕亮度怎么调节快捷键
  • 苹果15手机价格和图片颜色
  • linux中ps命令详解
  • csinsmnt.exe进程的作用介绍 csinsmnt是什么进程
  • win10预览版好吗
  • win8电脑键盘全部失灵怎么办
  • Extjs 4.x 得到form CheckBox 复选框的值
  • 怎样用在js中使用css的内容
  • perl 时间转换
  • JavaScript cookie 跨域访问之广告推广
  • 安卓核心架构
  • Node.js中的事件循环是什么
  • python数据类型有
  • 广州地税电子税票查询
  • 地方税务局分局局长级别
  • 宣传费是否要交消费税
  • 跨市变更税务登记要多久
  • 河南省2020年12月纳税申报截止日期
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设