js学习之tank的移动

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>非自走型tank！！！！</title>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <style type="text/css">
        .map {
            background: gray;
            border: 1px solid black;
            position: relative;
            margin: 50px auto;
            width: 416px;
            height: 416px;
        }

        .tank {
            background-image: url("//images0.cnblogs.com/blog/294743/201306/12123133-eaa9ada8690e4216a2bee3e56442e032.gif");
            background-repeat: no-repeat;
            overflow: hidden;
            position: absolute;
            width: 32px;
            height: 32px;
            z-index: 3;
        }
    </style>
</head>
<body>
    <div class="map" id="map">
        <div id="me" class="tank">
        </div>
    </div>
    <script type="text/javascript">

        //js取不到样式表的值，暂时先这样
        var MyGlobal = {
            mapWidth: 416,
            mapHeight: 416
        };

        var Tank = function (id, dir, x, y) {//div的id,方向,起始坐标
            this.el = document.getElementById(id);
            this.direction = dir ? dir : 'up';
            this.speed = 10;//越大越慢
            //坦克活动状态 0 未活动 1 正在活动
            this.activeState = 0;
            this.tid = null;
            this.x = x ? x : 100;
            this.y = y ? y : 200;
        };
        Tank.prototype.init = function () {//tank生成位置
            var dir = this.direction;
            var tank = this.el;
            tank.style['left'] = this.x + 'px';
            tank.style['top'] = this.y + 'px';
            this.setDirection(dir);
        };
        Tank.prototype.setDirection = function (dir) {//tank方向图片
            var tank = this.el;
            if (dir == 'up') {
                tank.style['backgroundPosition'] = '0 0';
            }
            if (dir == 'right') {
                tank.style['backgroundPosition'] = '-5px -36px';
            }
            if (dir == 'down') {
                tank.style['backgroundPosition'] = '0 -73px';
            }
            if (dir == 'left') {
                tank.style['backgroundPosition'] = '0 -105px';
            }
        };

        Tank.prototype.move = function (dir) {//tank移动
            if (this.activeState != 0) return false; //正在运动不管他
            this.activeState = 1; //将当前状态设置为正在运动
            if (this.direction != dir) {//转向
                this.direction = dir;
                this.setDirection(dir);
            }

            var tank = this.el;

            //获得当前位置
            var xpos = tank.style['left'] ? tank.style['left'] : 0;
            var ypos = tank.style['top'] ? tank.style['top'] : 0;
            xpos = parseInt(xpos);
            ypos = parseInt(ypos);

            //最大范围
            var mx = MyGlobal.mapWidth - 32;
            var my = MyGlobal.mapHeight - 32;

            switch (dir) {
                case 'up': ypos <= 0 ? 0 : ypos--; break;
                case 'right': xpos >= mx ? mx : xpos++; break;
                case 'down': ypos >= my ? my : ypos++; break;
                case 'left': xpos <= 0 ? 0 : xpos--; break;
            }

            //重新设置坦克位置
            tank.style['left'] = xpos + 'px';
            tank.style['top'] = ypos + 'px';

            //处理运动中的定时器
            if (this.tid) {
                clearTimeout(this.tid);
                this.tid = null;
            }

            //为了移动得更平滑
            this.x = xpos;
            this.y = ypos;
            var scope = this;
            var speed = this.speed;
            var repeat = function () {
                scope.move(dir);
            };
            if (!this.tid) {
                this.tid = setTimeout(repeat, speed);//10毫秒移动一次
            }

            //移动结束
            this.activeState = 0;
        }

        Tank.prototype.stop = function () {
            clearTimeout(this.tid);
            this.tid = null;
        };

        var tank = new Tank('me', 'right', 100, 100);
        tank.init();

        function getDir(code) {
            if (code == '87' || code == '119') {
                return 'up';
            }
            if (code == '100' || code == '68') {
                return 'right';
            }
            if (code == '115' || code == '83') {
                return 'down';
            }
            if (code == '97' || code == '65') {
                return 'left';
            }
            return null;
        }

        document.onkeydown = function (evt) {//按下键盘
            evt = (evt) ? evt : window.event;
            var keyCode = evt.keyCode;
            if (keyCode) {
                dir = getDir(keyCode.toString());//获得方向
            }
            tank.setDirection(dir);
            if (dir)
                tank.move(dir);//移动
            evt.preventDefault();
            return false;
        };
        document.onkeyup = function (evt) {//松开键盘
            tank.stop();
        };
        document.onkeypress = function (evt) {//从按下到松开键盘
            evt = (evt) ? evt : window.event;
            var keyCode = evt.keyCode;
            if (keyCode) {
                dir = getDir(keyCode.toString());//获得方向
            }
            if (dir)
                tank.move(dir);
            evt.preventDefault();
            return false;
        };
    </script>
</body>
</html>
posted @ 2015-12-07 12:00 margin_gu 阅读(578) 评论(0) 收藏举报
刷新页面返回顶部
margin_gu

js学习之tank的移动

公告
