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

来源：互联网发布：达内大数据培训可靠吗编辑：程序博客网时间：2024/05/09 11:59

<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("金币不在这个地方哦"); elsemymario.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("金币不在这个地方哦"); elsemymario.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("金币不在这个地方哦"); elsemymario.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("金币不在这个地方哦"); elsemymario.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="↑" onclick="marioMove(1)"/></td><td></td></tr> <tr><td><input type="button" value="←" onclick="marioMove(2)"/></td><td><input type="button" value="◆"/> </td><td><input type="button" value="→" onclick="marioMove(3)"/></td></tr> <tr><td></td><td><input type="button" value="↓" onclick="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;}

游戏截图：