最近微信的飞机大战非常流行，下载量非常高。

利用JS进行模拟制作了一个简单的飞机大战[此源码有很多地方可以进行重构和优化]

[此游戏中没有使用HTML5 任何浏览器都可以运行]。

效果图：

原理：利用javascript setInterval函数不停的进行元素位置的切换和添加飞机子弹，在飞机和子弹的运动中进行位置

检测，进行子弹和飞机的消失。

1、添加飞机

setInterval(function () {var flyDiv = $('<div class="flyDiv"></div>');flyDiv.css({left: Math.random() * 578, top: -22});flyDiv.appendTo(main);}, 3000);

2、添加子弹

    setInterval(function () {var flyZ = $('<span class="z"></span>');var l = m.offset().left + 23, t = m.offset().top;flyZ.css({left: l, top: t});flyZ.appendTo(main);}, 600);

3、飞机的运动

setInterval(function () {var allDiv = main.find('div'), allZ = main.find('span');for (var i = 0; i < allDiv.length; i++) {var f = $(allDiv[i]);var nowTop = f.offset().top;nowTop += 10;f.css({top: nowTop});for (var j = 0; j < allZ.length; j++) {var z = $(allZ[j]);if (testColl(z.offset().left, z.offset().top, z.width(), z.height(),f.offset().left, f.offset().top, f.width(), f.height())) {z.remove();f.remove();sum.text(parseInt(sum.text()) + 1);}}if (nowTop + 22 >= 400) {f.remove();}}}, 60);
4、子弹的运动
    setInterval(function () {var allZ = main.find('span'),allDiv = main.find('div');for (var i = 0; i < allZ.length; i++) {var z = $(allZ[i]);var nowTop = z.offset().top;nowTop -= 10;z.css({top: nowTop});for (var j = 0; j < allDiv.length; j++) {var f = $(allDiv[j]);if (testColl(z.offset().left, z.offset().top, z.width(), z.height(),f.offset().left, f.offset().top, f.width(), f.height())) {z.remove();f.remove();sum.text(parseInt(sum.text()) + 1);}}if (nowTop + 22 <= 0) {z.remove();}}}, 60);

5、碰撞检测

function testColl(x1, y1, w1, h1, x2, y2, w2, h2) {var l1 = x1;var r1 = x1 + w1;var t1 = y1;var b1 = y1 + h1;var l2 = x2;var r2 = x2 + w2;var t2 = y2;var b2 = y2 + h2;if (r1 < l2 || l1 > r2 || b1 < t2 || t1 > b2) {return false;}else {return true;}}

【完整源码】

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"/>
    <title> new document </title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
 
        #main {
            width: 600px;
            height: 400px;
            border: solid 1px #000;
            background: #cccccc;
        }
 
        .flyDiv {
            width: 20px;
            height: 20px;
            background: red;
            position: absolute;
        }
 
        .z {
            display: block;
            width: 4px;
            background: #000000;
            height: 10px;
            position: absolute;
            top: 390px;
        }
 
        .m {
            width: 50px;
            height: 50px;
            background: #000000;
            position: absolute;
            top: 345px;
            left: 275px;
        }
    </style>
</head>
 
<body>
<!-- html :begin -->
<div id="main"></div>
<div class="m" id="m"></div>
<div>
    打击飞机数：<label id="sum">0</label>
</div>
<!-- html :end -->
</body>
<script src="js/jquery-1.10.2.min.js"></script>
<script>
    $(document).ready(function () {
        var main = $('#main'),
                m = $('#m'),
                sum = $('#sum');
        $(document).on('keydown', function (ev) {
            var oEvent = ev || window.event;
            var l = m.offset().left,
                    t = m.offset().top;
            switch (oEvent.keyCode) {
                case 37:
                    if (l >= 0) {
                        l -= 12;
                    }
                    break;
                /*    case 38:
                 if (t >= 0) {
                 t -= 2;
                 }
                 break;*/
                case 39:
                    if (!(l + 50 > 600)) {
                        l += 12;
                    }
                    break;
                case 40:
                    if (!(t + 50 > 400)) {
                        t += 12;
                    }
                    break;
            }
            m.css({left: l, top: t});
        });
        setInterval(function () {
            var flyDiv = $('<div class="flyDiv"></div>');
            flyDiv.css({left: Math.random() * 578, top: -22});
            flyDiv.appendTo(main);
        }, 3000);
 
        setInterval(function () {
            var allDiv = main.find('div'), allZ = main.find('span');
            for (var i = 0; i < allDiv.length; i++) {
                var f = $(allDiv[i]);
                var nowTop = f.offset().top;
                nowTop += 10;
                f.css({top: nowTop});
                for (var j = 0; j < allZ.length; j++) {
                    var z = $(allZ[j]);
                    if (testColl(
                            z.offset().left, z.offset().top, z.width(), z.height(),
                            f.offset().left, f.offset().top, f.width(), f.height()
                    )) {
                        z.remove();
                        f.remove();
                        sum.text(parseInt(sum.text()) + 1);
                    }
                }
                if (nowTop + 22 >= 400) {
                    f.remove();
                }
            }
        }, 60);
 
        setInterval(function () {
            var flyZ = $('<span class="z"></span>');
            var l = m.offset().left + 23, t = m.offset().top;
            flyZ.css({left: l, top: t});
            flyZ.appendTo(main);
        }, 600);
 
        setInterval(function () {
            var allZ = main.find('span'),
                    allDiv = main.find('div');
            for (var i = 0; i < allZ.length; i++) {
                var z = $(allZ[i]);
                var nowTop = z.offset().top;
                nowTop -= 10;
                z.css({top: nowTop});
 
                for (var j = 0; j < allDiv.length; j++) {
                    var f = $(allDiv[j]);
                    if (testColl(
                            z.offset().left, z.offset().top, z.width(), z.height(),
                            f.offset().left, f.offset().top, f.width(), f.height()
                    )) {
                        z.remove();
                        f.remove();
                        sum.text(parseInt(sum.text()) + 1);
                    }
                }
                if (nowTop + 22 <= 0) {
                    z.remove();
                }
            }
 
        }, 60);
 
        function testColl(x1, y1, w1, h1, x2, y2, w2, h2) {
            var l1 = x1;
            var r1 = x1 + w1;
            var t1 = y1;
            var b1 = y1 + h1;
 
            var l2 = x2;
            var r2 = x2 + w2;
            var t2 = y2;
            var b2 = y2 + h2;
 
            if (r1 < l2 || l1 > r2 || b1 < t2 || t1 > b2) {
                return false;
            }
            else {
                return true;
            }
        }
    });
</script>
 
</html>

转载于:https://www.cnblogs.com/tom-zhu/p/3251143.html

