JavaScript实现飞机大战小游戏

最新推荐文章于 2024-05-05 21:20:57 发布
最新推荐文章于 2024-05-05 21:20:57 发布
阅读量6.5k 收藏 16
点赞数 2
文章标签： 山月剧明哥 JS飞机大战游戏 游戏 学习案例 前端有趣的案例
本文为明哥原创文章，未经本文博主允许不得转载，否则将追究法律责任
本文链接：https://blog.csdn.net/weixin_40845165/article/details/123646832
版权

效果图：

素材图片如下：

 

源码如下： 

<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>JavaScript飞机大战游戏</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .big {
            width: 500px;
            height: 700px;
            background: deepskyblue;
            position: absolute;
            overflow: hidden;
            left: 774px;
        }

        .small {
            width: 50px;
            height: 50px;
            position: absolute;
            top: 650px;
            left: 225px;
            margin-bottom: 0;
        }

        #zd_1 {
            position: absolute;
            top: 618px;
            left: 234px;
            display: none;
        }

        #zd_2 {
            position: absolute;
            top: 618px;
            left: 234px;
            display: none;
        }

        #zd_3 {
            position: absolute;
            top: 618px;
            left: 234px;
            display: none;
        }

        #zd_4 {
            position: absolute;
            top: 618px;
            left: 234px;
            display: none;
        }

        #zdj_1 {
            position: absolute;
            top: -32px;
            left: 234px;
            display: none;
        }

        #zdj_2 {
            position: absolute;
            top: -32px;
            left: 234px;
            display: none;
        }

        #zdj_3 {
            position: absolute;
            top: -32px;
            left: 234px;
            display: none;
        }

        #zdj_4 {
            position: absolute;
            top: -32px;
            left: 234px;
            display: none;
        }

        #zdj_5 {
            position: absolute;
            top: -32px;
            left: 234px;
            display: none;
        }

        #zdj_6 {
            position: absolute;
            top: -32px;
            left: 234px;
            display: none;
        }

        #zdj_7 {
            position: absolute;
            top: -32px;
            left: 234px;
            display: none;
        }

        #zdj_8 {
            position: absolute;
            top: -32px;
            left: 234px;
            display: none;
        }

        #start {
            width: 140px;
            height: 40px;
            background: #31ff00;
            position: absolute;
            left: 180px;
            top: 518px;
            text-align: center;
            border: 0;
        }

        #start span {
            display: inline-block;
            padding: 10px;

        }

        #score {
            width: 200px;
            height: 30px;
            background: cornflowerblue;
            text-align: center;
            margin-top: 10px;
            position: absolute;

        }

        #A_blood {
            width: 200px;
            height: 35px;
            position: relative;
            margin-top: 40px;
            background: #96ff7d;
            text-align: center;

        }

        #blood {
            width: 200px;
            height: 30px;
            background: red;
            position: relative;
            border-radius: 5px;
            margin-top: 0;
        }

    </style>
    <script>
        window.onload = function () {
            const big = document.getElementById("big");
            const small = document.getElementById("small");
            const zd_1 = document.getElementById("zd_1");
            const zd_2 = document.getElementById("zd_2");
            const zd_3 = document.getElementById("zd_3");
            const zd_4 = document.getElementById("zd_4");
            const blood = document.getElementById("blood");
            const zdj_1 = document.getElementById("zdj_1");
            const zdj_2 = document.getElementById("zdj_2");
            const zdj_3 = document.getElementById("zdj_3");
            const zdj_4 = document.getElementById("zdj_4");
            const zdj_5 = document.getElementById("zdj_5");
            const zdj_6 = document.getElementById("zdj_6");
            const zdj_7 = document.getElementById("zdj_7");
            const zdj_8 = document.getElementById("zdj_8");
            const start = document.getElementById("start");
            const score = document.getElementById("score");
            const A_blood = document.getElementById('A_blood');
            const zdjarr = [zdj_1, zdj_2, zdj_3, zdj_4, zdj_5, zdj_6, zdj_7, zdj_8]


            let zd_speed_1 = 0;
            let zd_speed_2 = 0;
            let zd_speed_3 = 0;
            let zd_speed_4 = 0;
            let first_zdj = 0;
            let second_zdj = 0;
            let third_zdj = 0;
            let four_zdj = 0;
            let five_zdj = 0;
            let six_zdj = 0;
            let seven_zdj = 0;
            let eight_zdj = 0;
            let score_1 = 0;
            let blood_1 = 100;
            let x = 200;          //血量长度
            let big_height = 500;           //子弹频率
            let zdj_height = 1000;             //战斗机频率
            start.onclick = function (event) {
                start.style.display = "none";
                zd_1.style.display = "block";

                let big_left = big.offsetLeft;        //774,大边框距离左边位置
                let big_top = big.offsetTop;         //0
                let speed = 2;
                let zdj_speed = 1;
                let a = event.clientY;              //549
                let b = event.clientX;              //1042
                setInterval(function () {
                    if (a <= (big_top + 675)) {
                        big.onmousemove = function (event) {
                            a = event.clientY;
                            b = event.clientX;
                            small.style.top = a - 25 + 'px';
                            small.style.left = b - big_left - 25 + 'px';
                        }
                    }
                    if (b <= (big_left + 475) || b >= big_left + 25) {
                        big.onmousemove = function (event) {
                            a = event.clientY;
                            b = event.clientX;
                            small.style.top = a - 25 + 'px';
                            small.style.left = b - big_left - 25 + 'px';
                        }
                    }
                    if (a >= (big_top + 675)) {
                        big.onmousemove = null;
                    }
                    if (b >= (big_left + 475) || b < big_left + 25) {
                        big.onmousemove = null;
                    }

                }, 1);
                setInterval(function () {
                    document.onmousemove = function (event) {
                        a = event.clientY;              //549
                        b = event.clientX;
                    }
                }, 1);


                function zidanspeed(obj, zidan_speed_, time) {
                    setTimeout(function () {
                        obj.style.top = small.offsetTop - 32 + 'px';
                        obj.style.left = small.offsetLeft + 9 + 'px';
                        obj.style.display = "block";
                        setInterval(function () {

                            obj.style.top = (obj.offsetTop - speed) + 'px';
                            zidan_speed_++;
                            for (var i = 0; i < zdjarr.length; i++) {
                                if (obj.offsetTop - zdjarr[i].offsetTop < 32 && obj.offsetTop - zdjarr[i].offsetTop >= -16) {
                                    if (obj.offsetLeft - zdjarr[i].offsetLeft < 32 && obj.offsetLeft - zdjarr[i].offsetLeft >= 0) {
                                        zdjarr[i].style.display = "none";
                                        score_1 += 10;
                                        score.innerText = "得分:" + score_1 + '分';
                                    }

                                }
                            }

                            if (zidan_speed_ == big_height) {
                                obj.style.top = small.offsetTop - 32 + 'px';
                                obj.style.left = small.offsetLeft + 9 + 'px';
                                zidan_speed_ = 0;
                                obj.style.display = "block";
                            }
                        }, 0.5);
                    }, time);
                }

                zidanspeed(zd_1, zd_speed_1, 1);
                zidanspeed(zd_2, zd_speed_2, 500);
                zidanspeed(zd_3, zd_speed_3, 1000);
                zidanspeed(zd_4, zd_speed_4, 1500);

                function zdj(obj, zdj_speed_, time) {
                    setTimeout(function () {

                        obj.style.top = (big.offsetTop - 32) + 'px';
                        obj.style.left = Math.floor(Math.random() * 468) + 'px';
                        obj.style.display = "block";
                        setInterval(function () {
                            obj.style.top = (obj.offsetTop + zdj_speed) + 'px';
                            zdj_speed_++;

                            if (small.offsetTop - obj.offsetTop < 32 && small.offsetTop - obj.offsetTop >= -50) {
                                if (obj.offsetLeft - small.offsetLeft < 50 && small.offsetLeft - obj.offsetLeft < 32) {
                                    obj.style.display = "none";
                                    blood.style.width = (x - 20) + "px";
                                    x = x - 20;
                                    score_1 -= 10;
                                    blood_1 -= 10;
                                    A_blood.innerHTML = "当前血量:" + blood_1 + "%";
                                    score.innerText = "得分:" + score_1 + '分';

                                }

                            }


                            if (zdj_speed_ == zdj_height) {
                                obj.style.top = (big.offsetTop - 32) + 'px';
                                obj.style.left = Math.floor(Math.random() * 468) + 'px';
                                zdj_speed_ = 0;
                                obj.style.display = "block";
                            }
                        }, 1)
                    }, time);
                }

                zdj(zdj_1, first_zdj, 1);
                zdj(zdj_3, third_zdj, 1000);
                zdj(zdj_2, second_zdj, 1500);
                zdj(zdj_4, four_zdj, 500);
                zdj(zdj_5, five_zdj, 2000);
                zdj(zdj_6, six_zdj, 2500);
                zdj(zdj_7, seven_zdj, 3000);
                zdj(zdj_8, eight_zdj, 3500);
            }
        }
    </script>
