js坦克移动以及子弹发射

  本文写了一种让坦克在窗口范围内移动以及发射子弹的方法。

 首先 我们制定一种位移的策略，横纵坐标的起点都为0，当按下键盘上相应的按键时，我们改变tank的方向 并且给坦克的坐标加减10。

给document 加上onkeydown事件，并且判断输入的键值，以向右为例

// 向右
        if (code == 39) {
            L += 10
            current = (current + 90);
            otank.style.transform = 'rotate(' + current + 'deg)';
            if (L > (window.innerWidth - 60)) {
                L = window.innerWidth - 60
                // console.log(L)
            }
        };

  在执行后坐标值改变后进行一次判断 如果横纵坐标小于0 或者超过窗口的最大值时，让横纵坐标保持0或者保持最大值。

在坐标值确认后 我们再来改变tank位置。

 otank.style.top = T + "px";
 otank.style.left = L + "px";

子弹的发射，我们先要在空格按下后创造一个div作为子弹，并且子弹的初始值和方向要根据tank的位置和方向进行改变。具体可以看注释。

if (code == 32) {
            // 创建一个div当作子弹
            var node = document.createElement('div')
            node.classList.add('bullet')
            body.appendChild(node)
            // 子弹向右发射
            if (otank.style.transform == 'rotate(90deg)') {
                // 此处tank向右 初始top值为tank的top值加上一半tank的高度 子弹在运动时top值不改变
                node.style.top = (parseInt(otank.style.top) + 30) + 'px'
                // 给子弹的left值设一个定时器，它需要表现为向右移动
                shoot = setInterval(function () {
                    node.style.background = 'white'
                    node.style.left = s + parseInt(w) + 60 + 'px'
                    s += 10;
                    // console.log(s)
                    // 当子弹到达窗口的最大宽度时，自我销毁
                    if (parseInt(node.style.left) >= window.innerWidth) {
                        node.remove()
                        clearInterval(shoot)
                    }
                }, 10)
                console.log('right')
            }

以下为完整的js代码

    var otank = document.getElementById("tank");
    var body = document.getElementsByTagName('body')[0]
    // L为横坐标，T为纵坐标
    var L = 0;
    var T = 0;
    document.onkeydown = function (e) {
        var code = e.keyCode;
        // console.log(code);
        var s = 0;
        var current = 0;
        var shoot = null;
        var w = otank.style.left;
        var h = otank.style.top;
        // 按空格发射子弹
        if (code == 32) {
            // 创建一个div当作子弹
            var node = document.createElement('div')
            node.classList.add('bullet')
            body.appendChild(node)
            // 子弹向右发射
            if (otank.style.transform == 'rotate(90deg)') {
                node.style.top = (parseInt(otank.style.top) + 30) + 'px'
                shoot = setInterval(function () {
                    node.style.background = 'white'
                    node.style.left = s + parseInt(w) + 60 + 'px'
                    s += 10;
                    // console.log(s)
                    if (parseInt(node.style.left) >= window.innerWidth) {
                        node.remove()
                        clearInterval(shoot)
                    }
                }, 10)
                console.log('right')
            }
            // 子弹向下发射
            if (otank.style.transform == 'rotate(180deg)') {
                node.style.left = (parseInt(otank.style.left) + 27.5) + 'px'
                shoot = setInterval(function () {
                    node.style.top = s + parseInt(h) + 60 + 'px'
                    node.style.background = 'white'
                    s += 10;
                    if (parseInt(node.style.top) >= window.innerHeight) {
                        node.remove()
                        clearInterval(shoot)
                    }
                }, 10)
                console.log('down')
            }
            // 子弹向左发射
            if (otank.style.transform == 'rotate(-90deg)') {
                node.style.top = (parseInt(otank.style.top) + 30) + 'px'
                shoot = setInterval(function () {
                    node.style.background = 'white'
                    node.style.left = s + parseInt(w) + 'px'
                    s -= 10;
                    if (parseInt(node.style.left) <= 0) {
                        node.remove()
                        clearInterval(shoot)
                    }
                }, 10)
                console.log('left')
            }
            // 子弹向上发射
            if (otank.style.transform == 'rotate(0deg)') {
                node.style.left = (parseInt(otank.style.left) + 27.5) + 'px'
                shoot = setInterval(function () {
                    node.style.top = s + parseInt(h) + 'px'
                    node.style.background = 'white'
                    s -= 10;
                    if (parseInt(node.style.top) <= 0) {
                        node.remove()
                        clearInterval(shoot)
                    }
                }, 10)
                console.log('up')
            }
        }
        // 向左
        if (code == 37) {
            L -= 10;
            current = (current - 90);
            otank.style.transform = 'rotate(' + current + 'deg)';
            // console.log('左')
            if (L < 0) {
                L = 0
            }
        };
        // 向上
        if (code == 38) {
            T -= 10
            current = (current) % 360;
            otank.style.transform = 'rotate(' + current + 'deg)';
            if (T < 0) {
                T = 0
            }
        };
        // 向右
        if (code == 39) {
            L += 10
            current = (current + 90);
            otank.style.transform = 'rotate(' + current + 'deg)';
            if (L > (window.innerWidth - 60)) {
                L = window.innerWidth - 60
                // console.log(L)
            }
        };
        // 向下
        if (code == 40) {
            T += 10
            current = (current + 180);
            otank.style.transform = 'rotate(' + current + 'deg)';
            if (T > (window.innerHeight - 60)) {
                T = window.innerHeight - 60
                // console.log(L)
            }
        };
        otank.style.top = T + "px";
        otank.style.left = L + "px";
    }

以下为html

<div id="tank">
        <img src="tankU.gif" alt="">
    </div>

以下为css

<style>
        body {
            background: black;
        }

        #tank {
            position: fixed;
        }

        .bullet {
            width: 5px;
            height: 5px;
            background: black;
            position: absolute;
            top: 0px;
            left: 0px;
        }
    </style>