从零开始 飞机大战（五）实现子弹定位和动画

最新推荐文章于 2024-08-09 21:30:00 发布
最新推荐文章于 2024-08-09 21:30:00 发布
阅读量295 收藏
点赞数
分类专栏： java script 文章标签： 动画 javascript 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45769564/article/details/121064193
版权

实现目标

在这里插入图片描述
首先判断什么时候需要发射炮弹，我们设置在摁下空格的时候发射炮弹，我们下载键盘监控事件中
所以在键盘检测到我们摁下空格的时候，一个炮弹就自动加载到舞台中，

//键盘的监控事件
document.onkeydown=function(e){
if(e.key==" "){  //炮弹向上运动
		$("<div class='bullet'></div>").css({"left":bulletx,"top":bullety}).appendTo(stage);
		}

}

其次就是要讨论炮弹加载在哪里的位置问题，我们之前同样在讨论过敌机加载在舞台的位置问题，那个时候我们利用random方法实现了随机型号的敌机在舞台上方的随机位置出现;但是炮弹我们却不能使用这个想法，我们需要炮弹在我们按下空格键是出现在紧贴在飞机坐在位置的上方，炮弹出现的位置时根线对于飞机的位置确定的，并且在我们加如炮弹节点在html中时就应该同时规定好他出现的位置，所以可以在键盘事件检测到空格键按下的时候在舞台加入节点并且规定好他的位置
我们需要炮弹运动起来所以我们可以规定一个炮弹速度，这个很在设计敌机运动时我们设置的低级运动速度变量move类似，
全局声明

//炮弹对象,宽高速度
	var bullet=stage.getElementsByClassName("bullet")[0];
	var bulletw=50;
	var bulleth=65;
	var bullets=10;

键盘事件：

//键盘的监控事件
document.onkeydown=function(e){
if(e.key==" "){  //炮弹向上运动
			// console.log(parseFloat($(plain).css("top")))
		 var bulletx=parseFloat($(plain).css("left"))+$(plain).width()/2-bulletw/2;
		// console.log($(plain).css("left"))
		console.log(parseFloat($(plain).css("left")))
		// console.log(parseFloat($(plain).css("top"))-parseFloat($(bullet).css("height")));
		var bullety=parseFloat($(plain).css("top"))-bulleth;
		
		// plain.style.top.CSSValue=plain.style.top+10
		// $(plain).css({"left":parseFloat($(plain).css("left"))+move});
		// move++
		// $("<div class=\"bullet\"></div>")   转义方法
		$("<div class='bullet'></div>").css({"left":bulletx,"top":bullety}).appendTo(stage);
		}

}

这时键盘监控事件可以随时在我们摁下空格键的时候将炮弹加入到我们的舞台中
所以需要设置炮弹移动的问题了
设计思路跟敌机一样

	//控制子弹的动画时间控件
	setInterval(function(){
		if($(".bullet").length==0) return;
			
		//设置好子弹移出屏幕后，移除子弹节点
		
		
		
		
		// $(".bullet").css({"top":parseFloat($(".bullet").css("top"))-10})
		// // console.log($(this).css("top"))
		// console.log(parseFloat($(".bullet").css("top")));
		var bulltop=parseFloat($(".bullet").css("top"));
		
			$(".bullet").css({"top":(bulltop-10)+"px"});
			
		
			
			
		
		
		
		
		
		
	},bullets);

最后不要忘记炮弹飞出舞台时需要自动删除，不然优惠出现内存占用的情况

//单独监控子弹
setInterval(function(){
	// var bullet=document.getElementsByClassName("bullet");
	//两种写法都可以
	var bullet=$(".bullet");
	for(i=0;i<bullet.length;i++){
		var tmp_bullet=parseFloat($(bullet[i]).css("top"));
		// console.log(tmp_bullet);
		if(tmp_bullet<0){
			$(bullet[i]).remove();
			
		};	
	};
},400);

完整代码：

