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

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

2024-08-09 05:34:17   211人阅读

想必大家都玩过网页游戏吧。随着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方法将其转换为整数。

 

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

 

[html] view plaincopy
 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">  
  3. <head>  
  4.     <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">  
  5.     <title>Document</title>  
  6.     <script type="text/javascript">  
  7.         function moveImg(){  
  8.             this.move=function(dir){  
  9.                 if(dir==1){  
  10.                     var toMove=document.getElementById("img");  
  11.                     var goRight=toMove.style.left;//获得当前左边的距离  
  12.                     goRight=parseInt(goRight.substr(0,goRight.length-2));//将距离转换为能进行计算的数字  
  13.                     toMove.style.left=goRight+20+"px";//每次走20px  
  14.                 }  
  15.             }  
  16.         }  
  17.         var myImg=new moveImg();  
  18.     </script>  
  19. </head>  
  20. <body>  
  21.     <p><input type="button" value=http://www.mamicode.com/"向右走起！！！" onclick="myImg.move(1)"></p>  
  22.     <div>  
  23.         <img style="position:absolute;left:0px;width:80px;"  id="img"  src=http://www.mamicode.com/"http://tangmaru.com/content/uploadfile/201309/73b21379867707.png"/>  
  24.     </div>      
  25. </body>  
  26. </html>  

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

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

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


联系
我们