用Javascript模拟微信飞机大战游戏
最近微信的飞机大战非常流行，下载量非常高。
利用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>
用Javascript模拟微信飞机大战游戏的更多相关文章
- 用javascript写星际飞机大战游戏
在github里看到了个不错的脚本游戏,决定亲自动手来写,效果如下 下面是代码的思路分享 把整个代码理解消化确实不容易,但是如果你坚持看完相信你一定会有收获 如果没兴趣可以直接点击下面的链接 复制代码 ...
- 用Swift语言和Sprite Kit复制微信飞机大战游戏
先上GitHub链接: https://github.com/songrotek/PlaneWar.git 接下来略微解说一下! 这个程序还有点Bug,见谅! 1 说明 游戏採用了Sprite kit ...
- 用DIV+Css+Jquery 实现的旧版微信飞机大战。
用jquery 实现的旧版微信飞机大战. 以前一直都是做后台和业务逻辑,前端很少去做, 现在个小游戏. 方向键控制方向,Ctrl 键 放炸弹(当然你的有炸弹,哈哈)! 主要都是用div+Css实现的, ...
- 【一】仿微信飞机大战cocos2d-x3.0rc1
參考 [偶尔e网事] 的 [cocos2d-x入门实战]微信飞机大战 cocos2dx 2.0版本号,偶尔e网事他写的很具体,面面俱到,大家很有必要看下.能够通过以下链接跳转: cocos2d-x入 ...
- 基于Cocos2d-x-1.0.1的飞机大战游戏开发实例（上）
最近接触过几个版本的cocos2dx,决定每个大变动的版本都尝试一下.本实例模仿微信5.0版本中的飞机大战游戏,如图: 一.工具 1.素材:飞机大战的素材(图片.声音等)来自于网络 2.引擎:coco ...
- Cocos2d-x 3.0final 终结者系列教程16-《微信飞机大战》实现
看到cocos2d-x推出了3.1版本号,真是每月一次新版本号,速度. 另一个好消息就是http://cn.cocos2d-x.org/上线了,祝贺!啥时候把我的视频和教程放上去呢?!! . 视频下载 ...
- 基于Cocos2d-x-1.0.1的飞机大战游戏开发实例（下）
在飞机大战游戏开发中遇到的问题和解决方法: 1.在添加菜单时,我要添加一个有背景的菜单,需要在菜单pMenu中添加一个图片精灵,结果编译过了但是运行出错,如下图: 查了很多资料,调试了很长时间,整个人 ...
- 基于Cocos2d-x-1.0.1的飞机大战游戏开发实例（中）
接<基于Cocos2d-x-1.0.1的飞机大战游戏开发实例(上)> 三.代码分析 1.界面初始化 bool PlaneWarGame::init() { bool bRet = fals ...
- 11.pygame飞机大战游戏整体代码
主程序 # -*- coding: utf-8 -*- # @Time: 2022/5/20 22:26 # @Author: LiQi # @Describe: 主程序 import pygame ...
随机推荐
- int (*p)[10] 与*p[10]的区别
定义指向具有10个整型元素的一维数组的指针格式为:int (*p)[10] ,而起初我一直以为int (*p)[10] 是定义二维数组的方法 ][],(*p)[]; p=a; /*有了这个定义后,指针 ...
- 神奇的css！竟然可以这样玩转表格
这是在对一个博客模板进行移动端适配时遇到的一个场景.html结构如下: 要解决的问题是如何在不修改任何html代码的情况下,仅仅通过css实现下面的效果: 1)改变它们的显示顺序,.MainCell显 ...
- 【大型网站技术实践】初级篇：搭建MySQL主从复制经典架构
一.业务发展驱动数据发展 随着网站业务的不断发展,用户量的不断增加,数据量成倍地增长,数据库的访问量也呈线性地增长.特别是在用户访问高峰期间,并发访问量突然增大,数据库的负载压力也会增大,如果架构方案 ...
- 使用 SailingEase WinForm 框架构建复合式应用程序（插件式应用程序）
对于一些较小的项目,具备一定经验的开发人员应该能够设计和构建出便于进行维护和扩展的应用程序.但是,随着功能模块数量(以及开发维护这些部件的人员)的不断增加,对项目实施控制的难度开始呈指数级增长. Sa ...
- 部分安卓手机微信浏览器中使用XMLHttpRequest 2上传图片显示字节数为0的解决办法
前端JS中使用XMLHttpRequest 2上传图片到服务器,PC端和大部分手机上都正常,但在少部分安卓手机上上传失败,服务器上查看图片,显示字节数为0.下面是上传图片的核心代码: HTML < ...
- VS2013的 Browser Link 引起的问题
环境:vs2013 问题:在调用一个WebApi的时候出现了错误: 于是我用Fiddler 4直接调用这个WebApi,状态码是200(正常的),JSon里却提示在位置9409处文本非法, 以Text ...
- xamarin UWP中MessageDialog与ContentDialog的区别
MessageDialog与ContentDialog的异同点解析: 相同点一:都是uwp应用上的一个弹窗控件.都能做为弹出应用. 相异点一:所在命名空间不同,MessageDialog在Window ...
- JavaWeb配置外部应用的两种方式
原来我们的项目放到webapps下,现在放到外面,也希望tomcat可以找到它!把应用放到tomcat之外,这就是外部应用了.应用已经不在tomcat中了,这时我们需要在tomcat中配置外部应用的位 ...
- c#设计模式-组合模式
在软件开发过程中,我们经常会遇到处理简单对象和复合对象的情况,例如对操作系统中目录的处理就是这样的一个例子,因为目录可以包括单独的文件,也可以包括文件夹,文件夹又是由文件组成的,由于简单对象和复合对象 ...
- iOS---iOS9搜索功能
前言 在iOS9之前我们只能使用Spotlight来搜索应用名称来打开指定App,而其他的内容都是提供给系统使用(信息,联系人,邮件等).在iOS9以后Apple允许开发者设置应用中任意内容可以被Sp ...