原生js实现飞机大战小游戏（初版），后面会更新改进

最新推荐文章于 2022-12-27 16:54:11 发布

DXL131795

最新推荐文章于 2022-12-27 16:54:11 发布

阅读量315

点赞数

文章标签： js

本文链接：https://blog.csdn.net/dxl131795/article/details/108188199

版权

工作中基本用框架过多，原生的js可能接触的较少了，最近个人想复习一下这些原生的写法。后期会写一些案例。掌握这些基础的东西，这些可以让你知其然，也能知其所以然。
本次案例是一个飞机大战小游戏。（以前写的东西不是很成熟，最近有时间，我会改进一下写法）

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
            list-style: none;
            border: none;
            text-decoration: none;
        }

        .zidan {
            width: 5px;
            height: 20px;
            border-radius: 50%;
            background: orange;
            position: absolute;
        }

        .diji {
            width: 60px;
            height: 60px;
            background: url(img/战机.png)no-repeat center center/100% 100%;
            position: absolute;
        }

        .dijizidan {
            width: 5px;
            height: 20px;
            border-radius: 50%;
            background: red;
            position: absolute;
        }
    </style>
</head>

<body>
    <div id="contain"
        style="width: 100%;height:100vh;margin: 0 auto;overflow: hidden;background: url(img/飞机大战背景.jpg)no-repeat center center/100% 100%;">
        <div id="score"
            style="width: 160px;height: 40px;position: absolute;text-align: center;line-height: 40px; color: red;font-size: 18px;-webkit-user-select: none;">
            得分：0 分</div>

        <div id="demo"
            style="width: 100px;height: 100px;background: url(img/战机二代.png)no-repeat center center/100% 100%;position: absolute;top: 400px;left: calc(50% - 50px);">
        </div>
    </div>
    <script type="text/javascript">



        var totalscore = 0
        var score = document.getElementById("score")
        var demo = document.getElementById("demo")
        var contain = document.getElementById("contain")
        var endtime = new Date() //记录第一次点击事件（前一次）
        var flag = false
        var x = 0
        var y = 0
        demo.onmousedown = function (e) {
            flag = true
            x = e.pageX - demo.offsetLeft
            y = e.pageY - demo.offsetTop
        }
        window.onmouseup = function () {
            flag = false
        }
        window.onblur = function () {
            flag = false
        }

        window.onmousemove = function (e) {
            if (flag) {
                var xx = e.pageX - x
                var yy = e.pageY - y
                if (yy < contain.offsetTop) {
                    yy = contain.offsetTop
                }
                if ((yy + demo.offsetHeight) > (contain.offsetTop + contain.offsetHeight)) {
                    yy = contain.offsetTop + contain.offsetHeight - demo.offsetHeight
                }
                if (xx < contain.offsetLeft) {
                    xx = contain.offsetLeft
                }
                if ((xx + demo.offsetWidth) > (contain.offsetLeft + contain.offsetWidth)) {
                    xx = contain.offsetLeft + contain.offsetWidth - demo.offsetWidth
                }
                demo.style["left"] = xx + "px"
                demo.style["top"] = yy + "px"
            }
        }


        var canMove = false//定义一个全局变量，控制是否可以移动
        window.onkeydown = function (e) {
            if (e.key.toUpperCase() == " ") {
                canMove = !canMove
                if (canMove) {

                    buduancanshengdiji = setInterval(heater, 1500)//按下空格控制能否移动，能否自动发子弹,敌机是否产生
                    buduancanshengzidan = setInterval(shoot, 500) //按下空格控制能否移动，能否自动发子弹
                }
                else {
                    zidanjiatimer.forEach(function (item) {
                        clearInterval(item.timer)
                    })//清除已经出现的战机子弹timer
                    dijizidanjiatimer.forEach(function (item) {
                        clearInterval(item.timer)
                    })//清除已经出现的敌机的子弹timer
                    dijijiatimer.forEach(function (item) {
                        clearInterval(item.timer)
                    })//清除已经出现的敌机的timer
                    clearInterval(buduancanshengdiji)//不再产生敌机
                    buduancanshengdiji = null
                    clearInterval(buduancanshengzidan)//不再产生敌机子弹
                    buduancanshengzidan = null
                }
            }
            if (canMove) {

                switch (e.key.toUpperCase()) {
                    case "W":
                        demo.style.top = (demo.offsetTop - 20) + "px"
                        if (demo.offsetTop < contain.offsetTop) {
                            demo.style["top"] = contain.offsetTop + "px"
                        }

                        break;
                    case "S":
                        demo.style.top = (demo.offsetTop + 20) + "px"
                        if ((demo.offsetTop + demo.offsetHeight) > (contain.offsetTop + contain.offsetHeight)) {
                            demo.style["top"] = contain.offsetTop + contain.offsetHeight - demo.offsetHeight + "px"
                        }

                        break;
                    case "A":
                        demo.style.left = (demo.offsetLeft - 20) + "px"
                        if (demo.offsetLeft < contain.offsetLeft) {
                            demo.style["left"] = contain.offsetLeft + "px"
                        }
                        break;
                    case "D":
                        demo.style.left = (demo.offsetLeft + 20) + "px"

                        if ((demo.offsetLeft + demo.offsetWidth) > (contain.offsetLeft + contain.offsetWidth)) {
                            demo.style["left"] = contain.offsetLeft + contain.offsetWidth - demo.offsetWidth + "px"
                        }
                        break;


                    case "J":
                        if (demo.backgroundImage.contains("url(img/战机二代.png)")) {
                            if (new Date() - endtime > 1000) {
                                shoot()
                                endtime = new Date()
                            }
                        }
                        break;



                    case "K":

                        shoot()
                        break;
                }
            }
        }
        var zidanjiatimer = []//各个战机子弹和对应时间
        var dijizidanjiatimer = []//敌机子弹和对应时间
        var dijijiatimer = []//敌机和对应时间
        var buduancanshengzidan//不断自动产生战机子弹
        var buduancanshengdiji//不断产生敌机和子弹
        //击中敌机
        function success(a, b, c, d) {
            for (var k = 0; k < a.length; k++) {
                if (a[k].zidan === b) {

                    clearInterval(a[k].timer)
                    a[k].timer = null
                }
            }
            for (var z = 0; z < c.length; z++) {
                if (c[z].diji === d) {
                    clearInterval(c[z].timer)
                    c[z].timer = null
                }
            }
            if (b.parentElement) { b.parentElement.removeChild(b) } //碰到的这个敌机被清掉要注意这种情况的重复
            d.parentElement.removeChild(d)
            totalscore += 10
            score.innerHTML = "得分：" + totalscore + " 分"
        }

        //战机被击毁
        function faild(a, b) {
            // demo.style.backgroundImage="url(img/挂了.jpg)"
            // demo.style.transform="rotate(360deg)"

            a.parentElement.removeChild(a)
            clearInterval(b)
            b = null
        }
        var shoot = function () {
            //创建一个子弹
            var zidan = document.createElement("div")
            zidan.classList.add("zidan")
            contain.appendChild(zidan)
            zidan.style["top"] = demo.offsetTop - 20 + "px"
            zidan.style["left"] = demo.offsetLeft + (demo.offsetWidth / 2) - (zidan.offsetWidth / 2) + "px"
            var zidantimer = setInterval(function () {
                zidan.style["top"] = (zidan.offsetTop - 20) + "px"

                if (zidan.offsetTop <= 0) {
                    contain.removeChild(zidan)
                    clearInterval(zidantimer)
                    zidantimer = null
                }

                var cankill = function () {
                    var zidan_list = document.getElementsByClassName("zidan")
                    var diji_list = document.getElementsByClassName("diji")
                    for (var i = 0; i < zidan_list.length; i++) {
                        var zidan = zidan_list[i]
                        for (var j = 0; j < diji_list.length; j++) {
                            var diji = diji_list[j]
                            //判断子弹击中敌机
                            if (zidan.offsetLeft + zidan.offsetWidth >= diji.offsetLeft && zidan.offsetLeft + zidan.offsetWidth <= diji.offsetLeft + diji.offsetWidth && zidan.offsetTop + zidan.offsetHeight >= diji.offsetTop && zidan.offsetTop + zidan.offsetHeight <= diji.offsetTop + diji.offsetHeight) {
                                success(zidanjiatimer, zidan, dijijiatimer, diji)
                            }
                            if (zidan.offsetLeft >= diji.offsetLeft && zidan.offsetLeft <= diji.offsetLeft + diji.offsetWidth && zidan.offsetTop + zidan.offsetHeight >= diji.offsetTop && zidan.offsetTop + zidan.offsetHeight <= diji.offsetTop + diji.offsetHeight && zidan.offsetLeft + zidan.offsetWidth > diji.offsetLeft + diji.offsetWidth) {
                                success(zidanjiatimer, zidan, dijijiatimer, diji)

                            }
                            if (zidan.offsetLeft + zidan.offsetWidth >= diji.offsetLeft && zidan.offsetLeft + zidan.offsetWidth <= diji.offsetLeft + diji.offsetWidth && zidan.offsetTop >= diji.offsetTop && zidan.offsetTop <= diji.offsetTop + diji.offsetHeight) {
                                success(zidanjiatimer, zidan, dijijiatimer, diji)

                            }
                            if (zidan.offsetLeft >= diji.offsetLeft && zidan.offsetLeft <= diji.offsetLeft + diji.offsetWidth && zidan.offsetTop >= diji.offsetTop && zidan.offsetTop <= diji.offsetTop + diji.offsetHeight && zidan.offsetLeft + zidan.offsetWidth > diji.offsetLeft + diji.offsetWidth) {

                                success(zidanjiatimer, zidan, dijijiatimer, diji)
                            }

                        }

                    }



                }
                cankill()
            }, 10)
            zidanjiatimer.push({
                timer: zidantimer,
                zidan: zidan
            })
        }




        

        //创建一个敌机并同时创建一个子弹
        var heater = function () {
            //创建敌机
            var diji = document.createElement("div")
            contain.appendChild(diji)
            diji.classList.add("diji")
            suiji = Math.round(Math.random() * contain.offsetWidth)
            if (suiji < (contain.offsetWidth - diji.offsetWidth)) {
                diji.style["left"] = contain.offsetLeft + suiji + "px"
            }
            var dijitimer = setInterval(function () {

                diji.style["top"] = (diji.offsetTop + 10) + "px"
                //判断
                if (diji.offsetTop > (contain.offsetTop + contain.offsetHeight - diji.offsetHeight)) {
                    diji.parentElement.removeChild(diji)
                    clearInterval(dijitimer)
                    dijitimer = null
                }
                //判断敌机与战机碰撞的情况
                if (diji.offsetLeft + diji.offsetWidth >= demo.offsetLeft && diji.offsetLeft + diji.offsetWidth <= demo.offsetLeft + demo.offsetWidth && diji.offsetTop + diji.offsetHeight >= demo.offsetTop && diji.offsetTop + diji.offsetHeight <= demo.offsetTop + demo.offsetHeight) {
                    faild(diji, dijitimer)
                }
                if (diji.offsetLeft >= demo.offsetLeft && diji.offsetLeft <= demo.offsetLeft + demo.offsetWidth && diji.offsetTop + diji.offsetHeight >= demo.offsetTop && diji.offsetTop + diji.offsetHeight <= demo.offsetTop + demo.offsetHeight) {
                    faild(diji, dijitimer)
                }
                if (diji.offsetLeft + diji.offsetWidth >= demo.offsetLeft && diji.offsetLeft + diji.offsetWidth <= demo.offsetLeft + demo.offsetWidth && diji.offsetTop >= demo.offsetTop && diji.offsetTop <= demo.offsetTop + demo.offsetHeight) {
                    faild(diji, dijitimer)
                }
                if (diji.offsetLeft >= demo.offsetLeft && diji.offsetLeft <= demo.offsetLeft + demo.offsetWidth && diji.offsetTop >= demo.offsetTop && diji.offsetTop <= demo.offsetTop + demo.offsetHeight) {
                    faild(diji, dijitimer)
                }
            }, 100)
            dijijiatimer.push({
                timer: dijitimer,
                diji: diji
            })





            //创建敌机子弹
            var dijizidan = document.createElement("div")
            contain.appendChild(dijizidan)
            dijizidan.classList.add("dijizidan")
            dijizidan.style["top"] = diji.offsetHeight + "px"
            dijizidan.style["left"] = (diji.offsetLeft + diji.offsetWidth / 2 - dijizidan.offsetWidth / 2) + "px"
            var dijizidantimer = setInterval(function () {
                dijizidan.style["top"] = (dijizidan.offsetTop + 20) + "px"
                if (dijizidan.offsetTop > contain.offsetTop + contain.offsetHeight - dijizidan.offsetHeight) {
                    clearInterval(dijizidantimer)
                    dijizidan.parentElement.removeChild(dijizidan)
                    dijizidantimer = null
                }


                //判断敌机子弹击中战机
                if (dijizidan.offsetLeft + dijizidan.offsetWidth >= demo.offsetLeft && dijizidan.offsetLeft + dijizidan.offsetWidth <= demo.offsetLeft + demo.offsetWidth && dijizidan.offsetTop + dijizidan.offsetHeight >= demo.offsetTop && dijizidan.offsetTop + dijizidan.offsetHeight <= demo.offsetTop + demo.offsetHeight) {
                    faild(dijizidan, dijizidantimer)

                }
                if (dijizidan.offsetLeft >= demo.offsetLeft && dijizidan.offsetLeft <= demo.offsetLeft + demo.offsetWidth && dijizidan.offsetTop + dijizidan.offsetHeight >= demo.offsetTop && dijizidan.offsetTop + dijizidan.offsetHeight <= demo.offsetTop + demo.offsetHeight) {
                    faild(dijizidan, dijizidantimer)

                }
                if (dijizidan.offsetLeft + dijizidan.offsetWidth >= demo.offsetLeft && dijizidan.offsetLeft + dijizidan.offsetWidth <= demo.offsetLeft + demo.offsetWidth && dijizidan.offsetTop >= demo.offsetTop && dijizidan.offsetTop <= demo.offsetTop + demo.offsetHeight) {
                    faild(dijizidan, dijizidantimer)

                }
                if (dijizidan.offsetLeft >= demo.offsetLeft && dijizidan.offsetLeft <= demo.offsetLeft + demo.offsetWidth && dijizidan.offsetTop >= demo.offsetTop && dijizidan.offsetTop <= demo.offsetTop + demo.offsetHeight) {
                    faild(dijizidan, dijizidantimer)
                }


            }, 100)//敌机子弹单独设定时器
            dijizidanjiatimer.push({
                timer: dijizidantimer,
                dijizidan: dijizidan
            })
        }





    </script>
</body>

</html>

案例的图片随材都是网上找的，你们可以自己重新找些别的（飞机，敌机，子弹，及游戏背景图，需要自己去找）
游戏案例截图
在这里插入图片描述

DXL131795

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
原生js实现飞机大战小游戏（初版），后面会更新改进

项目中各种框架使用太多，最近想复习一下基础的原生js，借用以前写的案例回顾一些知识点。框架用起来很顺手，但是个人最求往后期深度发展，这些基本的js知识决不能丢掉。后面会出更多的有关js的案例，顺便自己也复习回顾一些东西。本次案例是一个飞机大战小游戏。（以前写的东西不是很成熟，最近有时间，我会改进一下写法）<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></
复制链接

扫一扫