WEB前端开发学习----4.用JavaScript实现网页游戏的移动效果

     想必大家都玩过网页游戏吧。随着HTML5的普及,浏览器+云端的web app成为了未来的趋势。很多效果都离不开JavaScript。所以说要想进行web开发,JavaScript一定得学好。 

     那网页游戏中是怎么实现人物的移动效果呢,今天分享一个很基础的简单方法。

     效果图如下:点击上边的按钮,暴走小人开始向右移动。

WEB前端开发学习----4.用JavaScript实现网页游戏的移动效果_第1张图片

HTML+CSS部分非常简单。就不多说了。需要注意的是图片要使用绝对定位。

那么怎么让图片向右动起来呢?

由于图片有position属性,那么我们只需要改变它的属性值就可以了。比如说我们点一次按钮,小人就向右走20px,那么我们只需要在它的左边增加20px,也就是说img.style.left+20.原理非常简单。

但有个问题就是像素是有单位的(px),怎么进行计算?所以我们需要将它的单位去掉。怎么去?查手册!

发现在 js 的String对象中有一个叫做substr()的方法,可以对字符串进行截取指定位置的字符。substr(初始位置,指定长度).

比如a="abcdefg" ,如果我们只想要"cd",那么只需要将其截取a.substr(2,2)就可得到"cd"。

由此我们可以得到一个没有单位的字符串了。只需调用parseInt方法将其转换为整数。


下面是全部代码,还是挺有意思的。




	
	Document
	


	

但是我有个问题,上面的代码我是用行内方法设定CSS方法,可以在js进行访问其属性。

但如果我用嵌入式,怎样在js中访问它的left属性呢?如果有人知道,请不吝赐教!谢谢!



你可能感兴趣的:(web前端)