$(function(){
	//这里写代码的时候是可以控制所有htmldom节点的
	//dom
	
	var stage=document.getElementById("stage"); //获取舞台节点
	var bg1=stage.getElementsByClassName("bg1")[0];//获取背景图片
	// console.log(bg1)  //检查是否捕获bg1
	var bg2=stage.getElementsByClassName("bg2")[0];//获取背景图片
	var topval=-200;
	var topval2=-968;
	var k=0;
	//玩家飞机对象
	var plain=stage.getElementsByClassName("plain")[0];
	//炮弹对象,宽高速度
	var bullet=stage.getElementsByClassName("bullet")[0];
	var bulletw=50;
	var bulleth=65;
	var bullets=10;
	// bg1.style.cssText="top: -30px;"
	var t1=setInterval(function(){
		k+=1;
		if(k==768){
			topval=-968;
			
			
		}else if(k==768*2){
			topval2=-968;
			k=0;
		}
		// console.log("ddd")
		// console.log(bg1.style.cssText)
		// bg1.scrollTop=bg1.scrollTop+10;
		$(bg1).css({"top":topval});
		$(bg2).css({"top":topval2});
		
		
		// bg1.style.cssText="top: "+topval+"px";
		topval++;
		// bg2.style.cssText="top: "+topval2+"px";
		topval2++;
		//topval++背景向下移动  
		
	},3);
	
	// t1.clearInterval();  //时钟停止
	
	
	// 第二章图片
	// var stage=document.getElementById("stage"); //获取舞台节点
	
	// // console.log(bg1)  //检查是否捕获bg1
	
	// // bg1.style.cssText="top: -30px;"
	// var t1=setInterval(function(){
	// 	// console.log("ddd")
	// 	// console.log(bg1.style.cssText)
	// 	// bg1.scrollTop=bg1.scrollTop+10;
	// 	bg2.style.cssText="top: "+topval2+"px";
	// 	topval2+=1
	// 	//topval++背景向下移动  
		
	// },70);
	
	
	
	// console.log(plain)
	var move=5
	
	
//键盘的监控事件
document.onkeydown=function(e){
	 // console.log(e)
	//向上运动
	if(e.key=="w"){
		// console.log(parseFloat($(plain).css("top")))
		if(parseFloat($(plain).css("top"))>=5)
		// plain.style.top.CSSValue=plain.style.top+10
			$(plain).css({"top":parseFloat($(plain).css("top"))-move});
		// move++
		
	}else if(e.key=="s"){  //向下运动
		// console.log(parseFloat($(plain).css("top")))
		if(parseFloat($(plain).css("top"))<=513)
		// plain.style.top.CSSValue=plain.style.top+10
			$(plain).css({"top":parseFloat($(plain).css("top"))+move});
		// move++
		
	}
	if(e.key=="a"){  //向左运动
		// console.log(parseFloat($(plain).css("top")))
		
		// plain.style.top.CSSValue=plain.style.top+10
		$(plain).css({"left":parseFloat($(plain).css("left"))-move});
		// move++
		
	}else if(e.key=="d"){  //向右运动
		// console.log(parseFloat($(plain).css("top")))
		
		// plain.style.top.CSSValue=plain.style.top+10
		$(plain).css({"left":parseFloat($(plain).css("left"))+move});
		// move++
		
	}else if(e.key==" "){  //炮弹向上运动
		// console.log(parseFloat($(plain).css("top")))
		 var bulletx=parseFloat($(plain).css("left"))+$(plain).width()/2-bulletw/2;
		// console.log($(plain).css("left"))
		console.log(parseFloat($(plain).css("left")))
		// console.log(parseFloat($(plain).css("top"))-parseFloat($(bullet).css("height")));
		var bullety=parseFloat($(plain).css("top"))-bulleth;
		
		// plain.style.top.CSSValue=plain.style.top+10
		// $(plain).css({"left":parseFloat($(plain).css("left"))+move});
		// move++
		// $("<div class=\"bullet\"></div>")   转义方法
		$("<div class='bullet'></div>").css({"left":bulletx,"top":bullety}).appendTo(stage);
		
		
	}
	
	
	
	
	
	
}

	
	
	
	
//控制敌机的时钟
	var enemy=document.getElementsByClassName("enemy");
	setInterval(function(){
		for(var i=0;i<enemy.length;i++){
			if($(enemy[i]).attr("class")=="enemy enemy1"){
				$(enemy[i]).css("top",parseFloat($(enemy[i]).css("top"))+1);

				
				
			}else if($(enemy[i]).attr("class")=="enemy enemy2"){
				$(enemy[i]).css("top",parseFloat($(enemy[i]).css("top"))+2);

				
				
			}else if($(enemy[i]).attr("class")=="enemy enemy3"){
				$(enemy[i]).css("top",parseFloat($(enemy[i]).css("top"))+3);

				
				
			}else if($(enemy[i]).attr("class")=="enemy enemy4"){
				$(enemy[i]).css("top",parseFloat($(enemy[i]).css("top"))+4);

				
				
			}
			
			
		}
		
		
		
		
	},10);	
	//随机产生敌机
	// setInterval(function(){
	// 	var num=parseInt(Math.random()*4)+1;
	// 	var rndwidth_stage=parseInt(Math.random()*parseInt($(stage).width()-45));
	// 	$("<div class=\"enemy enemy"+num+"\"></div>").css({"left":rndwidth_stage}).appendTo("#stage")
		
		
		
	// },1500);
	//数组写法
	setInterval(function(){
		var num=parseInt(Math.random()*4)+1;
		var enemyW=[50,67,67,67];
		var rndwidth_stage=parseInt(Math.random()*$(stage).width()); //展示三木运算符(rndwidth_stage-enemyW[num-1]
		rndwidth_stage=rndwidth_stage>enemyW[num-1]?rndwidth_stage-enemyW[num-1]:rndwidth_stage;
		$("<div class=\"enemy enemy"+num+"\"></div>").css({"left":rndwidth_stage}).appendTo("#stage")
		
		
		
	},1000);
	
	//控制子弹的动画时间控件
	setInterval(function(){
		if($(".bullet").length==0) return;
			
		//设置好子弹移出屏幕后，移除子弹节点
		
		
		
		
		// $(".bullet").css({"top":parseFloat($(".bullet").css("top"))-10})
		// // console.log($(this).css("top"))
		// console.log(parseFloat($(".bullet").css("top")));
		var bulltop=parseFloat($(".bullet").css("top"));
		
			$(".bullet").css({"top":(bulltop-10)+"px"});
			
		
			
			
		
		
		
		
		
		
	},bullets);	
	//单独监控子弹
	setInterval(function(){
		// var bullet=document.getElementsByClassName("bullet");
		//两种写法都可以
		var bullet=$(".bullet");
		for(i=0;i<bullet.length;i++){
			var tmp_bullet=parseFloat($(bullet[i]).css("top"));
			// console.log(tmp_bullet);
			if(tmp_bullet<0){
				$(bullet[i]).remove();
				
			};
			
			
		};
		
		
		
		
		
	},400);
	
	
	
	//离开舞台的还记移除dom节点
	setInterval(function(){
		
		
		for(i=0;i<enemy.length;i++){
			var tmp_enemy=parseFloat($(enemy[i]).css("top"));
			var tmp_stage=$(stage).height();
			// console.log(tmp_enemy); 
			// console.log(typeof($(tmp_stage).height()));
			 if(tmp_enemy>tmp_stage){
				$(enemy[i]).remove();
				// console.log("移除成功");
				
			 };
			
		};
	},500);
});


