<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;
}
游戏截图: