用Javascript模拟微信飞机大战游戏

最新推荐文章于 2024-11-14 10:56:19 发布
最新推荐文章于 2024-11-14 10:56:19 发布
阅读量122 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/tom-zhu/p/3251143.html
版权

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

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

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

效果图：

image

原理：利用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实现微信飞机大战
01-18
使用javascript实现微信飞机大战的案例。。。。。。。
微信飞机大战
07-29
总共写了12个版本，每个版本实现一个功能，有详细分析图，博客：http://blog.csdn.net/qq_24082497/article/details/52061591
微信打飞机html 游戏代码,JavaScript仿微信打飞机游戏
weixin_35767180的博客
05-30 1138
本文实例为大家分享了js微信打飞机游戏的具体代码，供大家参考，具体内容如下首先实现微信打飞机游戏，首先会有自己和敌机，采用canvas绘图来生成自己和敌人。1、生成自己，且可以通过左右键来进行左右移动。//生成自己，且可以左右移动//控制飞机向右移动的函数function moveRight(event){context.clearRect(aligh,100,47,47);//防止飞机移除背景外...
JS+HTML+CSS模仿微信界面发送信息
weixin_44772522的博客
03-14 6630
JS+HTML+CSS仿微信聊天界面 前端新人又来报道咯 欢迎大家指教 功能： 1、点击头像可以模拟切换用户。 2、输入信息，点击发送可以显示在屏幕上。 3、新信息在上方，旧信息在下方，方便有滚动条的时候能直接看到新信息，而不是拖拉滚动条看下面的新内容。 HTML &lt;div id="iphone"&gt; &lt;div id="wrap"&gt; &lt;div i...
JS微信打飞机游戏（一）
wangflood的专栏
08-15 1553
Hit Flyer canvas#mycanvas { position: absolute; margin: auto auto; top: 5px; left: 5px; right: 5px; bottom: 5px; background-color: black; border: 1px solid #d3d3d3; } var mycanvas=
微信小游戏【飞机大战】源码
01-12
微信小游戏“飞机大战”源码是一套用于开发和学习微信小游戏的代码资源，它提供了构建一个简单而有趣的游戏的基础框架。微信小游戏是微信平台上的轻量级游戏应用，用户无需下载安装即可在微信内直接游玩，具有良好的...
jQuery飞机大战游戏
11-03
《jQuery飞机大战游戏》是一款基于JavaScript库jQuery开发的在线射击小游戏。它利用了jQuery的强大功能，结合HTML5的Canvas元素，为用户呈现了一个刺激、趣味的空战场景。本游戏展示了jQuery在网页交互和动画效果...
微信飞机大战Android源码
11-04
通过分析微信飞机大战的Android源码，我们可以学习到如何使用Cocos2d-android进行游戏开发，了解游戏架构设计、资源管理、事件处理等核心知识点，对于提升自己的Android游戏开发能力大有裨益。同时，这也为我们提供...
仿微信飞机大战Demo
03-21
【标题】"仿微信飞机大战Demo"是一款基于Cocos2d-x游戏引擎开发的轻量级游戏示例，旨在帮助初学者快速入门Cocos2d-x的使用。它模仿了微信内置的热门游戏"飞机大战"，展示了如何利用Cocos2d-x构建一个基本的飞行射击...
js通过面向对象方法编写微信飞机大战
qq_42704540的博客
03-19 993
通过面向对象的思想进行编写，主要使用了继承的方法，在编程中要考虑创建的每一个对象都需要包含那些属性。 html页面，代码如下： <body> <div id="content"> <div id="start"> <input type="button" value="开始游戏" id="begin"> </div&gt...
JS中的call()方法和apply()方法用法总结
热门推荐
Hei, Welcome To vickie's Blog，Good Good Study, Day Day Up ~
04-27 18万+
JacvaScript中的call()方法和apply()方法， 1. 每个函数都包含两个非继承而来的方法：call()方法和apply()方法。 2. 相同点：这两个方法的作用是一样的。都是在特定的作用域中调用函数，等于设置函数体内this对象的值，以扩充函数赖以运行的作用域。
跟着尚硅谷学vue2—进阶版2.0—使用 Vue 脚手架1.0
zhzijun的博客
11-13 425
分析脚手架 、ref和props、mixin混入、插件、scoped样式、总结TodoList案例、浏览器本地存储-webStorage、TodoList_本地存储
Vue中的常用指令
m0_62388400的博客
11-12 1184
指令（Directives）是 Vue 提供的带有的 特殊 标签。为啥要学：提高程序员操作 DOM 的效率。vue 中的指令按照不同的用途可以分为如下 6 大类：内容渲染指令（v-html、v-text）条件渲染指令（v-show、v-if、v-else、v-else-if）事件绑定指令（v-on）属性绑定指令 （v-bind）双向绑定指令（v-model）列表渲染指令（v-for）指令是 vue 开发中最基础、最常用、最简单的知识点。
解决@ant-design-vue/nuxt模块加载到许多没用到的组件，影响开发下加载速度的问题
清晰编程
11-12 166
升级命令：npm up @ant-design-vue/nuxt。解决方法：将该模块版本升级到1.4.6。
Javascript中Map与Set以及其常见遍历方式
警警的博客
11-12 764
在JavaScript中，Map和Set是两种非常重要的集合类型，它们提供了比传统对象（Object）和数组（Array）更强大和灵活的数据存储和操作方法。下面是对Map和Set的详细解释。
从零开始快速构建Vue3项目
欧唯薇
11-13 872
是目前最推荐的方式来创建 Vue 3 项目，因为它速度快，配置简洁，并且是 Vue 3 的官方推荐工具。打开浏览器并访问 `http://localhost:5173`，你将看到一个基本的 Vue 3 应用程序运行。1、若需要使用不同版本node（兼容新旧项目环境），则需要使用nvm来进行node多版本管理，下载并安装。2、若出现某个依赖安装报错，可以npm install --ignore-scripts，最后再来单独安装报错的依赖。
Vue常用加密方式
m0_51431448的博客
11-13 144
消息摘要是从原始数据中通过特定算法计算出的一个固定长度的字符串，这个过程通常被称为哈希函数或散列函数。固定长度：无论输入的数据有多大，输出的消息摘要都有固定的长度。唯一性：理想情况下，不同的输入应该产生不同的消息摘要，虽然在现实中由于哈希碰撞的存在，这并不总是可能的。不可逆性：从消息摘要不能反推出原始数据。高效性：计算消息摘要的过程应该是快速且高效的。
Nuxt2和Nuxt3 对于SEO优化的区别
最新发布
书山有路_邓
11-14 553
nuxt
使用JavaScript实现微信打飞机游戏
"这篇文章主要介绍了如何使用JavaScript来创建一个仿微信打飞机的游戏。通过使用HTML5的Canvas元素进行图形绘制，结合键盘事件监听，实现玩家飞机的左右移动功能。" 在JavaScript仿微信打飞机游戏中，核心是利用...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值