Shunping Han
http://blog.csdn.net/wenximalong/
....................................................................
material
mario.css
.gamediv{ width: 500px; height: 400px; background-color: pink; } /*Table style*/ .controlcenter{ width: 200px; height: 200px; border: 1px solid red; }mario.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <link rel="stylesheet" type="text/css" href="mario.css" /> <head> <script language="javascript"> //Design Mario class function Mario(){ this.x=0; this.y=0; //move clockwise 0->up 1->right 2->down 3->left this.move=function(direct){ switch(direct){ case 1: //window.alert("mario move right"); //Here in order to change the left and top of img, we need to get the img element. DOM programming using javascript is required. img object var mymario=document.getElementById('mymario'); //Remove the top value of img //window.alert(mymario.style.top); //How to remove 50px px var top=mymario.style.top; //px occupies two, ie lenght-2 //window.alert(top.substr(0,top.length-2)); //It's still a string now, it needs to be converted to a value to add or subtract top=parseInt(top.substr(0,top.length-2)); //window.alert(top); mymario.style.top=(top+2)+"px"; //Start to move 2px, see how to splicing, conversion between strings and values //At this point, mario can move down, and comment out the above print and debug output code break; } } } //Create Mario object var mario = new Mario (); // global function function marioMove(direct){ switch(direct){ case 1: mario.move(direct); break; case 0: break; case 2: break; case 3: break; } } </script> </head> <body> <div class="gamediv"> <img id="mymario" src="mario.jpg" > Ask again: (1) Mario touches the boundary to give a hint (2) Mario can find another object, such as a mushroom
Han Shunping_php from entry to master_video tutorial_study notes_source code illustration
Detailed page: http://www.verydemo.com/demo_c98_i22748.html