38-JavaScript-DOM-拖拽窗口-坦克的转向与移动

r囧r小猫 2022-09-18 13:46 12阅读 0赞

# 1. Style对象 #

**1.1 参考**  
  
[http://www.w3school.com.cn/htmldom/dom\_obj\_style.asp][http_www.w3school.com.cn_htmldom_dom_obj_style.asp]  
  
 **1.2 说明**  
  
document.getElementById("id").style.property="值"  
所有的HTML元素都有style属性

# 2. 拖拽窗口 #

![SouthEast][]

##  1) 标题中文字不被选中 ##

**① IE**  
  
JS: obj.onselectstart = function()\{  
return false;  
\}  
  
 **② Firefox**  
  
CSS: -moz-user-select: none;

##  2) 实现 ##

###  ① 简单实现(FireFox) ###

<html>
    <head>
        <meta http-equiv="content-type" content="text/html;charset=utf-8"/>
    
    <script type="text/javascript">
    
        var out;
        var title;
    
        window.onload = function() {
    
            out = document.getElementById("out");
            title = document.getElementById("title");
    
            // 标题 div 被按下时, 开始拖动
            title.onmousedown = startDrag;
    
            // 标题 div 被按下时, 停止拖动
            title.onmouseup = stopDrag;
    
            title.onselectstart = function(){ // IE , 文字无法被选中
                return false;
            }
    
        }
        window.captureEvents
    
    
        function startDrag() {
    
            window.onmousemove = function(evt) {
    
                evt = evt || window.event;
    
                out.style.top = evt.clientY - 5;
                out.style.left = evt.clientX - 5;
            }
        }
    
        function stopDrag() {
    
            window.onmousemove = null;
        }    
    
       
    </script>
    
    <style type="text/css">
    
    #out {
        width: 100px;
        height: 200px;
        border: 1px solid black;
        position: absolute;
        top: 100px;
        left: 200px;
    }
    #title {
        cursor: move;
        width: 100px;
        height: 20px;
        background-color: blue;
        -moz-user-select: none; /* Firefox, 文字无法被选中*/
    }
    
    </style>
    
    </head>
    
    <body>
    
        <div id="out">
            <div id="title">可拖动</div>
        </div>
    
    </body>
    </html>

###  ② 设置事件只在被拖拽的窗口中有效 ###

参考: [http://blog.sina.com.cn/s/blog\_4a9b5035010009se.html][http_blog.sina.com.cn_s_blog_4a9b5035010009se.html]  
  
就是设置一个对象的方法被触发的范围，或者作用域。  
如果不设置，则div只在当前窗口内被触发。  
如果设置，则在整个浏览器范围内被触发，也就是可以拖到浏览器外面

<html>
    <head>
        <meta http-equiv="content-type" content="text/html;charset=utf-8"/>
    
    <script type="text/javascript">
    
        var out;    // 整个div
        var title;  // 标题div
    
    window.onload = function() {
    
        out = document.getElementById("out");
        title = document.getElementById("title");
    
    
        title.onmousedown = function(evt) {
    
    
            evt = evt || window.event;
    
            /* 鼠标指针 距离 title 左上角的坐标差 */
            //设置或获取鼠标指针位置相对于触发事件的对象的 x 坐标。
            // IE: offsetX; Firefox: layout;
            var titleX = evt.layerX || evt.offsetX;
            var titleY = evt.layerY || evt.offsetY;
    
            /*设置事件捕获范围*/
            if(title.setCapture){   // IE
                title.setCapture();
            }else if(window.captureEvents){ // Firefox
                window.captureEvents(Event.MOUSEMOVE | Event.MOUSEUP);
            }
    
            document.onmousemove = function(evt) {
                
                evt = evt || window.event;
    
                // 窗口要移动到的坐标
                var moveToX = evt.clientX - titleX;
                var moveToY = evt.clientY - titleY;
    
                out.style.left = moveToX;
                out.style.top = moveToY;
            }
    
            document.onmouseup = function() {
                /*取消事件捕获范围*/
                if(title.releaseCapture){   // IE
                    title.releaseCapture();
                }else if(window.captureEvents){ // Firefox
                    window.captureEvents(Event.MOUSEMOVE | Event.MOUSEUP);
                }   
    
                // 清除事件
                document.οnmοusemοve=null;
                document.οnmοuseup=null;
    
            }
    
        }
        
       
    }
    </script>
    
    <style type="text/css">
    
    #out {
        width: 100px;
        height: 200px;
        border: 1px solid black;
        position: absolute;
        top: 100px;
        left: 200px;
    }
    #title {
        cursor: move;
        width: 100px;
        height: 20px;
        background-color: blue;
        -moz-user-select: none; /* Firefox, 文字无法被选中*/
    }
    
    </style>
    
    </head>
    
    <body>
    
        <div id="out">
            <div id="title">可拖动</div>
        </div>
    
    </body>
    </html>