// 第二章图片
// $(function(){
// 	//这里写代码的时候是可以控制所有htmldom节点的
// 	//dom
	
// 	var stage=document.getElementById("stage"); //获取舞台节点
// 	var bg2=stage.getElementsByClassName("bg2")[0];//获取背景图片
// 	// console.log(bg1)  //检查是否捕获bg1
// 	var topval=-968;
// 	// bg1.style.cssText="top: -30px;"
// 	var t2=setInterval(function(){
// 		// console.log("ddd")
// 		// console.log(bg1.style.cssText)
// 		// bg1.scrollTop=bg1.scrollTop+10;
// 		bg2.style.cssText="top: "+topval+"px";
// 		topval+=1
// 		//topval++背景向下移动  
		
// 	},70);
	
// 	// t1.clearInterval();  //时钟停止
	
// });
// alert("4444")   不使用jq的话无法完全加载再弹弹框

// function myapp(){
// 	定义函数的基本格式
	
// }




// function xxxx (){
// 		// console.log("ddd")
// 		console.log(bg1.style.cssText)
// 		// bg1.scrollTop=bg1.scrollTop+10;
// 		bg1.style.cssText="top: "+topval+"px";
// 		topval+=1
		
// 	}

css

#stage{
	width: 320px;
	height: 568px;
	background-color: antiquewhite;
	color: white;
	overflow: hidden;
	margin: auto;
	position: relative;
	
}
.bg1{
	background-image: url(../img/bg_01.png);
	height: 768px;
	width: 100%;
	position: absolute;
	top: -200px;
	/* z-index: 5; */
}
.bg2{
	
	background-image: url(../img/bg_01.png);
	height: 768px;
	width: 100%;
	position: absolute;
	top: -968px;
	/* z-index: 5; */
}
.plain{
	height: 53px;
	width: 67px;
	background-image: url(../img/plane_blue_01.png);
	z-index: 11;
	position: absolute;
	bottom: 0;
	background-size: 100% 100%;
}