</head>
<body>

<div class="big" id="big">
    <div id="score">得分:0</div>
    <div id="A_blood">当前血量:100%
    </div>
    <div id="blood"></div>
    <button id="start"><span>开始游戏</span></button>
    <img src="img/plane.png" class="small" id="small">

    <img src="img/zidan.png" id="zd_1">
    <img src="img/zidan.png" id="zd_2">
    <img src="img/zidan.png" id="zd_3">
    <img src="img/zidan.png" id="zd_4">
    <img src="img/zdj.png" id="zdj_1">
    <img src="img/zdj.png" id="zdj_2">
    <img src="img/zdj.png" id="zdj_3">
    <img src="img/zdj.png" id="zdj_4">
    <img src="img/zdj.png" id="zdj_5">
    <img src="img/zdj.png" id="zdj_6">
    <img src="img/zdj.png" id="zdj_7">
    <img src="img/zdj.png" id="zdj_8">
</div>
</body>
</html>

讲台催眠师明哥
关注
  • 2
    点赞
  • 踩
  • 16
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
飞机大战游戏.rar
07-25
使用JavaScript，HTML，CSS编写的网页飞机大战小游戏。我使用Hbuilder来编写的。
js实现飞机大战小游戏
10-14
在本文中，我们将探讨如何使用JavaScript（js）来实现一个简单的飞机大战小游戏。这个小游戏涉及到基础的HTML结构、CSS样式以及JavaScript编程，用于控制游戏逻辑和用户交互。让我们逐一分析这些关键知识点。 首先...
用 JavaScript 写一个小游戏打飞机
m0_62241283的博客
08-03 1544
以上就是 基于 js 制作一个飞机大战，不懂得也可以在评论区里问我或私聊我询问，以后会持续发布一些新的功能，敬请关注。
HTML+CSS+JS制作【飞机大战】小游戏（键盘版和鼠标版）
LuWeien的博客
12-27 3738
需要代码的小伙伴可以在文章末尾自行下载，下载打开运行在浏览器即可游戏，本篇资源分享分为两个版本，一个是键盘版本（awsd移动和k攻击），一个是鼠标移动版。
JavaScript实现飞机大战
最新发布
2401_84094620的博客
05-05 822
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！
js小游戏
qq_53489791的博客
09-13 1211
canvas ，js 实现一个简单的飞机大战 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
基于JavaScript实现飞机大战小游戏【100013176】
08-11
​ 本项目是一个集休闲娱乐、互动交友、丰富生活等诸多元素与一身的消除类游戏。界面简洁流畅，游戏方式简单，玩家易于上手。本游戏 Block 空格开始， 操作简易，使用和控制英雄机的移动。击毁飞行物会得到相应分数...
javascript实现飞机大战
01-02
打开html中的start界面开始运行，我方飞机发射子弹攻击敌机，我方飞机可上下左右移动，敌方...一共有5滴血，血量消耗完了之后，游戏结束，有飞机碰撞效果，碰撞期间不掉血，可以暂停游戏——出处（知了堂期末大作业）
canvas 飞机大战小游戏
01-19
canvas 飞机大战小游戏
HTML5全民飞机大战小游戏
01-28
HTML5全民飞机大战小游戏，使用html+ javascript实现
原生JavaScript飞机大战
08-21
通过原生js实现了经典小游戏飞机大战，实现的功能比较简单，包括积分，开始游戏，暂停游戏和重新开始，比较适合刚学习js的朋友看看，希望能利于提升你的js编程。
js原生飞机大战源码
11-27
纯js原生代码飞机大战。
自作JavaScript飞机大战小游戏
舜岳的博客
03-22 2698
不会canvas画板标签小朋友们的福音来啦，用标签也能制作简单小游戏哦！ 做游戏就要有素材的啦 ，以下是在爱给网找到的素材： 首先3个页面的打开我们用div来做，通过更改div的隐藏属性display: none;与显示display: block来达到页面切换的效果： <body> <div id="home"> <div id="one" style...
（转）使用Three.js制作一个基本的3D飞行游戏
qq_21222737的博客
02-20 2004
今天，我们将使用Three.js创建一个简单的3D飞机，使WebGL更简单。由于GLSL的复杂性和语法，WebGL对许多开发人员来说是一个相当陌生的世界。但是通过Three.js，浏览器中的3D变得非常容易实现。 在本教程中，我们将创建一个简单的3D场景，并在两个主要部分中进行一些交互。 在第一部分，我们将解释Three.js的基础知识，以及如何建立一个非常简单的场景。 第二部分详细介绍了如...
html飞机大战游戏实验报告,JavaScript原生编写《飞机大战坦克》游戏完整实例
weixin_33598481的博客
06-02 974
先来看看开始的界面图实现思路：1.打开页面，背景开始走动；2.点击开始，飞机开始不断发射子弹，敌人随机出现在上方；3.当敌人碰到子弹，敌人消失；4.当敌人和飞机相遇，飞机死亡，结束游戏；html页面飞机大战StartGame Over!重新开始css样式*{margin: 0;padding: 0;font-family: "微软雅黑";}#mainScreen{width: 512px;heig...
html+javascript实现的网页版飞机大战小游戏源码
Python代码大全
12-28 1292
html+javascript实现的网页版飞机大战小游戏源码。
飞机大战html游戏全代码js、jquery操作
热门推荐
十一月廿七风雨大作
03-01 3万+
飞机大战html游戏全代码博主的话运行图片目录路径飞机大战.htmlstyle.css 博主的话 当时博主只会html，css和原生JavaScript，假期用了一周编出来，那个时候的状态就是天天不想睡觉，就想把这个游戏编完。 后来博主开学了，去图书馆借了一本Jquery的书，于是就把原生JavaScript的代码改成了JQ形式。 我会把html文件、css文件提供下载地址，文件夹路径也展示给大...
飞机大战（JavaScript代码）
yanghui07216的博客
06-09 6161
小游戏测试：http://handsomecui.top/feiji.html 代码： * { margin: 0; padding: 0; } #contentdiv { position: absolute; le
代码实现飞机大战小游戏
08-05
我很抱歉，我是一名语言模型，无法编写代码。但是，可以告诉您使用HTML、JavaScript、Pixi.js、jQuery和Ajax编写飞机大战小游戏的基本步骤。首先您需要设计游戏画面和游戏规则，然后使用HTML创建游戏界面，再通过JavaScript编写游戏逻辑，利用Pixi.js绘制游戏图形，使用jQuery处理用户输入，最后通过Ajax与服务器交互，在实现游戏过程中添加一些音效和动画效果会更加生动有趣。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

讲台催眠师明哥

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值