使用绝对定位, 改变left 和 top 的值 达到移动的目的.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <head> <title>Super Mario</title> <meta http-equiv="content-type" content="text/html;charset=UTF-8" /> <script type="text/javascript" charset="UTF-8"> //----------------------------------------------------- var marioImg; // 代表马里奥的图片 var step = 50; // 每次移动的增量 // 边界, 距离左上角的像素点 var topBound = 1; var leftBound = 1; var rightBound = 500 - 50; var bottomBound = 300 - 50; // mario 对象 var mario; //----------------------------------------------------- // window 加载完毕后, 获取 图片对象 并 初始化mario对象 window.onload = function(){ marioImg = document.getElementById("marioImg"); // mario 对象 初始化 mario = new Mario(); mario.imgElement = marioImg; } //----------------------------------------------------- // mario 类 function Mario() { // 坐标 this.x = 0; this.y = 0; // 代表mario的元素 this.imgElement = null; /* direction: "left" "right" "top" "bottom"*/ this.move = function(direction) { switch(direction) { case "left" : if ( isOutOfBound(-this.x, -leftBound, "不能往左走了..") ) break; moveToNewPos("left", -step, this); break; case "top" : if ( isOutOfBound(-this.y, -topBound, "不能往上走了..") ) break; moveToNewPos("top", -step, this); break; case "right" : if ( isOutOfBound(this.x, rightBound, "不能往右走了..") ) break; // 参数里的this代表mario对象 // 隐藏的this代表window对象 moveToNewPos("left", step, this); break; case "bottom" : if ( isOutOfBound(this.y, bottomBound, "不能往下走了..") ) break; moveToNewPos("top", step, this); break; } } // direct: top left; mario 为实例 // 移动图片 并 给 mario实例的坐标赋值 function moveToNewPos(direct, step, mario) { var oldValue = pxToInt( mario.imgElement.style[direct] ); var newValue = oldValue + step; mario.imgElement.style[direct] = newValue; if ("left" == direct) { mario.x = newValue; } else { mario.y = newValue; } } // 判断是否越界 function isOutOfBound(value, bound, msg) { if (value < bound) { return false; } alert(msg); return true; } } //----------------------------------------------------- // 将像素值 转换成数字 function pxToInt(pxValue) { if (pxValue == "") { return 0; } return parseInt( pxValue.replace("px", "") ); } //----------------------------------------------------- </script> <style type="text/css"> body { margin: 0px; padding: 0px; } .gameGround { width: 500px; height: 300px; background-color: gray; /*padding: 10px;*/ } .gameGround img { width: 50px; /*height: 50px;*/ position: absolute; /*left: 50;*/ } .controller { width: 150px; height: 150px; border: 1px solid black; text-align: center; } .controller tr td { border: 1px solid black; } </style> </head> <body> <div class="gameGround"> <img src="mario.png" id="marioImg"/> </div> <table class="controller"> <tr> <td colspan="3"> <input type="button" value="↑" onclick="mario.move('top')"/> </td> </tr> <tr> <td colspan="2"> <input type="button" value="←" onclick="mario.move('left')"/> </td> <td> <input type="button" value="→" onclick="mario.move('right')"/> </td> </tr> <tr> <td colspan="3"> <input type="button" value="↓" onclick="mario.move('bottom')"/> </td> </tr> </table> </body>