HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link href="css/game.css" type="text/css" rel="stylesheet" />
<script language="JavaScript" type="text/javascript">
function Mario() {
this.x = 0;
this.y = 0;
this.move = function(direct) {
switch(direct) {
case 1:
var mymario = document.getElementById("mymario");
var left = mymario.style.left;
left = parseInt(left.substr(0, left.length - 2));
mymario.style.left = (left+10) + "px";
break;
case 2:
var mymario = document.getElementById("mymario");
var top = mymario.style.top;
top = parseInt(top.substr(0, top.length - 2));
mymario.style.top = (top+10) + "px";
break;
case 3:
var mymario = document.getElementById("mymario");
var left = mymario.style.left;
left = parseInt(left.substr(0, left.length - 2));
mymario.style.left = (left-10) + "px";
break;
case 4:
var mymario = document.getElementById("mymario");
var top = mymario.style.top;
top = parseInt(top.substr(0, top.length - 2));
mymario.style.top = (top-10) + "px";
break;
default:
break;
}
}
}
//全局函数
function move(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;
default:
break;
}
}
var mario = new Mario();
</script>>
</head>
<body>
<div class="game">
<img id="mymario" style="left: 100px;top: 50px; 40px;position: absolute;" src="img/u=797375903,2847618050&fm=26&gp=0.jpg" />
</div>
<table class="control" border="1px">
<tr>
<td colspan="3">操作靶子</td>
</tr>
<tr border="1px">
<td></td>
<td><input type="button" value="up" onclick="move(4)" /></td>
<td></td>
</tr>
<tr>
<td><input type="button" value="left" onclick="move(3)" /></td>
<td>mid</td>
<td><input type="button" value="right" onclick="move(1)" /></td>
</tr>
<tr>
<td></td>
<td><input type="button" value="down" onclick="move(2)" /></td>
<td></td>
</tr>
</table>
</body>
</html>
css
.game{
500px;
height: 400px;
background: pink;
position: absolute;
}
.control{
200px;
height: 100px;
border: 1px solid red;
}
删除全局函数的实现方法：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link href="css/game.css" type="text/css" rel="stylesheet" />
<script language="JavaScript" type="text/javascript">
function Mario() {
this.x = 0;
this.y = 0;
this.move = function(direct) {
switch(direct) {
case 1:
var mymario = document.getElementById("mymario");
var left = mymario.style.left;
left = parseInt(left.substr(0, left.length - 2));
mymario.style.left = (left+10) + "px";
break;
case 2:
var mymario = document.getElementById("mymario");
var top = mymario.style.top;
top = parseInt(top.substr(0, top.length - 2));
mymario.style.top = (top+10) + "px";
break;
case 3:
var mymario = document.getElementById("mymario");
var left = mymario.style.left;
left = parseInt(left.substr(0, left.length - 2));
mymario.style.left = (left-10) + "px";
break;
case 4:
var mymario = document.getElementById("mymario");
var top = mymario.style.top;
top = parseInt(top.substr(0, top.length - 2));
mymario.style.top = (top-10) + "px";
break;
default:
break;
}
}
}
//全局函数
function move(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;
default:
break;
}
}
var mario = new Mario();
</script>
</head>
<body>
<div class="game">
<img id="mymario" style="left: 100px;top: 50px; 40px;position: absolute;" src="img/u=797375903,2847618050&fm=26&gp=0.jpg" />
</div>
<table class="control" border="1px">
<tr>
<td colspan="3">操作靶子</td>
</tr>
<tr border="1px">
<td></td>
<td><input type="button" value="up" onclick="mario.move(4)" /></td>
<td></td>
</tr>
<tr>
<td><input type="button" value="left" onclick="mario.move(3)" /></td>
<td>mid</td>
<td><input type="button" value="right" onclick="mario.move(1)" /></td>
</tr>
<tr>
<td></td>
<td><input type="button" value="down" onclick="mario.move(2)" /></td>
<td></td>
</tr>
</table>
</body>
</html>