# 3. 坦克大战 #

##  3.1 坦克转向 ##

**1) 方式一,** 做四个图片 切换  
  
 **2) 方式二,** 一个图片上四种状态,每次显示一个部分  
  
 **3) 实现**  
![SouthEast 1][] ![SouthEast 2][]

<html>
    <head>
        <meta http-equiv="content-type" content="text/html;charset=utf-8"/>
    
    <script type="text/javascript">
        
        var tank;
    
        window.onload = function() {
            tank = document.getElementById("tank");
        }
    
        function changeDirect(persent) {
            tank.style.backgroundPosition = "100% " + persent + "%";
        }
    
    </script>
    
    <style type="text/css">
    
    #tank {
        background-image: url('./tank.jpg');
        width: 91px;
        height: 91px;
        background-position: 100% 0%; 
    }
    
    </style>
    
    </head>
    <body>
    
    <div id="tank"></div>
    
    <button οnclick="changeDirect(0)">上</button>
    <button οnclick="changeDirect(33)">左</button>
    <button οnclick="changeDirect(67)">下</button>
    <button οnclick="changeDirect(100)">右</button>
    
    </body>
    </html>

##  3.2 坦克移动 ##

![SouthEast 3][]

<html>
    <head>
        <meta http-equiv="content-type" content="text/html;charset=utf-8"/>
    
    <script type="text/javascript">
    
        var tank;   // div
        
        var myTank; // Tank的实例对象
    
        function Tank(x, y, direct) {   
            // 横纵坐标
            this.x = x;
            this.y = y;
            // 方向
            this.direct = direct;
            // 速度
            this.speed = 1; 
            
            /*
                W(87) - 上; - 1
                A(65) - 左; - 2 
                S(83) - 下; - 3
                D(68) - 右; - 4
            */
            this.move = function (evt) {
    
                evt = evt || window.event;
    
                switch (evt.keyCode) {
                    case 87 :  // 上
                        this.direct = 1;
                        changeDirect(0);
                        this.y -= this.speed;
                        break;
                    case 65 :   // 左
                        this.direct = 2;
                        changeDirect(33);
                        this.x -= this.speed;
                        break;
                    case 83 :  // 下
                        this.direct = 3;
                        changeDirect(67);
                        this.y += this.speed;
                        break;
                    case 68 :  // 右
                        this.direct = 4;
                        changeDirect(100);
                        this.x += this.speed;
                        break;
                }
    
            }
    
            function changeDirect(persent) {
                tank.style.backgroundPosition = "100% " + persent + "%";
            }
    
        }
    
    
    window.onkeydown = function(evt) {
    
        evt = evt || window.event;
    
        console.info( evt.keyCode );
        
        switch (evt.keyCode) {
            case 87 :  // 上
                if (myTank.y < 10) {
                    console.info( "不能往上走了" );
                    return;
                }
                break;
            case 65 :   // 左
                if (myTank.x < 10) {
                    console.info( "不能往左走了" );
                    return;
                }
                break;
            case 83 :  // 下
                if (myTank.y > 410) {
                    console.info( "不能往下走了" );
                    return;
                }
                break;
            case 68 :  // 右
                if (myTank.x > 410) {
                    console.info( "不能往右走了" );
                    return;
                }
                break;
        }
      
        myTank.move(evt);
        tank.style.left = myTank.x + "px";        
        tank.style.top = myTank.y + "px";
    
    }
    
    window.onload = function() {
    
        tank = document.getElementById("tank");
    
        myTank = new Tank(200, 500-91, 3);
        myTank.speed = 10;
    
        // 初始化
        tank.style.left = myTank.x + "px";
        tank.style.top = myTank.y + "px";
    }
    
    </script>
    
    <style type="text/css">
    
    #field {
        background-color: black;
        width: 500px;
        height: 500px;
        padding: 5px;
        position: absolute;
    }
    
    #tank {
        background-image: url('./tank.jpg');
        width: 91px;
        height: 91px;
        background-position: 100% 0%; 
        position: absolute;
    }
    
    </style>
    
    </head>
    
    <body>
    
    <div id="field">
        <div id="tank"></div>
    </div>
    
    </body>
    </html>

[http_www.w3school.com.cn_htmldom_dom_obj_style.asp]: http://www.w3school.com.cn/htmldom/dom_obj_style.asp
[SouthEast]: /images/20220828/0cc41bae661f45539dfb5b3e9d73deb5.png
[http_blog.sina.com.cn_s_blog_4a9b5035010009se.html]: http://blog.sina.com.cn/s/blog_4a9b5035010009se.html
[SouthEast 1]: https://img-blog.csdn.net/20131127173957000?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvd3VxaW5mZWlfY3M=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast
[SouthEast 2]: /images/20220828/53ba7733655e4649ae4c5bcd4eadc042.png
[SouthEast 3]: /images/20220828/c2b3353590de4120a151e15ca7395568.png