.enemy{
	height: 53px;
	width: 67px;
	position: absolute;
	background-size: 100% 100%;
	
}
.enemy1{
	
	background-image: url(../img/enemy_04.png);
	z-index: 10;
	height: 40px;
	width: 50px;
	top:0;
	left: 20px;
}
.enemy2{
	
	background-image: url(../img/enemy_03.png);
	z-index: 10;
	top:0;
	left: 90px;
	
}
.enemy3{
	background-image: url(../img/enemy_02.png);
	z-index: 10;
	top:0;
	left: 160px;
	height: 70px;
}
.enemy4{
	background-image: url(../img/enemy_01.png);
	z-index: 10;
	top:0;
	left: 230px;
	
}
/* 子弹 */
.bullet{
	background-image: url(../img/bullet_01.png);
	width: 50px;
	height: 65px;
	position: absolute;
	z-index: 10;
	
	
	
}
敢跟头像对视三秒吗？
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【动画练习之cssQ弹效果】
weixin_47740096的博客
07-01 292
css之动画Q弹效果
Css3弹力球动画
前端阿皓
12-09 346
一、效果预览 二、代码展示 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> * { margin: 0; padding: 0; list-style: none; } body, html { width: 100%; height: 1
基于弹丸冲击波的实时狙击手声源定位
qq_43518430的博客
06-16 2267
To find the position of a sniper in a real environment, it is vital to use all the generated signals caused by the bullet shooting. Using the received signals on the microphones, the firing detection time, the position of the shooter, the trajectory of the
ES6飞机大战篇-游戏介绍（优先看）
Leisure_Time的博客
01-21 2487
首先进行演示： 当中设计到了 升级、攻击力、技能、暂停、敌机预设移动等等 1.升级 我才用的是比较传统的方式 通过比率进行获取经验 格式如下 当前的等级 除去 比率 乘 敌机原本的血量 除以 比率 这么做可以让他持续升级 敌机也会随着等级提高血量变高。 2.攻击力 攻击力升级时会进行提升 那么同样的 在不同的等级 将会发射多排子弹 3.技能 技能我目前想到了三个 k：代表着体积缩小移动速度加快，相对应的攻击力将会变小 l：跟踪子弹 开启跟踪子弹 持续3秒 将会有10秒冷却 i：火力全开 将射速提高到 32
2021.7 京训钉（自动播放下一章）
q421533518的博客
08-18 1036
打开浏览器 --> F12 --> 复制粘贴 --> 回车 var buttons = document.getElementsByClassName("next_button___YGZWZ"); setInterval(function() { console.log("点击事件执行中。。。") var button = buttons[0]; if(typeof(button) != 'undefined'){ console.log("点击播放下一章！！！！") bu
用js编写的飞机大战，注释都写着，小白也能看懂
04-29
【标题】"用js编写的飞机大战，注释都写着，小白也能看懂" 涉及的知识点主要集中在JavaScript编程、游戏开发和资源管理上。...通过阅读和理解代码，你可以了解到一个完整的小型游戏是如何从零开始构建的。
基于c++的空中大战课程设计与实现.rar
01-18
本项目“基于C++的空中大战”是针对C++编程语言的一次深入课程设计，旨在帮助学习者掌握游戏开发的基础知识，体验从零开始构建一个完整游戏的过程。下面将详细介绍该项目中的关键知识点。 一、C++基础 C++作为一门...
双木林-飞机大战资源
04-23
【双木林-飞机大战资源】是一套专为学习者设计的飞机大战游戏素材集合，旨在帮助开发者或游戏爱好者深入理解和实践游戏...通过实战练习，结合这些资源，你可以从零开始创建一个完整的游戏，同时深化对游戏开发的理解。
Java-小游戏飞机大战素材
02-23
有了这些素材，开发者可以快速构建起游戏的基本框架，而不用从零开始设计所有视觉元素。 标签中的"java"表明这个素材包是为Java语言设计的，这意味着开发者需要使用Java的Swing或JavaFX库来创建游戏的GUI。Swing是...
1_飞机大战体验课.zip
06-21
2. **2D图形与动画**：了解如何创建和管理2D图形资源，包括精灵（Sprite）和精灵表（Sprite Sheet），以及如何制作和播放帧动画，是实现飞机和敌机移动、爆炸等效果的关键。 3. **游戏逻辑与控制**：玩家飞机的移动...
css实现一个弹框的动画（animation）
苏苏就是小苏苏的博客
10-18 5422
1.实现效果 2.实现代码 <div class="box" id="box">展示苏苏的二维码</div> <div class="codeBox" id="code_box"> <div id="hide"> <img src="./susu.png" /> </div> </div> body { padding: 0; margin: 0; display: flex; height: 100vh
VR实现空间定位的7种利器（上）
前路漫漫的博客
04-21 8430
按：本文作者王锐，VR行业资深从业者。 现有的VR体验馆的构建却还缺少了最重要的一环，就是廉价而灵活准确的定位方案。本文将据此阐述一些已有方案的优劣。本文分上下篇。 缺失的一环 虚拟现实刮起的风暴如今已经愈演愈烈，从形形色色的头盔和眼镜，到各种奇思妙想的交互设备，再到内容制作和建立体验馆的尝试。越来越多的VR相关从业者和创业者都将The Void，Zero Latency等前辈作为自己下一步
ES6飞机大战篇-添加子弹追踪功能
Leisure_Time的博客
01-21 919
既然是飞机大战 那必定少不了子弹追踪 那么添加子弹追踪功能的实现如下： // 原文链接：https://blog.csdn.net/erweimac/article/details/82256087 // https://blog.csdn.net/weixin_30756499/article/details/97551805 // https://blog.csdn.net/looffer/article/details/8846159 // https://github.com/processing
pygame 飞机大战子弹的编写（八）用精灵类实现导弹的跟踪系统，旋转图像
hailler1119的博客
03-22 1767
目标：1 使用精灵类 2 实现精灵图像的任意角度旋转 3 实现类似导弹的跟踪系统 很多文章介绍了图像的转换功能，但都是基于 Surface.blit(image,rect())这个功能。一旦使用在精灵类里，图像漫天飞舞。 偶然看到 pygame自带的chimp示例，里面打大猩猩的游戏，打中后大猩猩会旋转，巧的是，他是基于精灵的类。 经过不停的删除测...
html飞机向上发射子弹,HTML5飞机大战
weixin_36070880的博客
06-03 294
飞机大战你的浏览器不支持canvas画布元素，请更新浏览器获得演示飞机大战分数:0分var canvas = document.getElementById("myCanvas");var context = canvas.getContext("2d");document.addEventListener("keydown",onkeydown);var Plan = function (ima...
pygame 飞机大战子弹的编写（三）自定义子弹位置、速度、角度
hailler1119的博客
03-16 3522
目标：实现子弹的出现位置（为飞机发射做准备），子弹的速度，角度自定义。 添加两个函数 set_post(self, x, y) #实现 x ,y 坐标出现，这里的坐标是相对于父坐标的。 set_speed(self, speed) #增加自定义的速度。 完成代码如下： def set_pos(self,x, y): self.rect.x = x s...
分享一个可交互的小场景（二）
一起学习一起进步~
06-25 5662
再看代码： JS部分。
05_ Electron 自定义菜单、主进程与渲染进程通信
最新发布
所学所思
08-09 333
单独写在一个 js 文件中，然后再在主进程中引入labe: "文件",submenu: [label: "新建文件",},label: "编辑",submenu: [label: "复制",},submenu: [// main.js// 1、引入初始化remote 模块width:800,})// __dirname 表示获取我们当前目录， path.join 会将两个参数合并成 d://electrondemo/index.html// 打开调试模式。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值