例子：js超级玛丽小游戏

韩顺平_轻松搞定网页设计(html+css+javascript)_第34讲_js超级玛丽小游戏_学习笔记_源代码图解_PPT文档整理

采用面向对象思想设计超级马里奥游戏人物（示意图）

怎么用通过按键，来控制图片的位置
这个小游戏，用面向对象会很方便，不用面向对象会很麻烦很麻烦，比如以后要讲解的坦克大战的游戏，要是用纯的面向过程或函数式的方式写，那维护起来会非常的麻烦。

游戏分析：
（1）看看如何通过按钮来控制mario的位置
（2）设计相关的对象（Mario x y ...）
Event对象
onclick属性：当用户点击某个对象时调用的事件句柄

素材

mario.css

 

[html] view plaincopyprint?
 
  1. .gamediv{  
  2.     width: 500px;  
  3.     height: 400px;  
  4.     pink;  
  5. }  
  6.   
  7. /*表格样式*/  
  8. .controlcenter{  
  9.     width: 200px;  
  10.     height: 200px;  
  11.     border: 1px solid red;   
  12. }  
.gamediv{
	width: 500px;
	height: 400px;
	background-color: pink;
}

/*表格样式*/
.controlcenter{
	width: 200px;
	height: 200px;
	border: 1px solid red; 
}
mario.html

 

 

[html] view plaincopyprint?
 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html>  
  3.     <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  
  4.     <link rel="stylesheet" type="text/css" href="mario.css" />  
  5.     <head>  
  6.         <script language="javascript">  
  7.             //设计Mario类  
  8.             function Mario(){  
  9.                 this.x=0;  
  10.                 this.y=0;  
  11.   
  12.                 //移动 顺时针 0->上 1->右 2->下 3->左  
  13.                 this.move=function(direct){  
  14.                     switch(direct){  
  15.                         case 1:  
  16.                             //window.alert("mario 右移动");  
  17.                             //这里为了改变 img的left 和top，我们需要得到 img元素。需要用到javascript的DOM编程。img 对象  
  18.                             var mymario=document.getElementById('mymario');  
  19.                             //取出 img 的top值  
  20.                             //window.alert(mymario.style.top);  
  21.   
  22.                             //怎样去掉50px的px  
  23.                             var top=mymario.style.top;  
  24.                             //px占据两个，即lenght-2  
  25.                             //window.alert(top.substr(0,top.length-2));  
  26.   
  27.                             //现在还是串，要转成数值才能加减  
  28.                             top=parseInt(top.substr(0,top.length-2));  
  29.                             //window.alert(top);  
  30.   
  31.                             mymario.style.top=(top+2)+"px"; //开始移动2px，看怎么拼接的，字符串和数值之间的转换  
  32.                             //此时mario就可以向下移动了，把上面的打印调试输出代码都注释掉  
  33.                             break;  
  34.                     }  
  35.                 }  
  36.             }  
  37.   
  38.             //创建Mario对象  
  39.             var mario=new Mario();  
  40.   
  41.             //全局函数  
  42.             function marioMove(direct){  
  43.                 switch(direct){  
  44.                     case 1:  
  45.                         mario.move(direct);  
  46.                         break;  
  47.                     case 0:  
  48.                         break;  
  49.                     case 2:  
  50.                         break;  
  51.                     case 3:  
  52.                         break;  
  53.                 }  
  54.             }  
  55.         </script>  
  56.     </head>  
  57.     <body>  
  58.         <div class="gamediv">  
  59.             <img id="mymario" src="mario.jpg" style="left:100px; top:50px; position:absolute;" /> <!--用到了绝对定位-->  
  60.         </div>  
  61.             <table border="1px" class="controlcenter">  
  62.                 <tr>  
  63.                     <td colspan="3">游戏键盘</td>  
  64.                 </tr>  
  65.                 <tr>  
  66.                     <td>**</td>  
  67.                     <td><input type="button" value="↑↑" onclick="marioMove(1)" /></td>  
  68.                     <td>**</td>  
  69.                 </tr>  
  70.                                 <tr>  
  71.                     <td><input type="button" value="←←" /></td>  
  72.                     <td>**</td>  
  73.                     <td><input type="button" value="→→" /></td>  
  74.                 </tr>  
  75.                                 <tr>  
  76.                     <td>**</td>  
  77.                     <td><input type="button" value="↓↓" /></td>  
  78.                     <td>**</td>  
  79.                 </tr>  
  80.             </table>  
  81.     </body>  
  82. </html>  

再要求：
（1）mario碰到边界给一个提示
posted @ 2015-09-16 10:55  名字不能缺  阅读(1109)  评论(0)  编辑  收藏  举报