• 例子：js超级玛丽小游戏

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

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

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

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

    素材

    mario.css

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

/*表格样式*/
.controlcenter{
	 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碰到边界给一个提示
  • 相关阅读:
    网络
    DB
    DevOps
    Linux 进程管理：Supervisor
    Tomcat相关知识
    Tomcat配置和数据源配置
    Eclipse智能提示及部分快捷键
    Servlet工作原理
    蜗牛
    Servlet技术
  • 原文地址：https://www.cnblogs.com/nifengs/p/4812599.html
Copyright © 2020-2023  润新知