现在的位置: 首页 > 综合 > 正文

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

2014年09月05日 ⁄ 综合 ⁄ 共 2659字 ⁄ 字号 评论关闭

使用绝对定位, 改变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>

抱歉!评论已关闭.