js写飞机大战_地图，我方战机发射子弹

最新推荐文章于 2024-07-12 15:18:46 发布
最新推荐文章于 2024-07-12 15:18:46 发布
阅读量2.6k 收藏 5
点赞数
分类专栏： JavaScript从入门到精通 面向对象 文章标签： 飞机大战 JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jiang7701037/article/details/82874046
版权

效果图：

 

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		
	</body>
</html>
<script type="text/javascript">

//飞机大战中每个javascript对象都对应着dom对象
//javascript对象中存储着每个dom对象的数据。

//面向对象做飞机大战。
//一、项目中有哪些类
//地图类，移动的物体（敌机类，我方战机类，子弹类）

function Map(obj){
	this.domObj = null;//地图的dom对象，是JavaScript对象对应的dom对象
	this.width = obj.width;
	this.height = obj.height;
	this.bgImg = obj.bgImg;	
	this.myPlanes = [];//我方战机数组
	this.enemyPlanes = [];//敌方战机数组
	this.createUI();
}

Map.prototype.createUI = function(){
	this.domObj  = document.createElement("div");
	this.domObj.style.cssText = "position:relative;overflow:hidden";
	this.domObj.style.width = this.width+"px";
	this.domObj.style.height = this.height+"px";
	this.domObj.style.backgroundImage = "url("+this.bgImg+")";
	document.body.appendChild(this.domObj);
}

//移动的物体
function MoverObj(obj){
	if(arguments.length>0){
		let defaultObj = {
			map:null,//所属的地图对象（JavaScript对象）
			width : 0,
			height : 0,
			left : 0,
			top : 0,
			bgImg :"",
			directionLeft : 0,
			directionTop : 0,
			incLeft : 0,
			incTop : 0,
			timeSpace : 16
		};
		//把传来的数据赋给defaultObj;
		for(let key in obj){
			defaultObj[key] = obj[key]; 
		}
		
		for(let key in defaultObj){
			this[key] = defaultObj[key];
		}
		
		this.domObj = null;//DOM对象	
		this.myTimer = null;		
		this.createUI();
	}
}

MoverObj.prototype.createUI = function(){
	this.domObj  = document.createElement("div");
	this.domObj.style.cssText = "position:absolute";
	this.domObj.style.width = this.width+"px";
	this.domObj.style.height = this.height+"px";
	this.domObj.style.left = this.left+"px";
	this.domObj.style.top = this.top+"px";
	this.domObj.style.backgroundImage = "url("+this.bgImg+")";
	this.domObj.setAttribute("ord",this.ord);
	this.map.domObj.appendChild(this.domObj);
}

MoverObj.prototype.go = function(){
	this.myTimer = setInterval(()=>{
		this.left = this.left+this.directionLeft*this.incLeft;
		this.top = this.top+this.directionTop*this.incTop;
		
		this.judgeEdge&&this.judgeEdge();//调用子类特有处理边界的函数
		
		this.domObj.style.left = this.left +"px";
		this.domObj.style.top = this.top +"px";

	},this.timeSpace);
}

function MyPlane(obj){
	//建立继承关系
	MoverObj.apply(this,arguments);//继承父类的所有的属性
	this.bullets = [];
}
//建立继承关系，继承的是父类的prototype方法
MyPlane.prototype = new MoverObj();

MyPlane.prototype.addEvent = function(){
	this.map.domObj.onmousemove = (event)=>{
		
		let evt = event || window.event;
		//地图距离页面左上角的距离
		let offsetLeft = this.map.domObj.offsetLeft;
		let offsetTop = this.map.domObj.offsetTop;
		
		this.left = evt.pageX - offsetLeft - this.width/2;
		this.top = evt.pageY - offsetTop - this.height/2;
		
		if(this.left<=0){
			this.left=0;
		}else if(this.left>=this.map.width-this.width){
			this.left=this.map.width-this.width;
		}
		
		if(this.top<=0){
			this.top=0;
		}else if(this.top>=this.map.height-this.height){
			this.top=this.map.height-this.height;
		}
		
		this.domObj.style.left = this.left+"px";
		this.domObj.style.top = this.top+"px";		
	}
}

//射击（发射子弹）
MyPlane.prototype.shoot = function(){
	//启动定时器创建子弹
	let ord = 0;
	setInterval(()=>{
		ord++;
		let b = new Bullet({
			map:this.map,
			myPlane:this,
			width : 6,
			height : 14,
			left : this.left+(this.width-6)/2,
			top : this.top-14,
			bgImg : "img/bullet1.png",
			directionTop : -1,
			incTop : 21,
			timeSpace : 200,
			ord:ord
		});
		b.go();
		this.bullets.push(b);
	},200);
}

//子弹
function Bullet(obj){
	MoverObj.apply(this,arguments);
	obj.myPlane = obj.myPlane;//子弹所属的战机
}

Bullet.prototype = new MoverObj();

