相信大家都玩过超级玛丽，下面实现控制玛丽的上、下、左、右等基本功能，本篇只是在练习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、在网页中显示：
时间： 2024-10-16 23:06:41