zoukankan html css js c++ java

js 超级玛丽（面板）

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>

View Code

css

.game{
    500px;
    height: 400px;
    background: pink;
    position: absolute;
}
.control{
     200px;
    height: 100px;
    border: 1px solid red;
}

View Code

删除全局函数的实现方法：

<!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>

View Code

查看全文

相关阅读:
windows 共享文件夹给 mac
给mac配置adb 路径
 关于android 加载https网页的问题
 http tcp udp ip 间的关系
 手机服务器微架构设计和实现专题
 添加ssh key
本人对于线程池的理解和实践
 使用Android Butterknife
记一次失败的笔试（华为研发工程师-汽水瓶笔试题）
简易坦克大战python版

原文地址：https://www.cnblogs.com/helloworld2019/p/10934327.html