能移动的超级玛丽奥（1.1）

最新推荐文章于 2024-07-25 19:04:54 发布

蟹道人

最新推荐文章于 2024-07-25 19:04:54 发布

阅读量624

点赞数

分类专栏： javascript基础部分学习文章标签： javascript

本文链接：https://blog.csdn.net/csdt_csdt/article/details/18554659

版权

javascript基础部分学习专栏收录该内容

51 篇文章 0 订阅

订阅专栏

<html>
<head>
	<link rel = "stylesheet" href = "mario.css" type = "text/css"/>
	<script language="javascript" type="text/javascript">
		
		 
		 //设计mario类
		 function Mario(){
			 	this.x = 0;
			 	this.y = 0;	
		 	
			 	//移动方向的表示0 1 2 3
			 	this.move = function(direction){
			 		switch(direction){
			 			case 0:
			 			
			 				var mymario = document.getElementById('mymario');
			 			  var top1 = mymario.style.top;
			 			  var top2 = parseInt(top1.substr(0,top1.length-2));
			 			  mymario.style.top = (top2 - 10)+"px";
			 			  if(top2<0){
			 			  	window.alert("已经是最上面了！！");
			 			  }
			 			  //window.alert(mymario.style.top);
			 			   break;
			 			case 1:
			 			 // window.alert("右移动");
			 			  var mymario = document.getElementById('mymario');
			 			  var left1 = mymario.style.left;
			 			  var left2 = parseInt(left1.substr(0,left1.length-2));
			 			  
			 			  mymario.style.left = (left2 + 10)+"px";
			 			  if(left2>500){
			 			  	window.alert("已经是最右边了！！");
			 			  }
			 				//window.alert(mymario.style.left);
			 			  break;
			 			case 2:
			 				var mymario = document.getElementById('mymario');
			 			  var top1 = mymario.style.top;
			 			  var top2 = parseInt(top1.substr(0,top1.length-2));
			 			  mymario.style.top = (top2 + 10)+"px";
			 			  if(top2>400){
			 			  	window.alert("已经是最下边了！！");
			 			  }
			 			  //window.alert(mymario.style.top);
			 			   break;
			 			  
			 			case 3:
			 			 // window.alert("右移动");
			 			  var mymario = document.getElementById('mymario');
			 			  var left1 = mymario.style.left;
			 			  var left2 = parseInt(left1.substr(0,left1.length-2));
			 			  
			 			  mymario.style.left = (left2 - 10)+"px";
			 			  if(left2<0){
			 			  	window.alert("已经是最左边了！！");
			 			  }
			 				//window.alert(mymario.style.left);
			 			  break;
		 			}
		 		}
		 }
		 
		 //创建mario对象
		 var mario = new Mario();
		 
		 //定义一个全局函数
		 function marioMove(direct){
		 		
			 	if(direct == 0){
			 		mario.move(0);
			 		//window.alert(direct);
			 	}else if(direct == 1){
			 		mario.move(1);
			 	}else if(direct == 2){
			 		mario.move(2);
			 	}else if(direct == 3){
			 		mario.move(3);
			 	}
		 }
		
	</script>	
</head>	
<body>
 <div class = "gamediv">
 	<img id="mymario" style = "width:50px;left:50px;top:50px;position:absolute"
 	 src = "smallMario.jpg"/>
 </div>	
 <table class="keyTable" border="1px">
 	<tr><td colspan="3">游戏键盘</td></tr>	
 	<tr><td>**</td><td><input type="button" value="↑↑" onclick = "marioMove(0)"></td><td>**</td></tr>
 	<tr><td><input type="button" value="←←" onclick = "marioMove(3)"></td><td>**</td>
 		<td><input type="button" value="→→" onclick = "marioMove(1)"></td></tr>
 	<tr><td>**</td><td><input type="button" value="↓↓" onclick = "marioMove(2)"></td><td>**</td></tr>
 </table>
</body>
</html>