飞机大战源码

最新推荐文章于 2024-12-03 09:10:57 发布
转载 最新推荐文章于 2024-12-03 09:10:57 发布 · 168 阅读 · 0 ·
本内容遵循CC 4.0 BY-SA版权协议
原文链接：https://blog.csdn.net/qq_44731019/article/details/123060341
标签
#html #前端 #css #javascript

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

    <style>

    * {

        margin: 0;

        padding: 0;

    }

    body {

        background: #cccccc;

        height: 100%;

    }

    #wrap {

        position: relative;

        width: 540px;

        height: 960px;

        margin: 20px auto;

        border: 1px solid transparent;

        background: url('img/bg.jpg') center/cover;

    }

    #wrap h1 {

        color: azure;

        text-align: center;

        padding: 30px;

    }

    .option {

        width: 200px;

        height: 110px;

        line-height: 110px;

        font-size: 30px;

        color: steelblue;

        background: wheat;

        font-weight: bold;

        margin: 20px auto;

        text-align: center;

        cursor: pointer;

        background: url(./img/fire-row.png) no-repeat center -10px/ 90% auto ;

    }

    .footer {

        position: absolute;

        right: 0;

        bottom: 0;

        font-size: 20px;

        color: #fff;

    }

    /* enemy 敌机定位 */

    .enemy {

        position: absolute;

    }

    /* 血条 */

    .blood {

        position: absolute;

        left: 0;

        right: 0;

        top: -6px;

        margin: 0 auto;

        width: 70%;

        height: 2px;

        border-radius: 2px;

        /* border: 1px solid red; */

    }

    .blood p {

        height: 100%;

        /* background: red; */

    }

    /* 小飞机 */

    .small {

        width: 50px;

    }

    img:not(.boom) {

        width: 100%;

        height: 100%;

    }

    /* 大飞机 */

    .big {

        width: 60px;

    }

    .big .blood {

        position: absolute;

        left: 0;

        right: 0;

        top: -10px;

        margin: 0 auto;

        height: 4px;

        border-radius: unset;

    }

    .blood p {

        height: 100%;

        /* background: red; */

    }

    /* 我军 */

    .plane {

        position: absolute;

    }

    .plane img{

        transform: rotate(270deg);

    }

    .plane.small {

        width: 80px;

    }

    .plane.big {

        width: 100px;

    }

    .biu {

        position: absolute;

    }

    .biu.strong1 {

        width: 26px;

        height: 26px;

    }

    .biu.strong2 {

        width: 20px;

        height: 20px;

    }

    /* 爆炸图片 */

    img.boom {

        position: absolute;

        animation: opa 1s;

    }

    @keyframes opa {

        0% {

            opacity: 1;

        }

        25% {

            opacity: 0.5;

        }

        50% {

            opacity: 1;

        }

        100% {

            opacity: 0;

        }

    }

    /* prize */

    .prize {

        position: absolute;

        width: 50px;

        height: 50px;

        font-size: 50px;

        text-align: center;

        line-height: 50px;

        border: 1px dashed red;

        color: red;

        font-weight: bold;

        animation: prize 1s infinite;

    }

    @keyframes prize {

        0% {

            transform: scale(1);

        }

        50% {

            transform: scale(1.2);

        }

        100% {

            transform: scale(1);

        }

    }

    /* 得分板 */

    .score {

        position: absolute;

        top: 0;

        left: 0;

        width: 70px;

        height: 30px;

        color: #fff;

        font-size: 20px;

    }

    /* 记录得分 */

    .record {

        width: 60%;

        height: 100px;

        margin: 100px auto;

        background: #000;

        padding: 10px;

        border: 4px double #fff;

        color: #fff;

    }

    .record p {

        height: 50px;

        font-size: 40px;

        font-weight: bold;

        text-align: center;

        color: skyblue;

    }

    /* 再来一次 */

    .btn {

        position: absolute;

        bottom: 50px;

        right: 0;

        left: 0;

        margin: auto;

        width: 150px;

        height: 40px;

        text-align: center;

        line-height: 40px;

        color: #fff;

        font-size: 20px;

        font-weight: bold;

        border-radius: 10px;

        background: #000;

        cursor: pointer;

    }

    </style>

</head>

