jQuery实现打飞机游戏
玩法介绍：不同样式的飞机出来其它飞机会暂停飞行且处于无敌状态，子弹对它无效，你操纵的飞机不能碰到任何飞机，发出的子弹可以攻击正在飞行的飞机，每击落一架飞机会记录分数，你操纵的飞机碰到其它飞机即为游戏结束
效果图演示（gif图看着可能会有些卡顿，可以复制下面代码在浏览器运行查看）：
完整代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
} html,
body {
width: 100%;
height: 100%;
overflow: hidden;
background: url(./img/bj.jpg) repeat 0 0px;
} .mine {
width: 110px;
height: 90px;
background: url(img/P.png) no-repeat 0 -102px;
position: absolute;
cursor: pointer;
} .zi {
width: 10px;
height: 10px;
background-color: red;
position: absolute;
border-radius: 50%;
} .lan {
width: 118px;
height: 100px;
position: absolute;
background: url(img/P.png) no-repeat -115px -1px;
}
.hong{
width: 107px;
height: 80px;
position: absolute;
background: url(img/P.png) no-repeat -1px -1px;
}
.cheng{
width: 122px;
height: 87px;
position: absolute;
background: url(img/P.png) no-repeat -242px -1px;
}
.chen{
width: 122px;
height: 80px;
position: absolute;
background: url(img/P.png) no-repeat -387px -1px;
}
p{
position: absolute;
color: orange;
font-size: 30px;
z-index: 999;
left:20;
top:40;
}
</style>
</head>
<body>
<ul></ul>
<p>击落飞机：0</p>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
let a = null, //创建mine定时器
b = null, //创建琪它飞机定时器
qi = null, //其它飞机移动定时器
tim = null, //子弹移动定时器
n = 'lan', //存取随机飞机名称
op = 0 //记录分数
const feiji = ['lan','hong','cheng','chen']
$('<div>').addClass('mine').css({
left: ($(document).innerWidth() - 110) / 2,
top: ($(document).innerHeight() - 90)
}).appendTo('ul') //添加mine飞机
.on('mousedown', function(e) { //实现拖拽
$(document).on('mousemove', e => { //鼠标移动
n = feiji[Math.floor(Math.random()*feiji.length)]
let left = e.clientX - $(this).width() / 2 + 2
let top = e.clientY - $(this).height() / 2 - 10
left = loob(left, 0, $(document).innerWidth() - $(this).width())
top = loob(top, 0, $(document).innerHeight() - $(this).height())
$(this).css({
left,
top
})
e.preventDefault() //清楚默认事件
})
$(document).on('mouseup', () => { //鼠标抬起
$(document).off('mousemove')
})
}) function loob(dir, min, max) { //限制出界
dir < min ? dir = min : dir > max ? dir = max : ''
return dir
}
const $mine = $('.mine') let num = 0
let kkk = 0
a = setInterval(() => { //创建子弹
clearInterval(tim)
$('<div>').addClass('zi').css({
left: $mine.offset().left + $mine.width() / 2 - 5,
top: $mine.offset().top - 5
}).appendTo('ul')
tim = setInterval(() => { //子弹移动
num += 10 //背景移动速度
$('.zi').css({
top: '-=10'
}).each(function() {
let k = $(this)
$(`.${n}`).each(function(){
if(k.offset().left+10>$(this).offset().left&&k.offset().left<$(this).offset().left+10+$(this).width()&&k.offset().top+10>$(this).offset().top&&k.offset().top<$(this).offset().top+$(this).height()){//判断子弹是否击中其它飞机
kkk++
if(kkk==10){
$(this).remove()
kkk=0
op++
$('p').html(`击落飞机：${op}`)
}
k.remove()
}
})
if ($(this).offset().top <= -10) { //超出屏幕删除子弹
$(this).remove()
}
})
$('body').css({
background: `url(./img/bj.jpg) repeat 0 ${num}px`
})
}, 1000 / 60)
}, 100)
b = setInterval(() => { //随机创建飞机
clearInterval(qi)
xuan(n)//随机出现飞机
}, 600)
function xuan(obj){
$('<div>').addClass(obj).css({
left: Math.floor(Math.random() * ($(document).innerWidth() - 300))
}).appendTo('ul')
qi = setInterval(() => {//其它飞机移动
$(`.${n}`).each(function(){
if($('.mine').offset().left+$('.mine').width()>$(this).offset().left&&$('.mine').offset().left<$(this).offset().left+$(this).width()&&$('.mine').offset().top+$('.mine').height()>$(this).offset().top&&$('.mine').offset().top<$(this).offset().top+$(this).height()){//判断mine飞机是否触碰其它飞机
clearInterval(a)
clearInterval(b)
clearInterval(tim)
clearInterval(qi)
$('body').css({
background:'white'
}).html(`游戏结束！你一共击落了${op}架飞机`)
return
}
})
$(`.${obj}`).css({
top: '+=4'
}).each(function() {
$(this)[0].num = 0
if($(this).offset().top>$(window).innerHeight()){
$(this).remove()
}
})
}, 1000 / 60)
}
</script>
</html>
如果要复制代码运行的话，可以私聊我，我把用到的图片分享给你们
jQuery实现打飞机游戏的更多相关文章
- pygame开发PC端微信打飞机游戏
pygame开发PC端微信打飞机游戏 一.项目简介 1. 介绍 本项目类似曾经火爆的微信打飞机游戏.游戏将使用Python语言开发,主要用到pygame的API.游戏最终将会以python源文件gam ...
- 实例源码--IOS高仿微信打飞机游戏(完整功能)
下载源码 技术要点: 1. IOS游戏开发基础框架 2. 高仿打飞机游戏 3. 游戏背景音频技术 4.源码详细的中文注释 ……. 详细介绍: 1. IOS游戏开发基础框架 此套源码为涉及IOS游戏开发 ...
- 射击的乐趣：WIN32诠释打飞机游戏源码补充
打飞机游戏源码补充 从指定位置加载bmp并显示到对话框. , TRUE);, , LR_LOADFROMFILE); { BITMAP bmpinfo; ...
- <Win32_20>纯c语言版的打飞机游戏出炉了^_^
经过昨天的苦战,终于完成了纯C版的打飞机游戏——使用微信打飞机游戏的素材,不过玩法有些不同,下面会有详述 一.概述游戏的玩法.实现效果 1. 游戏第一步,简单判断一下,给你一个准备的时间: 2.选择& ...
- Pygame制作微信打飞机游戏PC版
使用Pygame制作微信打飞机游戏PC版 转至:http://www.cnblogs.com/dukeleo/p/3339780.html 前一阵子看了一篇文章:青少年如何使用Python开始游戏 ...
- HTML5学习+javascript学习：打飞机游戏简介以及Model层
本着好记性不如烂博客以及分享成功的喜悦和分享失败的苦楚,今天我来分享下一个练手项目:打飞机游戏~从小就自己想做游戏,可是一直没有机会.HTML5给了我们这个平台,这个平台可以有很多以前想都不敢想的东西 ...
- python 之路，200行Python代码写了个打飞机游戏！
早就知道pygame模块,就是没怎么深入研究过,恰逢这周未没约到妹子,只能自己在家玩自己啦,一时兴起,花了几个小时写了个打飞机程序. 很有意思,跟大家分享下. 先看一下项目结构 "" ...
- 用canvas整个打飞机游戏
声明:本文为原创文章,如需转载,请注明来源WAxes,谢谢! 之前在当耐特的DEMO里看到个打飞机的游戏,然后就把他的图片和音频扒了了下来....自己凭着玩的心情重新写了一个.仅供娱乐哈......我 ...
- 原生canvas写的飞机游戏
一个原生canvas写的飞机游戏,实用性不大,主要用于熟悉canvas的一些熟悉用法. 项目地址:https://github.com/BothEyes1993/canvas_game
随机推荐
- vue中v-for索引不要用key
今天发现在给元素v-for渲染的时候,想给元素添加key特性存储索引,发现不奏效: <div class="apic" v-for="(pic,index) in ...
- 10.2 Go redis
10.2 Go redis redis是NoSQL数据, 不是传统的关系型数据库.linux,windows环境皆可安装. https://redis.io http://www.redis.cn r ...
- Jenkins-Sonar集成配置及注意点
首先说说关于Jenkins集成Sonar的相关配置:我jenkins与Sonar不在同一个服务器上! 先现在 SonarQube Scanner 插件. SonarQube Servers:系统配置 ...
- Jmeter基础-HTTP请求
启动Jmeter 打开jmeter/bin文件/jmeter.bat(Windows执行文件)文件,就可以启动jmeter了 1.创建测试计划 启动后默认有一个TestPlan(测试计划),可修改其名 ...
- 这次终于可以愉快的进行 appium 自动化测试了
appium 是进行 app 自动化测试非常成熟的一套框架.但是因为 appium 设计到的安装内容比较多,很多同学入门都跪在了环境安装的部分.本篇讲述 appium 安卓环境的搭建,希望让更多童鞋轻 ...
- Python面向对象的特征跟私有属性
面向对象的三大特征 继成.封装.多态: 继承:一个类可以继承一个或多个类,被继承的类叫做父类,继承的类叫做子类 封装:将数据和方法放在了一个类中就构成了封装 多态:指的一类事物有多重形态,一个抽象类 ...
- 面向对象案例 - 学生信息管理系统V1.0
学生管理系统项目[所有知识点整合] 1. 学生管理系统项目 尝试完成以下功能 实体类: 学生类: id, 姓名,年龄,性别,成绩 需要使用数组保存学生信息 Student[] allStu 需要完成的 ...
- 由一次安全扫描引发的思考：如何保障 API 接口的安全性？
引言 前段时间,公司对运行的系统进行了一次安全扫描,使用的工具是 IBM 公司提供的 AppScan . 这个正所谓不扫不要紧,一扫吓一跳,结果就扫出来这么个问题. 我们的一个年老失修的内部系统,在登 ...
- Kivy中显示汉字的问题
1. kivy中显示中文乱码和提示错误的原因: 编码问题 字体问题 2. 字体问题的解决 可以下载支持中文的字体文件ttf,我这里使用了微软雅黑中文简体msyh.ttf.我们在编写布局时可以直接在相关 ...
- 《HelloGitHub》第 50 期
兴趣是最好的老师,HelloGitHub 就是帮你找到兴趣! 简介 分享 GitHub 上有趣.入门级的开源项目. 这是一个面向编程新手.热爱编程.对开源社区感兴趣 人群的月刊,月刊的内容包括:各种编 ...