js面向对象编程-简单超级马里奥小游戏

最新推荐文章于 2024-06-19 15:31:02 发布

idwendy

最新推荐文章于 2024-06-19 15:31:02 发布

阅读量2k

点赞数

本文链接：https://blog.csdn.net/idwendy/article/details/8714825

版权

<script type="text/javascript">
	function Mario() {  //Mario类
		this.x=0;
		this.y=0;
		var top,left;
		this.move=function(direct) {
			
			switch(direct) {    //1->上 2->左   3->右  4->下
				case 1:
					var mymario=document.getElementById('mymario');
					top=mymario.style.top;
					top=parseInt(top.substr(0,top.length-2));
					if(!(check(top-20,left,direct))) 
						window.alert("金币不在这个地方哦"); 
					else
						mymario.style.top=(top-20)+"px";
					if((top-20>=430)&&(left>=840)) document.write("good job");
					break;
				case 2:
					var mymario=document.getElementById('mymario');
					left=mymario.style.left;
					left=parseInt(left.substr(0,left.length-2));
					if(!(check(top,left-20,direct))) 
						window.alert("金币不在这个地方哦"); 
					else
						mymario.style.left=(left-20)+"px"; 
					if((top>=430)&&(left-20>=840)) document.write("good job");
					break;
				case 3:
					var mymario=document.getElementById('mymario');
					left=mymario.style.left;
					left=parseInt(left.substr(0,left.length-2));
					if(!(check(top,left+20,direct))) 
						window.alert("金币不在这个地方哦"); 
					else
						mymario.style.left=(left+20)+"px"; 
					if((top>=430)&&(left+20>=840)) document.getElementById("win").innerHTML="good job";
					break;
				case 4:
					var mymario=document.getElementById('mymario');
					top=mymario.style.top;
					top=parseInt(top.substr(0,top.length-2));
					if(!(check(top+20,left,direct))) 
						window.alert("金币不在这个地方哦"); 
					else
						mymario.style.top=(top+20)+"px"; 
					if((top+20>=430)&&(left>=840)) document.write("good job");
					break;
			}
		}
		function check(top,left,direction){    //判断是否触碰到边界，如果是则提示“金币不在这哦，请继续努力！”
		//	window.alert(direction);
		//	if((top>=430)&&(left>=840)) 	
		//		window.alert("good job");
		//	window.alert(top);
		//	window.alert(left);
			if(direction==1||direction==4) {
				if(top<10||top>510) {
					return 0;
				}else return 1;
			}
			if(direction==2||direction==3) {
				if(left<0||left>940) {
					return 0;
				}else return 1;
			}
			
		}
	}
	
	var mario=new Mario();   
	
	function marioMove(direct) {
		switch(direct) {
			case 1: 
				mario.move(direct);    //向上
				break;
			case 2: 
				mario.move(direct);   //向左
				break;
			case 3: 
				mario.move(direct);  //向右
				break;
			case 4: 
				mario.move(direct);		//向下
				break;
		}
	}    
	
	function cgo() {
    window.alert("Hello");
    }
	
</script>

<body>

<div class="gamebackground" >
 <img id="mymario" style="width:70px; left:80px; top:50px; position:absolute;" src="mario.jpg" />  
 <img style="width:70px; left:900px; top:500px;position:absolute;" src="money.jpg" />
 
 <font id="win" class="winstyle"></font>
 
 <table class="controlcenter">
 <tr><td></td><td><input type="button" value="↑" οnclick="marioMove(1)"/></td><td></td></tr>
 <tr><td><input type="button" value="←" οnclick="marioMove(2)"/></td><td><input type="button" value="◆"/>
 </td><td><input type="button" value="→" οnclick="marioMove(3)"/></td></tr>
 <tr><td></td><td><input type="button" value="↓" οnclick="marioMove(4)"/></td><td></td></tr>
</table> 

</div>  
</body>

/* CSS Document */
.gamebackground{
	width:1000px;
	height:600px;
	background-color:pink;
	position:fixed;
	top:10px;
	left:130px;
	
}

.controlcenter {
	width:100px;
	height:100px;
	position:fixed;
	top:500px;
	left:140px;
}

.winstyle {
font-size:150px;
color:#006633;
font-style:italic;
font-weight:700;
position:fixed;
top:400x;
left:250px;

}

游戏截图：

idwendy

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js面向对象编程-简单超级马里奥小游戏

function Mario() { //Mario类 this.x=0; this.y=0; var top,left; this.move=function(direct) { switch(direct) { //1->上 2->左 3->右 4->下 case 1: var mymario=document.getElement
复制链接

扫一扫