用Javascript模拟微信飞机大战游戏相关推荐

  1. cocos2dx一仿微信飞机大战游戏实战一

    学习cocos2dx的新手教程实例,简单做个打飞机的小游戏,嗯,先运行看看游戏的效果: 下面我们就开始编写吧,首先我们要解决的几个问题是这个游戏的设计思路,微信的飞机大战游戏,有几个技术点,一是游戏背 ...

  2. JavaScript趣味编程--仿微信飞机大战游戏--1.画飞机

    之前的文章已经介绍了如何使用canvas来画正方形,这次介绍如何使用canvas来画一张图片. 1.新建项目 本次使用的工具Aptana Studio 3,打开软件之后,选择File->New- ...

  3. python代码示例500行源代码-500行代码使用python写个微信小游戏飞机大战游戏

    这几天在重温微信小游戏的飞机大战,玩着玩着就在思考人生了,这飞机大战怎么就可以做的那么好,操作简单,简单上手. 帮助蹲厕族.YP族.饭圈女孩在无聊之余可以有一样东西让他们振作起来!让他们的左手 / 右 ...

  4. c 语言500行小游戏代码,500行代码使用python写个微信小游戏飞机大战游戏.pdf

    500行行代代码码使使用用python写写个个微微信信小小游游戏戏飞飞机机大大战战游游戏戏 这篇文章主要介绍了500行代码使用python写个微信小游戏飞机大战游戏,本文通过实例代码给大家介绍的非常详 ...

  5. 【C语言游戏】微信飞机大战 | PlaneFight（EasyX，drawAlpha绘制透明贴图，计时器，计帧器，游戏难度自动调整，接受鼠标消息，源码素材免费分享）

    一.数据结构介绍 struct aircraft //所有飞机的结构体 typedef struct aircraft{ int type;//飞机类型 int HP;//剩余血量 int bomb_ ...

  6. python飞机大战游戏素材_python实现飞机大战微信小游戏

    0.前言 我学一种语言,可以说学任何东西都喜欢自己动手实践,总感觉自己动手一遍,就可以理解的更透彻,学python也一样,自己动手写代码,但更喜欢做点小东西出来,一边玩一边学.下面我就展示一下我最近做 ...

  7. 基于Java的飞机大战游戏的设计与实现(含源文件)

    欢迎添加微信互相交流学习哦! 项目源码:https://gitee.com/oklongmm/biye 基于Java的飞机大战游戏的设计与实现 摘   要 现如今,随着智能手机的兴起与普及,加上4G( ...

  8. python做飞机大战游戏_python实现飞机大战游戏

    飞机大战(Python)代码分为两个python文件,工具类和主类,需要安装pygame模块,能完美运行(网上好多不完整的,调试得心累.实现出来,成就感还是满满的),如图所示: 完整代码如下: 1.工 ...

  9. 鸿蒙开发实例 | ArkUI JS飞机大战游戏开发

    本篇介绍使用ArkUI JS框架开发一款基于鸿蒙操作系统的飞机大战游戏.这款飞机大战游戏是在普通单机游戏的基础上添加了鸿蒙操作系统分布式支持,使游戏可以同时使用多台鸿蒙操作系统设备,为游戏玩家提供分布 ...

最新文章

  1. 掌握这几种 Markdown 语法你就够了
  2. 用户请求队列化_分布式消息队列选型分析
  3. 模拟赛-20190228-随机数（random）
  4. 《觉建筑》《斑点狗眼里的世界》首发式
  5. LeetCode 6034. 数组的三角和
  6. rpm-tree源码分析一波
  7. Nginx学习总结（12）——Nginx各项配置总结
  8. elasticsearch中的API
  9. 【报告分享】二次元衍生创作行业报告.pdf（附下载链接）
  10. BlocksKit源码分析（一）
  11. mybatis中的#{}与${}在原理上的区别
  12. 深度学习 --- 优化入门六（正则化、参数范数惩罚L0、L1、L2、Dropout）
  13. papervision3D官方文档CHM格式.
  14. php 横杠箭头,为什么我的箭头下面有一横线？
  15. Element Dialog弹框回到顶部
  16. Ubuntu下使用date显示毫秒级
  17. 新能源车牌识别算法，助力车牌识别核心升级
  18. IDEA使用教程之创建一个工程(一)
  19. My97datepicker时间控件的简单使用
  20. 兜兜转转躲不命运轮回---Java基础学习笔记1

热门文章

  1. influxdb tsm文件_利用InfluxDB+Grafana搭建Flink on YARN作业监控大屏
  2. rocketmq 消息指定_RocketMq 实际案例–普通消息的发送
  3. HTML从入门到进阶修炼
  4. 手绘线条一直画不直_我学素描,线条画不直怎么办啊?
  5. q3c 更换q3x 需要重置硬盘吗_轻松拓展你的游戏库 西部数据WD_BLACK D10 游戏专用硬盘评测...
  6. redis 的一主二从三哨兵模式
  7. BZOJ 1833 ZJOI2010 count 数字计数 数位DP
  8. Java记录 -24- equals方法重写
  9. 将页面多个下拉框的值以字符串拼接方式存放至数据库一个字段中
  10. [转]孙鑫VC教程例子代码1---Windows程序内部运行原理