<body onselectstart="return false">

    <div id="wrap">

    </div>

    <script>

    (function() {

        var wrap = document.getElementById("wrap"),

            speedEnemy = [400, 350, 300, 200],

            wrapWidth = wrap.clientWidth,

            wrapHeight = wrap.clientHeight,

            enePlane = document.getElementsByClassName('enemy'),

            plane = document.getElementsByClassName("plane"),

            prize = document.getElementsByClassName('prize'),

            defaultEne = {

                big: {

                    width: 260,

                    height: 200,

                    strong: 5

                },

                small: {

                    width: 108,

                    height: 80,

                    strong: 1

                }

            },

            defaultPlane = {

                big: {

                    width: 97,

                    height: 97,

                    filename: 'plane_1.png'

                },

                small: {

                    width: 122,

                    height: 95,

                    filename: 'plane_0.gif'

                }

            };


 

        init() // 初始化界面

        function init() {

            var optArr = ['简单模式', '一般模式', '困难模式', '地狱模式'];



 

            wrap.innerHTML = "";

            var h1 = document.createElement('h1');

            h1.innerHTML = '飞机大战进化版';

            wrap.appendChild(h1)

            for (var i = 0, len = optArr.length; i < len; i++) {

                var div = document.createElement('div');

                div.className = 'option';

                div.innerHTML = optArr[i];

                div.i = i;

                div.onclick = function(e) {

                    startGame(this.i, e)

                }

                wrap.appendChild(div)

            }

        }


 

        // startGame 开始游戏

        function startGame(idx, e) {

            var mod = ['small', 'big', 'small', 'small'];

            wrap.innerHTML = "";

            wrap.className = 'bg.jpg';

       

            wrap.eneTime = setInterval(function() {

                enemy(idx, mod[randomArea(0, 3)]) //

            }, speedEnemy[idx])

           

            myPlane(e, idx, 'small')

           

            wrap.prizeTime = setInterval(function() {

                createPrize(['爱你', '么么'][randomArea(0, 1)])

            }, 5000);


 

           

            showScore();

           

            var audio = document.createElement('audio');

            audio.src = 'img/game_music.mp3';

            audio.autoplay = true;

            audio.loop = true;

            audio.volume = 0.5;

            wrap.appendChild(audio)

        }



 

        // 创建敌军函数

        function enemy(idx, model) {

           

            var ene = document.createElement('div'),

                bloodBorder = document.createElement('div'),

                blood = document.createElement('p'),

                img = document.createElement('img');

            ene.className = 'enemy ' + model;

           

            ene.model = model;

            bloodBorder.className = 'blood';

            img.src = 'img/enemy_' + model + '.png';

            img.width = defaultEne[model].width;

            img.height = defaultEne[model].height;

           

            ene.style.top = 0;

           

            ene.strong = defaultEne[model].strong;

           

            ene.speed = randomArea(2, 4);

            //

            wrap.appendChild(ene).appendChild(bloodBorder).appendChild(blood);

            ene.appendChild(img)


 

            ene.style.left = randomArea(0, wrapWidth - ene.clientWidth) + "px"




 

            eneLanding(); // 敌机生成结束 开始下降


 

            function eneLanding() {

                ene.style.top = ene.offsetTop + ene.speed + "px";

                if (ene.offsetTop >= wrapHeight - ene.offsetHeight) {

                   

                    wrap.removeChild(ene);

                } else {

                   

                    if (plane[0] && isDuang(plane[0], ene)) {

                        boom(ene);

                       

                        gg();

                    } else {

                        plane[0] && requestAnimationFrame(eneLanding)

                    }


 

                }

            }

        }

        // 创建我军函数

        function myPlane(e, idx, model) {

           

            var maxTop, maxLeft, minLeft;

            var plane = document.createElement('div'),

                img = document.createElement('img');

            img.src = 'img/' + defaultPlane[model].filename;

            img.width = defaultPlane[model].width;

            img.height = defaultPlane[model].height;

            plane.className = "plane " + model;

           

            plane.strong = 0;

           

            plane.count = 0;

            plane.model = model;

            wrap.appendChild(plane).appendChild(img);


 

            img.onload = function() {

                plane.style.top = e.pageY - wrap.offsetTop - plane.clientHeight / 2 + 'px';

                plane.style.left = e.pageX - wrap.offsetLeft - plane.clientWidth / 2 + 'px';


 

               

                maxTop = wrap.clientHeight - plane.offsetHeight,

                    minLeft = -plane.offsetWidth / 2,

                    maxLeft = wrap.clientWidth + minLeft;

            }



 

            document.onmousemove = function(e) {

                var top = e.pageY - wrap.offsetTop - plane.offsetHeight / 2,

                    left = e.pageX - wrap.offsetLeft - plane.offsetWidth / 2;

                top = Math.max(0, top)

                top = Math.min(maxTop, top)

                left = Math.max(minLeft, left)

                left = Math.min(maxLeft, left)

                plane.style.top = top + 'px'

                plane.style.left = left + 'px';

               

                for (var i = 0, len = prize.length; i < len; i++) {

                    if (isDuang(plane, prize[i])) {

                       

                        if (prize[i].attr === '火') {

                           

                            plane.strong++;

                        } else if (prize[i].attr === '风') {

                           

                            plane.count++;

                            if (plane.count > 2) {

                                alert('知足者常乐');

                                gg();

                            }

                        }

                       

                        clearTimeout(prize[i].time)

                        wrap.removeChild(prize[i])

                    }

                }

            };


 

            // 生成子弹

            var speed = [300, 250, 200, 150][idx],

                biuSpd = [4, 5, 6, 7][idx];


 

            var audio = document.createElement('audio');

            audio.loop = true;

            audio.autoplay = true;

            wrap.appendChild(audio)




 

            plane.time = setInterval(function() {

               

                for (var i = 0; i <= plane.count; i++) {

                    Biu({

                        strong: plane.strong,

                        count: plane.count,

                        i: i

                    })

                    audio.src = plane.count > 0 ? 'img/enemy2_out.mp3' : 'img/bullet.mp3';

                }


 

            }, speed)

            function Biu(obj) {

                var biu = document.createElement('img');

                biu.src = 'img/fire.png';

                biu.className = 'biu strong1';

                biu.strong = 1 + plane.strong;

                biu.count = 1 + plane.count;

                wrap.appendChild(biu);

                biu.style.top = plane.offsetTop + 'px';


 

                if (obj.count === 0) {

                   

                    biu.style.left = plane.offsetLeft + plane.offsetWidth / 2 - biu.offsetWidth / 2 + "px";

                } else if (obj.count === 1) {

                   

                    biu.style.left = [plane.offsetLeft, plane.offsetLeft + plane.offsetWidth - biu.offsetWidth][obj.i] + 'px';

                } else if (obj.count === 2) {

                   

                    biu.style.left = [plane.offsetLeft, plane.offsetLeft + plane.offsetWidth / 2 - biu.offsetWidth / 2, plane.offsetLeft + plane.offsetWidth - biu.offsetWidth][obj.i] + 'px';

                }

                runBiu();

                function runBiu() {

                    biu.style.top = biu.offsetTop - biuSpd + "px";

                    if (biu.offsetTop <= 0) {

                        wrap.removeChild(biu);

                    } else {

                       

                        plane.parentNode && (biu.time = requestAnimationFrame(runBiu))

                        for (var i = 0, len = enePlane.length; i < len; i++) {

                            if (enePlane[i] && isDuang(biu, enePlane[i])) {

                                cancelAnimationFrame(biu.time)

                               

                                wrap.removeChild(biu);

                                enePlane[i].strong -= biu.strong;

                               

                                enePlane[i].children[0].children[0].style.width = enePlane[i].strong / defaultEne[enePlane[i].model].strong * enePlane[i].children[0].clientWidth + "px";

                                if (enePlane[i].strong <= 0) {

                                    if (enePlane[i].model === 'small') {

                                        wrap.score++;

                                    } else if (enePlane[i].model === 'big') {

                                        wrap.score += 4;

                                    }

                                    boom(enePlane[i]);

                                    document.getElementsByClassName('score')[0].innerHTML = wrap.score;

                                }


 

                            }

                        }



 

                    }

                }


 

            }

        }

        function boom(obj) {

            var img = document.createElement('img');

            img.src = 'img/boom_' + obj.model + '.png';

            img.width = obj.clientWidth + 10;

            img.height = obj.clientHeight + 10;

            img.className = 'boom';

            img.style.top = obj.offsetTop + "px";

            img.style.left = obj.offsetLeft + "px";


 

            wrap.removeChild(obj);


 

            wrap.appendChild(img);

           

            img.addEventListener('webkitAnimationEnd', function() {

                wrap.removeChild(this)

            })

            var audio = document.createElement('audio');

            audio.loop = false;

            audio.autoplay = true;

            audio.src = obj.className === 'enemy' ? 'img/enemy3_down.mp3' : 'img/game_over.mp3'

            audio.volume = 0.5;

            audio.addEventListener('ended', function() {

                wrap.removeChild(this);

            });

            wrap.appendChild(audio)

        }


 

        function isDuang(obj1, obj2) { // true 碰撞  false 不碰撞

            var top1 = obj1.offsetTop,

                left1 = obj1.offsetLeft,

                right1 = left1 + obj1.offsetWidth,

                bottom1 = top1 + obj1.offsetHeight,

                top2 = obj2.offsetTop,

                left2 = obj2.offsetLeft,

                right2 = left2 + obj2.offsetWidth,

                bottom2 = top2 + obj2.offsetHeight;

            return !(top1 > bottom2 || left1 > right2 || bottom1 < top2 || right1 < left2)

        }


 

       

        function randomArea(a, b) {

            return Math.floor(Math.random() * (b + 1 - a) + a);

        }

        // GG 游戏结束

        function gg() {

            // 注销document的move事件

            document.onmousemove = null;

            // 关闭生产敌军的定时器

            clearInterval(wrap.eneTime)

            // 关闭生成子弹的定时器

            clearInterval(plane[0].time)

            // 清除生成奖品的定时器

            clearInterval(wrap.prizeTime)

            // 我军的爆炸效果 && 删除我军

            boom(plane[0])

            // 统计得分情况

            setTimeout(ggView, 1000)

        }

        //  火 = 增加威力   风 = 增加子弹的条数

        function createPrize(inner) {

            var div = document.createElement('div');

            div.innerHTML = inner;

            div.className = 'prize';

           

            div.attr = inner;

            div.style.top = randomArea(0, wrapHeight - 50) + 'px';

            div.style.left = randomArea(0, wrapWidth - 50) + 'px';

            wrap.appendChild(div);

            div.time = setTimeout(function() {

                wrap.removeChild(div)

            }, 5000)

        }


 

       

        function ggView() {

            // 清屏

            wrap.innerHTML = "";

            // 创建游戏结束画面的两个对象

           

            var div = document.createElement('div'),

                div2 = document.createElement('div');

            div.className = 'record';

            div.innerHTML = "最终得分：<p>" + wrap.score + "</p>"

            div2.className = "btn";

            div2.innerHTML = '再来一次';

            div2.onclick = function() {

                init();

            }

            wrap.appendChild(div)

            wrap.appendChild(div2)


 

        }

        // showScore  初始化开始几分

        function showScore() {

            var span = document.createElement('span');

            span.innerHTML = wrap.score = 0;

            span.className = 'score';

            wrap.appendChild(span);

        }

    })()

    </script>

