jq制作飞机大战小游戏

飞机大战小游戏

页面布局：

 <h1 class="score">0</h1><div class="contain"><div class="plane"></div></div>

  <style>* {margin: 0;padding: 0;}.contain {width: 500px;height: 80vh;margin: 10vh auto;background-color: black;position: relative;}.plane {width: 60px;height: 50px;background: url('./img/1.png') no-repeat center;/*设计飞机的图片*/background-size: 100% 100%;position: absolute;bottom: 10px;left: calc(50% - 30px);}.bullet {width: 12px;height: 12px;background-color: gold;border-radius: 50%;position: absolute;}.enemy {width: 50px;height: 40px;background: red url('./img/2.png')  100% 100%;/*敌机照片*/background-size: 100% 80%;position: absolute;top: 0;}.score{position: absolute;color: red;top: 0;left: 50%;transform: translateX(-50%);}</style>

接下来是jq实现飞机大战游戏：asdw是飞机左下右上的控制键，j为发射子弹的按键

 <script>$(function () {let score=0//设置我方飞机能够到达的位置（不能飞出指定的游戏范围）let leftMax = $('.contain').innerWidth() - $('.plane').innerWidth()let topMax = $('.contain').innerHeight() - $('.plane').innerHeight()//键盘按键事件$(window).keydown(function (e) {let {keyCode} = e// let keycode=e.keycode 为上面的完整写法//方法一// let t= $('.plane').position().top// let l= $('.plane').position().left;// switch (keyCode) {//     case 87://         t -= 10//         if(t<0)t=0//         $('.plane').css('top', t)//         break;//     case 83://         t+= 10//         if(t>topMax)t=topMax//         $('.plane').css('top', t)//         break;//     case 65://         l -= 10//         if(l<0)l=0//         $('.plane').css('left', l)//         break;//     case 68://         l += 10//         if(l>leftMax) l=leftMax//         $('.plane').css('left', l)//         break;// }//方法二let {//t和l为别名top: t,left: l,} = $('.plane').position()switch (keyCode) {case 87:t -= 10break;case 83:t += 10break;case 65:l -= 10break;case 68:l += 10break;case 74:shoot()breakdefault:break;}if (t < 0) t = 0if (l < 0) l = 0if (t > topMax) t = topMaxif (l > leftMax) l = leftMax$('.plane').css('left', l).css('top', t)})let endTime = new Date()//节流//射击function shoot() {if (new Date - endTime < 500) returnlet bullet = $('<div/>').addClass('bullet')$('.contain').append(bullet)//添加子弹元素到页面bullet.css('left', $('.plane').position().left + $('.plane').innerWidth() / 2 - bullet.innerWidth() / 2) //子弹发射时的初始位置bullet.css('top', $('.plane').position().top - 20)endTime = new Date()}//子弹setInterval(() => {$('.bullet').each(function () {//对发射出的每一个子弹的运动轨迹进行布局，发射子弹后，子弹不断向上移动，当到达一定位置时，子弹消失let bullet = $(this)let {top} = bullet.position()if (top < 12) bullet.remove()else bullet.css('top', bullet.position().top - 30)})}, 100)//计算子弹与敌机是否碰撞function getLRRB(node){//获取目标的左右上下的边界return{l:node.offsetLeft,t:node.offsetTop,b:node.offsetTop+node.offsetHeight,r:node.offsetLeft+node.offsetWidth}}function calc(a,b){//怎么就碰撞了//当敌机和我机的边框相遇就算碰撞了。a=getLRRB(a)b=getLRRB(b)if(b.l>a.l&&b.l<a.r&&b.t>a.t&&b.t<a.b) return trueelse if(b.l>a.l&&b.l<a.r&&b.b>a.t&&b.b<a.b) return trueelse if(b.r>a.l&&b.r<a.r&&b.b>a.t&&b.b<a.b) return trueelse if(b.r>a.l&&b.r<a.r&&b.t>a.t&&b.t<a.b) return trueelse return false}//敌机setInterval(() => {let enemy = $('<div/>').addClass('enemy')$('.contain').append(enemy)enemy.css('left',Math.round(Math.random()*($('.contain').innerWidth()-enemy.innerWidth()))).css('top',0)},2000)//利用随机函数，设置敌机出现的位置setInterval(()=>{//设置飞机下落$('.enemy').each(function(){let enemy=$(this)let {top}=enemy.position()if(top>$('.contain').innerHeight()-enemy.innerHeight()) enemy.remove()else enemy.css('top',enemy.position().top+20)})},200)setInterval(()=>{//时刻监测我方飞机是否与敌机碰撞，如果碰撞到，游戏结束。若子弹与敌机碰撞后，碰撞的子弹和敌机消失，分数加10分$('.enemy').each(function(){let enemy=thisif(calc(enemy,$('.plane').get(0))||calc($('.plane').get(0),enemy)){console.log('Game Over')location.reload()}$('.bullet').each(function(){let bullet=thisif(calc(enemy,bullet)||calc(bullet,enemy)){bullet.remove()enemy.remove()score+=10$('.score').text(score)}})})})})</script>

jq制作飞机大战小游戏相关推荐

pygame为游戏添加背景_用 Python 制作飞机大战小游戏
这这次用Python中的pygame模块来完成一个飞机大战的小游戏:基本思路是通过方向键来控制飞机的左右移动射击飞船.先来看下最后的效果为了新手也能完成,本文记录了编写的全部流程,也就是每次修改的代码 ...
手把手教你使用Pygame制作飞机大战小游戏，4万字超详细讲解！
点击上方"早起Python",关注并"星标" 每日接收原创Python干货! 大家好,偷学Python系列是由小甜同学从初学者的角度学习Python的笔记,其特 ...
拾起童年的回忆 - 手把手教你制作飞机大战小游戏
拾起童年的回忆最记得小学时,每逢放学便会打开电视机,接上红白机/小霸王,插上一张游戏卡带,魂斗罗.超级玛丽.冒险岛.足球小将,拳王.飞机大战.雪人兄弟--,这些游戏到现在还是如数家珍,一张游戏卡可以 ...
自己制作飞机大战小游戏 canvas应用实例
图片只能打包上传百度云链接:https://pan.baidu.com/s/1bxHZYtsZxTzPFis4Fq4AvA 密码:xshc <!DOCTYPE html> <htm ...
HTML5用canvas制作飞机大战小游戏
css样式: <!DOCTYPE html> <html lang="en"><head><meta charset="UTF- ...
使用小程序制作一个飞机大战小游戏
此文主要基于微信小程序制作一个飞机大战小游戏,上手即用,操作简单. 一.创建小程序二.页面实现三.代码块一.创建小程序访问微信公众平台,点击账号注册. 选择小程序,并在表单填写所需的各项信息进 ...
Qt学习总结——飞机大战小游戏制作
Qt学习总结--飞机大战小游戏制作 1. 需求分析这篇文章写于2020年暑假,完成学校实训项目之后,对自己的项目实践做了一个总结,回顾整个项目的制作过程,同时也复习一下Qt的相关知识,总结项目制作过 ...
点击list view中一行内容可以在combox中显示_java版飞机大战小游戏详细教程（零基础小白也可以分分钟学会！）...
一:游戏展示飞机大战小游戏我们都玩过,通过移动飞机来打敌机,这里给大家展示一下游戏成果:呜呜呜由于gif只能上传5M大小,所以就不能给大家展示操作了,如果大家有兴趣可以自己自己做出来再玩哟. 这里面 ...
飞机大战小游戏(超详细)
偷学Python之最后的项目二:飞机大战小游戏(超详细) 古之立大事者,不惟有超世之才,亦必有坚忍不拔之志.--苏轼甜甜先说这次用Python中的pygame模块来完成一个飞机大战的小游戏:基本思 ...

jq制作飞机大战小游戏

飞机大战小游戏

jq制作飞机大战小游戏相关推荐

最新文章

热门文章