玛丽向右走_编写玛丽左出右进的代码-优快云博客

本文链接：https://blog.youkuaiyun.com/luyuncsd123/article/details/8220846

   向右边走

<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>

<script type="text/javascript">


	
	//定义Mario

	function Mario(x,y){
		
		this.x=x;//mario的横坐标
		this.y=y;//mario的纵坐标

		//向右移动

		this.moveRight=function(){
			//alert("mari向右移动");
			//真的动.
			//获取小人图片
			var mario_img=document.getElementById("mario");
			//获取当前的left
			var mario_img_left=mario_img.style.left;//13px
			//window.alert(mario_img_left);
			//从mario_img_left 中获取数字部分 "13px"   substring(0,2)
			mario_img_left=mario_img_left.substring(0,mario_img_left.length-2);  
			mario_img.style.left=parseInt(mario_img_left)+30+"px";        //这个地方一定要用parseint进行转换

			//window.alert("mario_img_left="+mario_img_left);
		}

		//向左移动
		//向下移动
		//向上移动


	}
	//这是mario对象
	var mario=new Mario(1,1);

	//响应用户点击
	function move(direct){
		
		switch(direct){
			
			case "r":
				//window.alert("希望小人向右");
				//直接控制小人的动作
				mario.moveRight();
				break;
			case "l":
				window.alert("希望小人向左");
				break;
			case "up":
				window.alert("希望小人向上");
				break;
			case "down":
				window.alert("希望小人向下");
				break;
			default:
				window.alert("方向不对");
				break;

				
		}
	}


</script>

<input type="button" οnclick="move('r')" style="position:absolute;left:600px;top:100px" value="-->"/>

<div style="width:500px;height:400px;border:1px red solid">
<img src="mario.png" id="mario" width="40px" style="position:absolute;left:13px;top:17px"/>

<img src="1.bmp" id="torise" width="40px" style="position:absolute;left:303px;top:317px"/>
</div>
</html>