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


1. Style对象


 1.1 参考

    http://www.w3school.com.cn/htmldom/dom_obj_style.asp

 1.2 说明

    document.getElementById("id").style.property="值"
    所有的HTML元素都有style属性    

2. 拖拽窗口

38-JavaScript-DOM-拖拽窗口-坦克的转向与移动_第1张图片

 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
    
    就是设置一个对象的方法被触发的范围,或者作用域。
    如果不设置,则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.onmousemove=null;
            document.onmouseup=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) 实现
      38-JavaScript-DOM-拖拽窗口-坦克的转向与移动_第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 onclick="changeDirect(0)">上</button>
<button onclick="changeDirect(33)">左</button>
<button onclick="changeDirect(67)">下</button>
<button onclick="changeDirect(100)">右</button>

</body>
</html>

 3.2 坦克移动

38-JavaScript-DOM-拖拽窗口-坦克的转向与移动_第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>


     

你可能感兴趣的:(JavaScript,dom,坦克的转向与移动,拖拽窗口)