Hanshunping JavaScript Instructional Video _ Learn notes 17_js Super Mario games __js

Design Super Mario game characters with object-oriented idea

How to use the key to control the position of the picture
This small game, with object-oriented will be very convenient, do not object-oriented will be very troublesome, such as the future to explain the tank war game, if the pure process-oriented or functional style of writing, that maintenance will be very troublesome.

Game Analysis:
See how to control Mario's position through a button.
Design related objects (Mario x y ...) ）

OnClick Property: An event handle that is invoked when a user clicks on an object

Material

Mario.css

. gamediv{  
	width:500px;  
	height:400px;  
	Background-color:pink;  
}  
  
/* Table Style * *  
controlcenter{  
	width:200px;  
	height:200px;  
	border:1px solid red;   
	Text-align:center;
}  

Mario.html

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">  

The program basically achieved up, left, right, downward requirements