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

最新推荐文章于 2022-05-09 22:24:03 发布
最新推荐文章于 2022-05-09 22:24:03 发布
阅读量357 收藏
点赞数
文章标签： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：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
关注
JavaScript实现飞机大战
编程界明世隐的博客
08-04 3万+
系列目录 1. JavaScript 贪吃蛇游戏 2. JavaScript 俄罗斯方块 3. JavaScript 扫雷小游戏 4. JavaScript 网红太空人表盘 引言： 之前我有用Java写过一个飞机大战，感觉挺受欢迎的，有的小伙伴想用Javasript写，我这次就按我的思路写了一个版本。 实现思路 分2张画布来实现，画布1仅仅用来绘制背景图，画布2用来绘制游戏相关的动态内容。 创建我方飞机 定时创建敌机 开启主线程，用来刷新画布2. 代码实现 编写页面 <!DOCTYPE html&
原生JS --飞机大战
风如刀割的博客
12-16 349
闲时 3小时制作飞机大战，可以自己调整参数进行游戏， 整体分为4大类，地图，飞机，敌人，子弹，代码如下 <!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="UTF-8"> <metaname="viewport"content="width=device-width,initial-scale=1.0"> <title>飞机...
原生JS简单版飞机大战游戏
11-07
原生JS简单版飞机大战游戏
原生js飞机大战
Kobe Bryant
08-02 750
前言： 很早就想写一个休闲小游戏了，今天突然心血来潮，所以写了一个飞机大战的小游戏，代码很简单，接下来就开始上代码了. 我们首先来看一下我们的层级结构： 如图所示： audio文件下面的是我们所需要的游戏音频，可以自行添加，也可不添加。 main.css 代码如下： /* * @Author: Marte * @Date: 2018-06-07 11:33:08 * @Last Modifi...
JavaScript制作简易的《飞机大战》
qq_46568518的博客
05-09 1198
JavaScript 碰撞检测 飞机大战
基于原生JavaScript实现的扫雷小游戏.zip
最新发布
10-23
基于原生JavaScript实现的扫雷小游戏 基于原生JavaScript实现的扫雷小游戏 基于原生JavaScript实现的扫雷小游戏 基于原生JavaScript实现的扫雷小游戏 基于原生JavaScript实现的扫雷小游戏 基于原生JavaScript实现的...
原生js写的飞机大战游戏
08-10
《原生JS实现的“飞机大战”游戏解析》 在当今的互联网世界中，JavaScript作为浏览器端最常用的语言，其应用领域已经从网页交互扩展到了游戏开发。本篇将深入探讨一个完全用原生JavaScript编写的“飞机大战”游戏，...
原生JavaScript飞机大战
08-21
游戏循环是游戏动态效果的基础，飞机大战中的游戏循环通常使用`setInterval`函数来实现，每隔一定时间更新游戏状态，如飞机的位置、子弹的发射等。同时，为了保证游戏的流畅性，开发者还需要考虑性能优化，避免不必...
JavaScript原生编写《飞机大战坦克》游戏完整实例
11-27
在本实例中，我们探讨如何使用JavaScript原生代码来创建一个名为《飞机大战坦克》的简单游戏。这个游戏的实现思路如下： 1. **背景动画**：页面加载后，背景图像开始移动，为游戏营造出动态的环境。这可以通过在...
原生JavaScript实现植物大战僵尸游戏
02-07
原生JavaScript实现植物大战僵尸游戏。精品资源，请下载。 /* fp8文件是应用世界上压缩率最高的paq压缩算法的FastPAQ压缩软件的专有格式，你可在CSDN上下载【FastPAQ--世界最强压缩软件下载】以解压fp8文件*/
JS实现飞机大战
06-28
html+css基本框架得搭建，定时器，方法，对象，基本循环语句实现简单的飞机大战
javascript实现飞机大战
01-02
打开html中的start界面开始运行，我方飞机发射子弹攻击敌机，我方飞机可上下左右移动，敌方飞机有小飞机，中飞机，大飞机；一共有5滴血，血量消耗完了之后，游戏结束，有飞机碰撞效果，碰撞期间不掉血，可以暂停游戏——出处（知了堂期末大作业）
js实现飞机大战小游戏
10-14
主要为大家详细介绍了js实现飞机大战小游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
js原生飞机大战源码
11-27
纯js原生代码飞机大战。
飞机大战游戏(html+css3+js)
11-06
技术采用html,css3,js，编写出来的一个小游戏，适合前端初学者。
（飞机大战小游戏）如何用原生JS写飞机大战小游戏？
zfy980829的博客
07-20 353
今天给大家分享一个飞机大战小游戏代码，不废话直接上代码 <div> <canvas id="myCanvas" width="480" height="650"></canvas> </div> 先是canvas画布然后样式，让他居中 <style> div{ margin: 0 auto; text-align: center; }
原生 JS 实现飞机大战小游戏
qq_43542074的博客
07-26 692
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title> 飞机大战 </title> <style type="text/css"&...
原生JS实现飞机大战小游戏
Mr_mingr的博客
03-17 1360
原生js实现飞机大战小游戏 废话不多说我们直接开始吧 首先是最基础的html结构，三个小飞机图来表示己方剩余的血量，剩下的css样式自己设置即可。 设置成这样就可以了 //先创建一个游戏引擎 var Engine = { //刚开始的游戏状态 gameStatus: false, //所有敌机 enemy: {}, //子弹 bullet: {...
原生JavaScript实现的金山打字小游戏实例与代码解析
本文将详细介绍如何使用原生JavaScript实现一款简易版的金山打字小游戏。作者通过实例代码展示了游戏的核心逻辑，包括计分系统、字母对象管理以及游戏流程控制。以下是一些关键知识点： 1. **计分系统**： - 游戏...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值