韩顺平 javascript教学视频_学习笔记17_js超级玛丽小游戏

采用面向对象思想设计超级马里奥游戏人物

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

游戏分析：

1. 看看如何通过按钮来控制mario的位置
   
2. 设计相关的对象（Mario x y ...）
   

onclick属性：当用户点击某个对象时调用的事件句柄

素材

mario.css

.gamediv{  
	width: 500px;  
	height: 400px;  
	background-color: pink;  
}  
  
/*表格样式*/  
.controlcenter{  
	width: 200px;  
	height: 200px;  
	border: 1px solid red;   
	text-align:center;
}  

mario.html 

  
  
	  
	  
	  
		  
	  
	  
		
  
			   
		
  
			
  
				
  
					
游戏键盘
  
				
  
				
  
					
**
  
					
					
  
					
**
  
				
  
				
  
					
  
					
**
  
					
  
				
  
				
  
					
**
  
					
  
					
**
  
				
  
			
  
	  
  

程序基本实现了 向上，向左，向右，向下的要求