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

文西马龙：http://blog.csdn.net/wenximalong/

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

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

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

素材

mario.css

.gamediv{
	width: 500px;
	height: 400px;
	background-color: pink;
}

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

mario.html

	
	
	
		
	
	
		

			 
		
			

				

					
游戏键盘
				
				

					
**
					

					
**
				
                                

					

					
**
					

				
                                

					
**
					

					
**
				
			
	

再要求：
（1）mario碰到边界给一个提示
（2）mario可以去找另外一个物体，比如蘑菇

韩顺平_php从入门到精通_视频教程_学习笔记_源代码图解_PPT文档整理_目录