首页 > 代码库 > JavaScript基础--超级玛丽(七)(上下左右控制)

JavaScript基础--超级玛丽(七)(上下左右控制)

相信大家都玩过超级玛丽,下面实现控制玛丽的上、下、左、右等基本功能,本篇只是在练习JavaScript的用法

1、创建一个HTML页面

  1 <!doctype html>
  2 <html lang="en">
  3  <head>
  4   <meta charset="UTF-8">
  5   <meta name="Generator" content="EditPlus?">
  6   <meta name="Author" content="">
  7   <meta name="Keywords" content="">
  8   <meta name="Description" content="">
  9   <title>Document</title>
 10   <link href="Mario.css" type="text/css" rel="stylesheet" />
 11    <script language="javascript" type="text/javascript">
 12    //设计Mario类
 13    function Mario(){
 14       this.x =0;
 15       this.y =0;
 16       this.mymario = document.getElementById(mymario);
 17       this.move = function(direct){
 18          switch(direct){
 19             case 0:
 20                 //window.alert("mario上移动");
 21                 upControl(mymario);
 22                 break;
 23             case 1:
 24                 //这里为了改变img的left和Top值,需要先要得到img这个元素
 25                 //var mymario =document.getElementById(‘mymario‘);
 26                 rightControl(mymario);
 27                 break;    
 28             case 2:
 29                 //window.alert("mario下移动");
 30                 downControl(mymario);
 31                 break;
 32             case 3:
 33                 //window.alert("mario左移动");
 34                 leftControl(mymario);
 35                 break;
 36          }
 37       }
 38    }
 39    
 40    //创建Mario对象
 41    var mario = new Mario();
 42    //创建计数器,计算一行是否走到边界处。
 43    var countWidth = 0;
 44     //全局函数
 45     function marioMove(direct){
 46        switch(direct){
 47          //0表示向上走
 48          case 0:
 49             mario.move(direct);
 50             break;
 51         //1表示向右走
 52          case 1:
 53             mario.move(direct);
 54             break;
 55         //2表示向下走
 56          case 2:
 57             mario.move(direct);
 58             break;
 59         //3表示向左走
 60          case 3:
 61             mario.move(direct);
 62             break;
 63        }
 64     }
 65     
 66 
 67     //控制向右的方法
 68     function rightControl(mymario){
 69        //countWidth判断Mario是否可以前进的条件,450表示已走到X轴的最后位置,再继续走要超出div层
 70        if(countWidth<450){
 71             //获取mario的img元素的left属性:9px
 72             //截取left属性的px,并把值转换成整型
 73             var left = window.leftPosition(mymario);
 74             //mario每次前进150px,并把累加的值 赋给img的left属性
 75             mymario.style.left = (left+150) + "px";
 76             //计数器,每次累加的结果保存在计数器中,用于判断一行是否结束
 77             countWidth+=150;
 78        }else{    
 79              //获取当前mario图片的高度
 80              y = window.heightPosition(mymario);
 81              //获取图片相对于浏览器上边界的高度
 82              var top = window.topPosition(mymario);
 83              //判断mario是否走到div的最后一行的尽头了,如果没有,就继续一行一行往下走
 84              //359px是y轴坐标,如果超过359px,表示mario的y轴坐标再加70px,div的底层坐标就是359px
 85              if(top < 359){  
 86                 //y轴坐标每次加70px,sum完后放在top属性中
 87                 mymario.style.top =  y + top + "px";  
 88                 //每行的x轴坐标都是从9px开始的
 89                 mymario.style.left = "9px";
 90                 //重置计数器,用于判断x轴的是否可以继续的条件,换行后计数器要清零,否则计数器的值还为450;
 91                 countWidth = 0;      
 92              }else{
 93                 window.alert("游戏结束了");
 94                 //判断mario已走到了尽头(最后一行和最后一列的位置),重置游戏起始位置
 95                 mymario.style.top = "9px";
 96                 mymario.style.left = "9px";
 97              }
 98             
 99        }    
100     }
101 
102     //向下移动
103     function downControl(mymario){
104         var top = window.topPosition(mymario);
105         y = window.heightPosition(mymario); 
106         if(top <359){
107             mymario.style.top = y + top + "px";
108         }else{
109             window.alert("到底了,再往下就掉下去了!");
110         }
111     }
112 
113     //向上移动
114     function upControl(mymario){
115         var top = window.topPosition(mymario);
116         var height = window.heightPosition(mymario); 
117         if(top >9){
118            mymario.style.top =  (top -height) + "px";
119         }else{
120            window.alert("到顶了,在往上头就碰这天花板了!");
121         }
122     }
123 
124     //向左移动
125     function leftControl(mymario){
126          //设置初始位置(从图片的最后一行开始,而不是Div的。最后一行一列位置是left=459px,top=359px)
127          //向左移动
128          var left = window.leftPosition(mymario);
129          var top = window.topPosition(mymario);
130          var height = window.heightPosition(mymario);
131          //判读是否左移动到边界处,边界位置left ==9
132          if(left > 9){
133             //继续左移动
134             mymario.style.left = (left - 150) + "px";
135          }else{
136             //判读是否到达游戏开始位置
137             if(left - top !=0){
138                 //退回上一行的最后一列的位置:left = 459px的位置,left相当于x轴
139                 mymario.style.left ="459px";
140                 //退回上一行的最后一行的位置:top-height的位置,top 相当于y轴 
141                 mymario.style.top = (top - height) + "px";    
142             }else{
143                 window.alert("已回到开始位置!");
144             }        
145          }
146     } 
147 
148     //获取img元素top属性
149      var topPosition =function(mymario){
150         var top = mymario.style.top;
151         top = window.removeSuffixAndToInt(top);
152         return top;
153     }
154 
155     //获取img元素的left属性
156     var leftPosition = function(mymario){
157         var left = mymario.style.left;
158         left = window.removeSuffixAndToInt(left);
159         return left;
160     }
161     
162 
163     //获取img元素的height
164     var heightPosition = function(mymario){
165        var height = mymario.style.height;
166        //height = parseInt(height.substr(0,height.length-2));
167        height = window.removeSuffixAndToInt(height);
168        return height;
169     }
170 
171     //截取字符串并转换整型,把字符串后面的px去掉
172     var removeSuffixAndToInt = function(imgStyleAttribute){
173         //接受传过过来的坐标值(字符串),例如:79px,去掉px,再把字符串79转换成整型
174         var imgAttriIntValue=parseInt(imgStyleAttribute.substr(0,imgStyleAttribute.length-2));
175         return imgAttriIntValue;
176     }
177 
178     //注意:被调用的方法名不能与HTML元素里的属性相同,否则调用是方法名跟属性名冲突,被调方法不起任何作用
179     //在谷歌浏览器是不能这样调用的,但是在IE中这样的是可以,由于IE浏览器支持的JavaScript语法属于弱类型,所以
180     //在IE是可用的
181    </script>
182  </head>
183 
184  <body>
185    <div class="gamediv">
186      <img id="mymario" style="height:70px;width:50px;left:9px;top:9px;position:absolute;" src="mario.jpg"/>
187    </div>
188 
189    <table border="1px" class="controlcenter">
190      <tr><td colspan="3">游戏键盘</td></tr>
191      <tr><td>**</td><td><input type="button" value="↑" onclick="marioMove(0)"/></td><td></td></tr>
192      <tr><td><input type="button" value="←" onclick="marioMove(3)"/></td><td>**</td><td><input type="button" value="→" onclick="marioMove(1)"/></td></tr>
193      <tr><td>**</td><td><input type="button" value="↓" onclick="marioMove(2)"/></td><td></td></tr>
194    </table>
195  </body>
196 </html>

实现控制Mario的基本功能(上、下、左、右)

 

 

2、创建一个名为Mario.css

 1 .gamediv{
 2    width:500px;
 3    height:420px;
 4    background-color:pink;
 5    /*position:absolute;*/
 6 }
 7 
 8 /*表格样式*/
 9 .controlcenter{
10     width:200px;
11     height:100px;
12     border:1px solid black;
13 }

 

 3、在网页中显示: