今天來寫個遊戲，飛機大戰

1，布局

2，思路

1，動態創建自己的飛機 讓它在規定的區域，跟著鼠標運動。

2，在自己飛機的上方，間隔1s生成子彈。子彈往上移動 當top：0 子彈消失

3，每隔1s 產生敵機 top 0,left 隨機，敵機向下移動，敵機超過邊距時。敵機消失。

4，子彈和敵機相遇時。子彈和敵機同時消失

3，代碼

1，動態創建自己的飛機 讓它在規定的區域，跟著鼠標運動。

  let view = document.getElementById(‘view‘);
    // 創建自己的飛機
    let air = document.createElement(‘div‘);
    air.id 
 
= ‘air‘
    document.body.appendChild(air)
    document.onmousemove = function (e) {
        e = e || window.event
        // 邊距
        let aX = view.offsetLeft < e.clientX - air.offsetWidth / 2 && e.clientX + air.offsetWidth / 2 < view.offsetLeft + view.offsetWidth
        let aY = view.offsetTop < e.clientY - air.offsetHeight / 2 && e.clientY + air.offsetHeight / 2 < view.offsetTop + view.offsetHeight
        
 
if (aX&&aY) {
            air.style.left = e.clientX - air.offsetWidth / 2 + ‘px‘;
            air.style.top = e.clientY - air.offsetHeight / 2 + ‘px‘
        }
    }

2，在自己飛機的上方，間隔1s生成子彈。子彈往上移動 當top：0 子彈消失

  //獲取區域
    let view = document.getElementById(‘view‘);
    // 創建自己的飛機
    let air = document.createElement(‘div‘);
    air.id = ‘air‘
    document.body.appendChild(air)
    document.onmousemove = function (e) {
        e = e || window.event
        // 邊距
        let aX = view.offsetLeft < e.clientX - air.offsetWidth / 2 && e.clientX + air.offsetWidth / 2 < view.offsetLeft + view.offsetWidth
        let aY = view.offsetTop < e.clientY - air.offsetHeight / 2 && e.clientY + air.offsetHeight / 2 < view.offsetTop + view.offsetHeight
        if (aX && aY) {
            air.style.left = e.clientX - air.offsetWidth / 2 + ‘px‘;
            air.style.top = e.clientY - air.offsetHeight / 2 + ‘px‘
            ObJ_billet.bif=true
        }
    }
    let caerBl_time=setInterval(
        function () {
            if (ObJ_billet.bif){
            //在自己飛機的上方
            caeationBillet()

            }
        },1000 )

    //用來保存子彈數據
    let ObJ_billet = {
        name: ‘billet_‘,
        num: 0,
        //是否在區域
        bif:false,
        arr: []//保存id，xy坐標
    }

    function run_Billet(bl,i) {
        let runBl_time=setInterval(function () {
            bl.style.top=bl.offsetTop-1+‘px‘
            ObJ_billet.arr[i] = bl.id + ‘|‘ +bl.offsetLeft + ‘|‘ +bl.offsetTop
            if (bl.offsetTop<0){
                bl.parentNode.removeChild(bl);

                clearInterval(runBl_time)
            }
        },30)
    }
    
    //xy 坐標
    function caeationBillet() {
        let billet = document.createElement(‘div‘)
        billet.className = ‘bullet‘
        billet.id = ObJ_billet.name + ObJ_billet.num;
        document.body.appendChild(billet)
        //子彈在飛機上方
        billet.style.left = air.offsetLeft+air.offsetWidth/2+ ‘px‘
        billet.style.top =air.offsetTop-billet.offsetHeight-1+ ‘px‘
        //保存數據
        ObJ_billet.arr[ObJ_billet.num] = billet.id + ‘|‘ +billet.offsetLeft + ‘|‘ +billet.offsetTop
        //子彈運動
        run_Billet(billet,ObJ_billet.num)
        // 自增1
        ObJ_billet.num+=1
        //擋子彈有最多100個
        if (ObJ_billet.num>=100){
            ObJ_billet.num=0;
        }

    }　　

3，每隔1s 產生敵機 top 0,left 隨機，敵機向下移動，敵機超過邊距時。敵機消失。

<script>
    //獲取區域
    let view = document.getElementById(‘view‘);
    // 創建自己的飛機
    let air = document.createElement(‘div‘);
    air.id = ‘air‘
    document.body.appendChild(air)
    document.onmousemove = function (e) {
        e = e || window.event
        // 邊距
        let aX = view.offsetLeft < e.clientX - air.offsetWidth / 2 && e.clientX + air.offsetWidth / 2 < view.offsetLeft + view.offsetWidth
        let aY = view.offsetTop < e.clientY - air.offsetHeight / 2 && e.clientY + air.offsetHeight / 2 < view.offsetTop + view.offsetHeight
        if (aX && aY) {
            air.style.left = e.clientX - air.offsetWidth / 2 + ‘px‘;
            air.style.top = e.clientY - air.offsetHeight / 2 + ‘px‘
            ObJ_billet.bif=true
        }
    }
   let caerBl_time=setInterval(
        function () {
            if (ObJ_billet.bif){
                //在自己飛機的上方
                caeationBillet()
                caeationHair()

            }
        },1000 )

    //用來保存子彈數據
    let ObJ_billet = {
        name: ‘billet_‘,
        num: 0,
        //是否在區域
        bif:false,
        arr: []//保存id，xy坐標
    }
    let ObJ_Hair = {
        name: ‘hair_‘,
        num: 0,
        arr: []//保存id，xy坐標
    }
    // 子彈運動
    function run_Billet(element,i) {
        let runBl_time=setInterval(function () {
            element.style.top=element.offsetTop-1+‘px‘
            ObJ_billet.arr[i] = element.id + ‘|‘ +element.offsetLeft + ‘|‘ +element.offsetTop
            // 超出邊界消失
            if (element.offsetTop<0){
                element.parentNode.removeChild(element);
                clearInterval(runBl_time)
            }
        },30)
    }

    // 敵機運動
    function run_Hair(element,i) {
        let runHair_time=setInterval(function () {
            element.style.top=element.offsetTop+1+‘px‘
            ObJ_Hair.arr[i] = element.id + ‘|‘ +element.offsetLeft + ‘|‘ +element.offsetTop
            // 超出邊界消失
            if (element.offsetTop>view.offsetHeight-element.offsetHeight){
                element.parentNode.removeChild(element);
                clearInterval(runHair_time)
            }
        },30)
    }

    //創建子彈
    function caeationBillet() {
        let billet = document.createElement(‘div‘)
        billet.className = ‘bullet‘
        billet.id = ObJ_billet.name + ObJ_billet.num;
        document.body.appendChild(billet)
        //子彈在飛機上方
        billet.style.left = air.offsetLeft+air.offsetWidth/2+ ‘px‘
        billet.style.top =air.offsetTop-billet.offsetHeight-1+ ‘px‘
        //保存數據
        ObJ_billet.arr[ObJ_billet.num] = billet.id + ‘|‘ +billet.offsetLeft + ‘|‘ +billet.offsetTop
        //子彈運動
        run_Billet(billet,ObJ_billet.num)
        // 自增1
        ObJ_billet.num+=1
        //擋子彈有最多100個
        if (ObJ_billet.num>=100){
            ObJ_billet.num=0;
        }
    }
    // 創建敵機
    function caeationHair() {
        let hair = document.createElement(‘div‘)
        hair.className = ‘hair‘
        hair.id = ObJ_Hair.name + ObJ_Hair.num;
        view.appendChild(hair)
        //飛機由上往下 left隨機大小0到view寬度
        let random_L=randomNum(0,view.offsetWidth-hair.offsetWidth)
        hair.style.left = random_L+ ‘px‘
        hair.style.top =0+ ‘px‘
        ObJ_Hair.arr[ObJ_Hair.num] = hair.id + ‘|‘ +hair.offsetLeft + ‘|‘ +hair.offsetTop

        run_Hair(hair,ObJ_Hair.num)
        // 自增1
        ObJ_Hair.num+=1
        //飛機有最多100個
        if (ObJ_Hair.num>=100){
            ObJ_Hair.num=0;
        }
    }

    //生成從minNum到maxNum的隨機數
    function randomNum(minNum,maxNum){
       return parseInt(Math.random()*(maxNum-minNum+1)+minNum)

    }

</script>

4，子彈和敵機相遇時。子彈和敵機同時消失

//搜索所有的子彈，相遇 就被擊斃。相遇條件 飛機左<=left 子彈<=you     top 子彈<=飛機

ript>
    //獲取區域
    let view = document.getElementById(‘view‘);
    // 創建自己的飛機
    let air = document.createElement(‘div‘);
    air.id = ‘air‘
    document.body.appendChild(air)
    document.onmousemove = function (e) {
        e = e || window.event
        // 邊距
        let aX = view.offsetLeft < e.clientX - air.offsetWidth / 2 && e.clientX + air.offsetWidth / 2 < view.offsetLeft + view.offsetWidth
        let aY = view.offsetTop < e.clientY - air.offsetHeight / 2 && e.clientY + air.offsetHeight / 2 < view.offsetTop + view.offsetHeight
        if (aX && aY) {
            air.style.left = e.clientX - air.offsetWidth / 2 + ‘px‘;
            air.style.top = e.clientY - air.offsetHeight / 2 + ‘px‘
            ObJ_billet.bif = true
        }
    }
    let caerBl_time = setInterval(
        function () {
            if (ObJ_billet.bif) {
                //在自己飛機的上方
                caeationBillet()
                caeationHair()
                //搜索所有的子彈，相遇 就被擊斃。相遇條件 飛機左<=left 子彈<=you     top 子彈<=飛機
                for (let i = 0; i < ObJ_billet.arr.length; i++) {
                    let barr=ObJ_billet.arr[i].split(‘|‘)
                    for (let j=0;j<ObJ_Hair.arr.length;j++){
                        let harr=ObJ_Hair.arr[j].split(‘|‘)//id x y
                        if (document.getElementById(barr[0])&&document.getElementById(harr[0])){
                        let yif=parseInt(barr[2])<=parseInt(harr[2]) //Y相遇
                        let xif=parseInt(barr[1])>=parseInt(harr[1])&&parseInt(barr[1])<=parseInt(harr[1])+34
                        if (yif&&xif){
                        //消失元素 關閉記時器
                            let billet_a=document.getElementById(barr[0])
                            let hair_a=document.getElementById(harr[0])//獲取敵機

                            billet_a.parentNode.removeChild(billet_a)//刪除子彈
                            hair_a.parentNode.removeChild(hair_a)//刪除敵機
                            clearInterval(runBl_time)
                            clearInterval(runHair_time)
                        }}
                    }
                }
            }
        }, 1000)

    //用來保存子彈數據
    let ObJ_billet = {
        name: ‘billet_‘,
        num: 0,
        bif: false,
        //是否在區域
        arr: []//保存id，xy坐標
    }
    let ObJ_Hair = {
        name: ‘hair_‘,
        num: 0,
        arr: []//保存id，xy坐標
    }
    let runBl_time=null;//子彈定時器
    let runHair_time=null;//飛機定時器
    // 子彈運動
    function run_Billet(element, i) {
        runBl_time = setInterval(function () {
            element.style.top = element.offsetTop - 1 + ‘px‘
            ObJ_billet.arr[i] = element.id + ‘|‘ + element.offsetLeft + ‘|‘ + element.offsetTop
            // 超出邊界消失
            if (element.offsetTop < 0) {
                element.parentNode.removeChild(element);
                clearInterval(runBl_time)
            }
        }, 30)
    }

    // 敵機運動
    function run_Hair(element, i) {
        runHair_time = setInterval(function () {
            element.style.top = element.offsetTop + 1 + ‘px‘

            ObJ_Hair.arr[i] = element.id + ‘|‘ + element.offsetLeft + ‘|‘ + element.offsetTop + ‘|‘ + ‘‘
            // 超出邊界消失
            if (element.offsetTop > view.offsetHeight - element.offsetHeight) {
                element.parentNode.removeChild(element);
                clearInterval(runHair_time)
            }
        }, 30)
    }

    //創建子彈
    function caeationBillet() {
        let billet = document.createElement(‘div‘)
        billet.className = ‘bullet‘
        billet.id = ObJ_billet.name + ObJ_billet.num;
        document.body.appendChild(billet)
        //子彈在飛機上方
        billet.style.left = air.offsetLeft + air.offsetWidth / 2 + ‘px‘
        billet.style.top = air.offsetTop - billet.offsetHeight - 1 + ‘px‘
        //保存數據
        ObJ_billet.arr[ObJ_billet.num] = billet.id + ‘|‘ + billet.offsetLeft + ‘|‘ + billet.offsetTop + ‘|‘ + ‘1‘
        //子彈運動
        run_Billet(billet, ObJ_billet.num)
        // 自增1
        ObJ_billet.num += 1
        //擋子彈有最多100個
        if (ObJ_billet.num >= 100) {
            ObJ_billet.num = 0;
        }
    }

    // 創建敵機
    function caeationHair() {
        let hair = document.createElement(‘div‘)
        hair.className = ‘hair‘
        hair.id = ObJ_Hair.name + ObJ_Hair.num;
        document.body.appendChild(hair)
        //飛機由上往下 left隨機大小0到view寬度
        let random_L = randomNum(view.offsetLeft, view.offsetLeft + view.offsetWidth - hair.offsetWidth)
        hair.style.left = random_L + ‘px‘
        hair.style.top = 0 + ‘px‘
        ObJ_Hair.arr[ObJ_Hair.num] = hair.id + ‘|‘ + hair.offsetLeft + ‘|‘ + hair.offsetTop

        run_Hair(hair, ObJ_Hair.num)
        // 自增1
        ObJ_Hair.num += 1
        //飛機有最多100個
        if (ObJ_Hair.num >= 100) {
            ObJ_Hair.num = 0;
        }
    }

    //生成從minNum到maxNum的隨機數
    function randomNum(minNum, maxNum) {
        return parseInt(Math.random() * (maxNum - minNum + 1) + minNum)

    }

總結

BUG 有點多 效果可以實現 有點卡頓 等我調試 調試 大戰BUG

JavaScript—飛機大戰