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

查看全文

相关阅读:
Nginx 提示500 ,设置提示具体错误
 部署laravel 到linux环境
 php & vue 跨域问题解决方案
 一个php学习vue技术（篇章1）
中年危机
 elasticsearch 创建索引、unassigned、elasticsearch 创建索引后出现unassigned、
laravel jwt 报错 Argument 3 passed to LcobucciJWTSignerHmac::doVerify() must be an instance of LcobucciJWTSignerKey, null given
laravel jwttoken jwt attempt laravel auth->attempt() 返回false
composer 报错 Carbon 1 is deprecated, see how to migrate to Carbon 2
php 服务端主动向客户端推送消息, php swoole websocket, 服务端向客户端推送消息， websocket主动推送消息

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