</body>

</html>

Android飞机大战代码
07-06
Android类似于飞机大战项目的小游戏，对于Android游戏、动画、自定义View的理解有较大帮助。项目导入有任何问题可以私信我。
微信小程序-飞机大战源码.zip
11-23
飞机大战，微信小程序源码，供大家参考学习。里面代码完整导入可用。程序来源于网络本人并没有亲测。希望给需要人的有所帮助。
飞机大战安卓游戏简介以及 GitHub 源码分享
abcnull 的博客
12-09 2397
文章目录IndependentPlaneGameGitHub 地址：[IndependentPlaneGame](https://github.com/abcnull/IndependentPlaneGame)介绍关键代码特色待优化界面 IndependentPlaneGame GitHub 地址：IndependentPlaneGame 介绍 此项目完成比较久远，当初使用 Android Stu...
c语言简单的飞机计分小游戏
逼哥很疯狂的博客
03-20 1673
比较简单的飞机小游戏，直接用C语言即可实现功能，我已经做了较为完整的注释，希望大家可以看得懂，对学C的有所帮助。 #include <stdio.h> #include <stdlib.h> #include <conio.h> //用于抓去键盘输入 #include <Windows.h> //函数外得定义一些全局变量, int p...
Docker--docker ps 命令与结果解析
热门推荐
Tech Station
10-13 2万+
命令详解 意义：列出容器相关信息 格式：docker ps [options] 参数列表： 参数 解释 无参 默认显示正在运行的容器 -a 显示所有的容器，包括未运行的 -f 根据条件过滤.........
JAVA飞机大战游戏附源码
K1534334971的博客
11-12 4474
JAVA飞机大战附源码java飞机大战效果图如下 java飞机大战 话不多说 直接上源码 窗体部分 package UI; //自定义窗体 //创建类 继承JFrame //创建构造方法，设置窗体 import javax.swing.JFrame; public class Gameframe extends JFrame { //构造方法 public Gameframe() { //设置标...
C/C++项目源码——飞机大战
tupijiang的博客
07-20 3004
这是我自己写的一个飞机大战的源码，目前还没有完善，只写了我方飞机和敌方飞机，通过上下左右四个箭头控制我方飞机行动，按空格键，飞机发射子弹。可自行加入其它功能，比如子弹敌机碰撞之后爆炸。下面是我写了的项目源码。 plane.cpp #include "plane.h" Plane::Plane() { } Plane::Plane(int x, int y, char *imgURL, char *imgURLY, int speed) { this->x = x; this-...
C# Winform飞机大战小游戏源码
最新发布
不踩坑，不知道坑有多深；不总结，踩过的坑白踩。
12-03 2368
C# Winform飞机大战小游戏源码，飞机大战小游戏源码，窗体应用程序飞机大战小游戏源码，界面风格干净整洁，内容条理清晰，通过W-A-S-D控制飞机，K键发射子弹，被敌机子弹击中则减少1分并减少1点生命值，若我方子弹击中敌机则增加1分。碰撞检测：当玩家子弹击中敌机后，敌机爆炸，并播放爆炸音效。界面上有两个矩形条，分别表示生命值和得分；当生命值或得分减到0，游戏结束。这个源码让你快速搭建自己的应用程序，注释完整，代码规范，各种风格都有，代码上手简单，代码独立，可以直接用程序打开，运行使用。
飞机大战 C语言面向过程设计
12-13
飞机大战 C语言实现 使用C语言面向过程设计出一个飞机大战，可以发射子弹，敌机随机产生，我放飞机移动，碰撞检测等功能，注释很清晰，适合初学者学着敲。
Android游戏大战飞机源码
10-11
android游戏入门之大战飞机的测试代码，配合我的博客和代码，学习起来还是挺快的。希望我的努力能够帮助你少走一些路。
java版飞机大战源码-android:安卓
06-04
java版飞机大战源码 Android 学习资料收集 收集整理这份资料灵感来自于 , 征得同意引用了该资料的开头描述 收集整理这份资料主要帮助初学者学习 Android 开发, 希望能快速帮助到他们快速入门, 找到适合自己学习资料, 节省再去收集学习资料时间. 这份资料我会不断的更新完善, 同时也欢迎更多具有丰富经验的Android开发者将自己常用的工具、学习资料、学习心得等分享上来, 我将定期筛选合并, 该份学习资料有不足的地方, 也请指出, 我会谦虚接受改正, 希望我能与大家一起来学习, 谢谢. 如果您有任何意见或建议也可以通过或联系我 感谢 与 的大力支持 目录 ============================================================= 书籍 书籍名称 推荐理由 学习 Android 开发, 首先需要 Java 基础, 这里推荐 Thinking In Java, Thinking In Java 是 Java 的经典书籍, 是学习 Java 语言必备书籍 郭霖大神的杰作, 郭神在CSDN中的博客文章非常不错, 书我看了, 非常适合
经典飞机大战资源源码
07-10
实现最基本功能，英雄飞机，Boss飞机和子弹的创建和检测碰撞并销毁。
android飞机大战源码，直接运行即可
06-26
JAVA飞机大战源码，自己初学Android时候写的，直接在eclipse运行就能跑起来
《飞机大战》安卓游戏开发源码(终)
qweqwe
12-01 595
本文章属于原创性文章，珍惜他人劳动成果，转载请注明出处： http://www.pm-road.com/index.php/2014/11/11/180/   前言：最 近闲来无事，而且也是因为刚接触安卓不久，所以萌生了以后在开发web 项目的过程中同样开发安卓手游，因前一段时间项目需要独立完成了一款功能型手机app ，该App比较简单，全是按钮操作，也就是Activity之间的相互传值与...
《飞机大战》安卓游戏开发源码(四)
qweqwe
11-26 361
本文章属于原创性文章，珍惜他人劳动成果，转载请注明出处： http://www.pm-road.com/index.php/2014/11/06/169/   前言：最 近闲来无事，而且也是因为刚接触安卓不久，所以萌生了以后在开发web 项目的过程中同样开发安卓手游，因前一段时间项目需要独立完成了一款功能型手机app ，该App比较简单，全是按钮操作，也就是Activity之间的相互传值与过...
飞机大战源代码
weixin_45641052的博客
08-21 1872
一款飞机大战游戏
安卓飞机大战源码,面向对象思想,多线程,包含注释.接口等运用
WooSpirit的博客
04-14 1138
安卓飞机大战源码,面向对象思想,多线程,包含注释. 最近闲来无事看看安卓的api做一个飞机大战. 本代码无偿开源. 如有转发需声明作者:吴年和. 图片与声音我就提供了. package com.example.planebigwar.entity; import android.content.Context; import android.content.res.Resources; impo...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值