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

查看全文

相关阅读:
[Swift]GZip字符串压缩和解压缩（Java/C#通用）
[XCode]UI测试／单元测试
 转 oracle apex 使用
 转 pygame学习笔记（1）——安装及矩形、圆型画图
 转 11g RAC R2 体系结构---Grid
转如何升级oracle版本？（11.2.0.1至11.2.0.4）
ORA-14074: partition bound must collate higher than that of the last partition
12c pdb expdp use DATA_PUMP_DIR meet ORA-39145
转【Python】Python-skier游戏[摘自.与孩子一起学编程]
Dock

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