24-JavaScript-面向对象-案例-移动mario图片

来源：互联网发布：alias软件介绍编辑：程序博客网时间：2024/06/05 20:08
使用绝对定位, 改变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>