很奇怪的现象,帮忙看下
向上和向左可以移动,可是为什么向右和向下不能移动呢?????
html code:
<html>
<head>
<title>SuperMary Game</title>
<link href="superMary.css" type="text/css" rel="stylesheet"/>
<script language="javascript" src="superMary.js"></script>
<script language="javascript" type="text/javascript">
function Mary(){
this.x=0;
this.y=0;
this.move=function(direct){
switch(direct){
case 0:
var mymary=document.getElementById('mymary');
var top=mymary.style.top;
top=parseInt(top.substr(0,top.length-2));
mymary.style.top=top-10;
break;
case 1:
var mymary=document.getElementById('mymary');
var right=mymary.style.right;
right=parseInt(right.substr(0,right.length-2));
mymary.style.right=(right)+10;
break;
case 2:
var mymary=document.getElementById('mymary');
var buttom=mymary.style.buttom;
buttom=parseInt(buttom.substr(0,buttom.length-2));
mymary.style.buttom=(buttom)+10;
break;
case 3:
var mymary=document.getElementById('mymary');
var left=mymary.style.left;
left=parseInt(left.substr(0,left.length-2));
mymary.style.left=(left)-10;
break;
}
}
}
//创建对象
var mary=new Mary();
function maryMove(direct){
switch(direct){
case 0:
mary.move(direct);
break;
case 1:
mary.move(direct);
break;
case 2:
mary.move(direct);
break;
case 3:
mary.move(direct);
break;
}
}
</script>
</head>
<body>
<div class="divbox">
<img id="mymary" style="left:200px;top:200px;position:absolute;" src="my.jpg" width="50px" height="35px"/>
</div>
<table class="control" border="2px" >
<tr align="center"><td colspan="3">游戏控制键</td></tr>
<tr align="center"><td>**</td><td><input type="button" value="↑" onclick="maryMove(0)"/></td><td>**</td></tr>
<tr align="center"><td><input type="button" value="←" onclick="maryMove(3)"/></td><td>**</td><td><input type="button" value="→" onclick="maryMove(1)"/></td></tr>
<tr align="center"><td>**</td><td><input type="button" value="↓" onclick="maryMove(2)"/></td><td>**</td></tr>
</table>
</body>
</html>
CSS code:
.divbox{
background-color:red;
width:450px;
height:450px;
}
.control{
width:200px;
height:100px;
border:1px solid blue;
}
[解决办法]
top-10 和(buttom)+10; (right)+10 和(left)-10;这两组表示不同但效果一样 不是只觉得了两个方向的运动吗 是不是这里有问题的说。。。
[解决办法]
哎呀。。不好意思打错字了~~ 只决定了两个方向的运动 不是觉得 原谅原谅哈 ~~
[解决办法]
你如果确定向上和向左可以用的话,那么你只需改
将
case 1:
var mymary=document.getElementById('mymary');
var right=mymary.style.right;
right=parseInt(right.substr(0,right.length-2));
mymary.style.right=(right)+10;
break;
改为
case 1:
var mymary=document.getElementById('mymary');
var left=mymary.style.left;
left=parseInt(left.substr(0,left.length-2));
mymary.style.left=(left)+10;
break;
将:
case 2:
var mymary=document.getElementById('mymary');
var buttom=mymary.style.buttom;
buttom=parseInt(buttom.substr(0,buttom.length-2));
mymary.style.buttom=(buttom)+10;
break;
改为
case 2:
var mymary=document.getElementById('mymary');
var top=mymary.style.top;
top=parseInt(top.substr(0,top.length-2));
mymary.style.top=top+10;
break;
按上面的改法就可以了。
但你上面发的代码错误挺多的,是不是没发完整???
<html><head><title>SuperMary Game</title><style type="text/css">.divbox{ background-color:red; width:450px; height:450px;}.control{ width:200px; height:100px; border:1px solid blue;}</style><script language="javascript" src="superMary.js"></script><script language="javascript" type="text/javascript"> function Mary(){ this.x=0; this.y=0; this.move=function(direct){ switch(direct){ case 0: var mymary=document.getElementById('mymary'); var top=mymary.style.pixelTop; if((top+"").length>2) top=parseInt((top+"").substr(0,top.length-2)); mymary.style.pixelTop=top-10; break; case 1: var mymary=document.getElementById('mymary'); var left=mymary.style.pixelLeft; if((left+"").length>2) left=parseInt((left+"").substr(0,left.length-2)); mymary.style.pixelLeft=(left)+10; break; case 2: var mymary=document.getElementById('mymary'); var top=mymary.style.pixelTop; if((top+"").length>2) top=parseInt((top+"").substr(0,top.length-2)); mymary.style.pixelTop=top+10; break; case 3: var mymary=document.getElementById('mymary'); var left=mymary.style.pixelLeft; if((left+"").length>2) left=parseInt((left+"").substr(0,left.length-2)); mymary.style.pixelLeft=(left)-10; break; } } } //创建对象 var mary=new Mary(); function maryMove(direct){ switch(direct){ case 0: mary.move(direct); break; case 1: mary.move(direct); break; case 2: mary.move(direct); break; case 3: mary.move(direct); break; } }</script></head><body><div class="divbox"><img id="mymary" style="left:200px;top:200px;position:absolute;" src="my.jpg" width="50px" height="35px"/></div><table class="control" border="2px" ><tr align="center"><td colspan="3">游戏控制键</td></tr><tr align="center"><td>**</td><td><input type="button" value="↑" onclick="maryMove(0)"/></td><td>**</td></tr><tr align="center"><td><input type="button" value="←" onclick="maryMove(3)"/></td><td>**</td><td><input type="button" value="→" onclick="maryMove(1)"/></td></tr><tr align="center"><td>**</td><td><input type="button" value="↓" onclick="maryMove(2)"/></td><td>**</td></tr></table></body></html>