/*简单的网页控制移动游戏*/
//Html文件
<!DOCTYPE html>
<html>
<head>
<title>Mario.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<link rel="stylesheet" href="../css/Mario.css" type="text/css"></link>
</head>
<body>
<script>
function move(n){
var mar, left, top;
mar = document.getElementById("mm");
left = mar.style.left;
left = parseInt(left.substr(0, left.length-2));
top = mar.style.top;
top = parseInt(top.substr(0, top.length-2));
switch(n){
case 1:
if(top == 0)
alert("已到最顶");
else
mar.style.top = (top - 50) + "px";
break;
case 2:
if(top == 450)
alert("已到最低");
else
mar.style.top = (top + 50) + "px";
break;
case 3:
if(left == 0)
alert("已到最左");
else
mar.style.left = (left - 50) + "px";
break;
case 4:
if(left == 750)
alert("已到最右");
else
mar.style.left = (left + 50) + "px";
break;
}
}
</script>
<div class="div1">
<!-- 用getElementById("mm")所得代表下列的img元素,而且该元素样式只能用style控制才能获取样式信息(坐标等) -->
<!-- 如果把样式顺便写到id选择器里面,是无法使用样式信息的,因为style相当于是img元素的一个属性,style里面又列出了各种样式属性
所以才可以用mar.style.left获得左坐标 -->
<img id="mm" src="../images/Work.jpg" style="width: 50px; height: 50px; left: 0px; top: 0px; position: absolute" />
<table align="center" class="con">
<tr>
<td colspan="3" align="center">控制器</td>
</tr>
<tr>
<td align="center">*</td>
<td align="center">
<input type="button" value="up" onclick="move(1)"/>
</td>
<td align="center">*</td>
</tr>
<tr>
<td align="center">
<input type="button" value="left" onclick="move(3)"/>
</td>
<td align="center">
<input type="button" value="down" onclick="move(2)"/>
</td>
<td align="center">
<input type="button" value="right" onclick="move(4)"/>
</td>
</tr>
</table>
</div>
</body>
</html>
//Css文件
@CHARSET "UTF-8";
body{
width: 800px;
height: 650px;
margin: 0 auto;
}
.div1{
width: 800px;
height: 500px;
margin: 0px;
background-color: pink;
position: absolute;
}
.con{
width: 200px;
height: 150px;
margin-top: 500px;
border: 1px blue solid;
}