Bullet.prototype.judgeEdge = function(){
	if(this.top<=-this.height){
		//删除（停定时器，删数组，删外观）
		window.clearInterval(this.myTimer);
		//1)、删数组（在我方战机的子弹数组里删除）
		let index = this.myPlane.bullets.indexOf(this);
		this.myPlane.bullets.splice(index,1);
		
		//2)、删外观
		this.domObj.parentNode.removeChild(this.domObj);		
	}
}


function EnemyPlane(){
	MoverObj.apply();	
}
EnemyPlane.prototype = new MoverObj();


window.onload = function(){
	//二、步骤
	//1、地图
	let m = new Map({
		width:480,
		height:600,
		bgImg:"img/bg.jpg"
	});
	
	//2、我方战机
	let myPlane = new MyPlane({
		map:m,//我方战机所属的地图对象
		width : 98,
		height : 122,
		left : (m.width-98)/2,
		top : m.height-122,
		bgImg : "img/me.png"
	});
	myPlane.addEvent();
	myPlane.shoot();
	
	
}



</script>

 

田江
关注
  • 0
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
用JS实现飞机大战小游戏
joyouscola的博客
04-06 1047
小的时候玩的飞机大战感觉还蛮神奇，今天自己就学着做了一个 先制作好要做好的几步以及背景样式 var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var start = 0; // 开始阶段 var starting = 1; // 开始的加载阶段 var running = 2; // 游戏阶段
JS实现飞机大战
06-28
html+css基本框架得搭建，定时器，方法，对象，基本循环语句实现简单的飞机大战
day28飞机大战-子弹.js
weixin_30439067的博客
02-15 145
//子弹 function Bullet(){ this.body = create("div");//实例属性 //实例方法 this.init = function(){ this.body.className = "bullet"; //将子弹添加到游戏引擎中 append new GameEngine...
JavaScript实现飞机大战_js飞机大战代码
最新发布
2401_84435192的博客
07-12 664
对于框架原理只能说个大概，真的深入某一部分具体的代码和实现方式就只能写出一个框架，许多细节注意不到。算法方面还是很薄弱，好在面试官都很和蔼可亲，擅长发现人的美哈哈哈…（最好多刷一刷，不然影响你的工资和成功率???在投递简历之前，最好通过各种渠道找到公司内部的人，先提前了解业务，也可以帮助后期优秀 offer 的决策。要勇于说不，对于某些 offer 待遇不满意、业务不喜欢，应该相信自己，不要因为当下没有更好的 offer 而投降，一份工作短则一年长则 N 年，为了幸福生活要慎重选择！！！
Js实现飞机大战
42384718的博客
07-21 1146
CSS部分的代码： <style> canvas{ border: 1px solid #000; display: block; margin: 50px auto } </style> JavaScript代码： <canvas id="canvas" width="480" height="640"></canvas> <script> // 构造函数 var canvas = document.getElemen
用js实现的飞机大战的代码以及素材分享给大家
04-24
用js实现的飞机大战的代码以及素材分享给大家
JavaScript 实现飞机大战
qqrrjj2011的博客
03-09 1453
JavaScript实现飞机大战示例
js实现飞机大战
w909252427的博客
03-14 181
简单版js写的飞机大战
javascript实现飞机大战
01-02
打开html中的start界面开始运行，我方飞机发射子弹攻击敌机，我方飞机可上下左右移动，敌方飞机有小飞机，中飞机，大飞机；一共有5滴血，血量消耗完了之后，游戏结束，有飞机碰撞效果，碰撞期间不掉血，可以暂停游戏——出处（知了堂期末大作业）
JS编程实现-飞机大战游戏
05-04
游戏开发入门项目-飞机大战，使用js语言开发的web项目。
js原生飞机大战源码
11-27
纯js原生代码飞机大战。
原生JS简单版飞机大战游戏
11-07
原生JS简单版飞机大战游戏
飞机大战纯手工JS源码
07-11
飞机大战纯手工JavaScript源码,原生JS编写， 不使用JQuery等。
JS 飞机大战 （含源码）.pdf
12-16
JS 飞机大战 （含源码）
原声js版飞机大战游戏
03-01
完全原生的js编写的飞机大战游戏，涵盖了所有的js基础知识，是学习js的好帮手，推荐参考。
JS面向对象实现飞机大战
action_xing的博客
09-20 3036
主页面<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .bg{ width: 530px; height: 600px; position: relati
js原生实现飞机大战游戏
xwc999
10-19 672
链接：https://pan.baidu.com/s/1Xn33MHWDyjIIZRvrcCt7Ow&shfl=sharepset 提取码：nxcg 目录结构： html: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title&g...
从零开始用js手写飞机大战全过程（附源码）
weixin_73261958的博客
08-29 2743
plane game飞机大战
飞机大战中c语言如何使战机发射子弹
05-24
在飞机大战中，要让战机发射子弹，可以使用以下步骤： 1. 定义子弹的结构体，包括子弹的位置、速度、状态等信息。 2. 在游戏循环中，检测玩家是否按下了“射击”键，如果是，则创建一颗新的子弹，并将其加入到子弹...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值