WEB前端开发学习----4.用JavaScript实现网页游戏的移动效果
2014-08-06 03:18
801 查看
想必大家都玩过网页游戏吧。随着HTML5的普及,浏览器+云端的web app成为了未来的趋势。很多效果都离不开JavaScript。所以说要想进行web开发,JavaScript一定得学好。
那网页游戏中是怎么实现人物的移动效果呢,今天分享一个很基础的简单方法。
效果图如下:点击上边的按钮,暴走小人开始向右移动。
HTML+CSS部分非常简单。就不多说了。需要注意的是图片要使用绝对定位。
那么怎么让图片向右动起来呢?
由于图片有position属性,那么我们只需要改变它的属性值就可以了。比如说我们点一次按钮,小人就向右走20px,那么我们只需要在它的左边增加20px,也就是说img.style.left+20.原理非常简单。
但有个问题就是像素是有单位的(px),怎么进行计算?所以我们需要将它的单位去掉。怎么去?查手册!
发现在 js 的String对象中有一个叫做substr()的方法,可以对字符串进行截取指定位置的字符。substr(初始位置,指定长度).
比如a="abcdefg" ,如果我们只想要"cd",那么只需要将其截取a.substr(2,2)就可得到"cd"。
由此我们可以得到一个没有单位的字符串了。只需调用parseInt方法将其转换为整数。
下面是全部代码,还是挺有意思的。
但是我有个问题,上面的代码我是用行内方法设定CSS方法,可以在js进行访问其属性。
但如果我用嵌入式,怎样在js中访问它的left属性呢?如果有人知道,请不吝赐教!谢谢!
那网页游戏中是怎么实现人物的移动效果呢,今天分享一个很基础的简单方法。
效果图如下:点击上边的按钮,暴走小人开始向右移动。
HTML+CSS部分非常简单。就不多说了。需要注意的是图片要使用绝对定位。
那么怎么让图片向右动起来呢?
由于图片有position属性,那么我们只需要改变它的属性值就可以了。比如说我们点一次按钮,小人就向右走20px,那么我们只需要在它的左边增加20px,也就是说img.style.left+20.原理非常简单。
但有个问题就是像素是有单位的(px),怎么进行计算?所以我们需要将它的单位去掉。怎么去?查手册!
发现在 js 的String对象中有一个叫做substr()的方法,可以对字符串进行截取指定位置的字符。substr(初始位置,指定长度).
比如a="abcdefg" ,如果我们只想要"cd",那么只需要将其截取a.substr(2,2)就可得到"cd"。
由此我们可以得到一个没有单位的字符串了。只需调用parseInt方法将其转换为整数。
下面是全部代码,还是挺有意思的。
<!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" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>Document</title> <script type="text/javascript"> function moveImg(){ this.move=function(dir){ if(dir==1){ var toMove=document.getElementById("img"); var goRight=toMove.style.left;//获得当前左边的距离 goRight=parseInt(goRight.substr(0,goRight.length-2));//将距离转换为能进行计算的数字 toMove.style.left=goRight+20+"px";//每次走20px } } } var myImg=new moveImg(); </script> </head> <body> <p><input type="button" value="向右走起!!!" onclick="myImg.move(1)"></p> <div> <img style="position:absolute;left:0px;width:80px;" id="img" src="http://tangmaru.com/content/uploadfile/201309/73b21379867707.png"/> </div> </body> </html>
但是我有个问题,上面的代码我是用行内方法设定CSS方法,可以在js进行访问其属性。
但如果我用嵌入式,怎样在js中访问它的left属性呢?如果有人知道,请不吝赐教!谢谢!
相关文章推荐
- WEB前端开发学习----12. JavaScript 选项卡效果
- WEB前端开发学习----11. JQuery 实现简单的拖拽效果
- web前端学习笔记---实现雪花飘落的效果
- JavaScript 实践HTML5 localStorage 本地存储Json等数据 助于移动设备和web前端开发
- [HTML] 微信开发之移动手机WEB页面(HTML5)Javascript实现一键拨号及短信发送功能
- 微信开发之移动手机WEB页面(HTML5)Javascript实现一键拨号及短信发送
- 微信开发之移动手机WEB页面(HTML5)Javascript实现一键拨号及短信发送功能
- web前端学习笔记---实现雪花飘落的效果
- WEB前端-HTML-JavaScript实现内容滚动刷新的效果
- 微信开发之移动手机WEB页面(HTML5)Javascript实现一键拨号及短信发送功能
- 微信开发之移动手机WEB页面(HTML5)Javascript实现一键拨号及短信发送功能
- web前端教程:使用javascript实现多级联动效果
- 基于jQuery实现多标签页切换的效果(web前端开发)
- 微信开发之移动手机WEB页面(HTML5)Javascript实现一键拨号及短信发送功能
- 貌似是腾讯的web前端开发的题目:要求实现表格数据点击后循环移动
- 微信开发之移动手机WEB页面(HTML5)Javascript实现一键拨号及短信发送功能
- WEB前端开发学习----10. canvas实现画板的两个方法
- 微信开发之移动手机WEB页面(HTML5)Javascript实现一键拨号及短信发送功能
- 微信开发之移动手机WEB页面(HTML5)Javascript实现一键拨号及短信发送功能
- 基于jQuery实现多标签页切换的效果(web前端开发)