基于JS实现飞机大战游戏的示例代码

目录
  • 演示
  • 技术栈
  • 源码
    • 定义敌方战机
    • 定义我方战机
    • 碰撞检测

演示

技术栈

今天没有什么特别要讲的,要不我们提前介绍下次要做的技术吧。你不说话就是同意了。我们开始了。 下图是正则表达式的一些总结大家可以先看看哦

(function() {
    /**
     * 1. JavaScript使用正则式的函数
     */
    const str = "abchelloasdasdhelloasd";

    // 1. 查找
    console.log(str.search("h")); // 3

    // 2. 替换
    console.log(str.replace(/a/, "s")); // sbchelloasdasdhelloasd

    // 3. 切割
    console.log(str.split(/ab/)); // ["", "bchello", "sd", "sdhello", "sd"]

    // 4. RegExp.prototype.test方法:检测该字符串是否包含指定串
    console.log(/hello/.test("abchello")); // true

    // 5. RegExp.prototype.exec方法:将满足条件的字符串放到数组
    let reg=/hello/g;
    reg.exec("abchelloasdasdhelloasd");  // ["hello"]

}());

源码

<div id='box'></div>

定义敌方战机

//敌方战机
				'enemy' : function(){
					var oEnemy = Game.ctE('img');
					oEnemy.src='images/enemy.png';
					oEnemy.className='enemy';
					Game.box.appendChild(oEnemy);
					var left = Math.random()*(Game.box.clientWidth-Game.getstyle(oEnemy,'width')/2);
					var top = Game.getstyle(oEnemy,'top');
					oEnemy.style.left=left+'px';
					oEnemy.timer=setInterval(function(){
						/*敌军下落速度*/
						top+=3;
						oEnemy.style.top=top+'px';
						if(top>Game.box.clientHeight){
							clearInterval(oEnemy.tiamr);
							if(!oEnemy.parentNode){
								return;
							}else{
								oEnemy.parentNode.removeChild(oEnemy);
							};
						}else{
							var allB = Game.getclass(Game.box,'img','bullet');
							for(var i=0;i<allB.length;i++){
								if(Game.pz(oEnemy,allB[i])){
									allB[i].parentNode.removeChild(allB[i]);
									oEnemy.src='images/boom.png';
									clearInterval(oEnemy.timer);
									setTimeout(function(){
										if(!oEnemy.parentNode){
											return;
										}else{
											oEnemy.parentNode.removeChild(oEnemy);
										};
									},500);
									Game.num+=10;
									Game.oScore.innerHTML=Game.num+'分';
									Game.fenshu=Game.oScore.innerHTML;
								};
							};
							if(Game.pz(oEnemy,Game.oPlane)){
								oEnemy.src='images/boom.png';
								clearInterval(oEnemy.timer);
								setTimeout(function(){
									if(!oEnemy.parentNode){
										return;
									}else{
										oEnemy.parentNode.removeChild(oEnemy);
									};
								},500);
								Game.oPlane.src='images/boom2.png';
								clearInterval(Game.bTimer);
								clearInterval(Game.start.timer);
								document.onmousemove=null;
								setTimeout(function(){
									Game.over();
								},3000);
							};
						};
					},30);
				},

定义我方战机

		'plane' : function(ev,t,c){
					Game.box.appendChild(Game.oPlane);
					var bT = Game.box.offsetTop + Game.oPlane.clientHeight/2 + (Game.box.offsetHeight-Game.getstyle(Game.box,'height'))/2;
					var bL = Game.box.offsetLeft + Game.oPlane.clientWidth/2 + (Game.box.offsetWidth-Game.getstyle(Game.box,'width'))/2;
					var top = ev.pageY - bT;
					var left = ev.pageX - bL;
					Game.oPlane.style.cssText='top:'+top+'px;left:'+left+'px;';	

					var topMax = Game.getstyle(Game.box,'height')-Game.oPlane.clientHeight/2;
					var leftMin = -Game.oPlane.clientWidth/2;
					var leftMax = Game.getstyle(Game.box,'width')-Game.oPlane.clientWidth/2;
					document.onmousemove = function(ev){
						ev = ev||event;
						top = ev.pageY - bT;
						left = ev.pageX - bL;
						if(top<0){
							top=0;
						}else if(top>topMax){
							top = topMax;
						};
						if(left<leftMin){
							left = leftMin;
						}else if(left>leftMax){
							left = leftMax;
						};
						Game.oPlane.style.cssText='top:'+top+'px;left:'+left+'px;';
					};

					/*子弹生成速度 */
					Game.bTimer=setInterval(function(){Game.bullet(top,left,c);},t);

				},

碰撞检测

//碰撞检测
				'pz' : function(obj1,obj2){
					var T1 = Game.getstyle(obj1,'top');
					var B1 = T1+Game.getstyle(obj1,'height');
					var L1 = Game.getstyle(obj1,'left');
					var R1 = L1+Game.getstyle(obj1,'width');

					var T2 = Game.getstyle(obj2,'top');
					var B2 = T2+Game.getstyle(obj2,'height');
					var L2 = Game.getstyle(obj2,'left');
					var R2 = L2+Game.getstyle(obj2,'width');

					if(T1>B2||L1>R2||B1<T2||R1<L2){
						return false;
					}else{
						return true;
					};
				},

到此这篇关于基于JS实现飞机大战游戏的示例代码的文章就介绍到这了,更多相关JS飞机大战内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • js实现飞机大战小游戏

    本文实例为大家分享了js实现飞机大战游戏的具体代码,供大家参考,具体内容如下 1.html代码 <html> <head> <title></title> <meta http-equiv="content" content="text/html" charset="utf-8"/> <link rel="stylesheet" type="text/

  • javascript实现飞机大战小游戏

    本文实例为大家分享了javascript实现飞机大战游戏的具体代码,供大家参考,具体内容如下 文档结构如下 其中tool文件中只使用了随机数,audio中是存放的音乐文件,images中是己方和敌方飞机的图片. HTML部分 <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta http-equiv="X

  • JavaScript实现简易飞机大战

    本文实例为大家分享了JavaScript实现简易飞机大战的具体代码,供大家参考,具体内容如下 话不多说,直接上代码 <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale

  • JavaScript编写实现飞机大战

    本文实例为大家分享了JavaScript实现飞机大战的具体代码,供大家参考,具体内容如下 一.飞机大战游戏介绍: 游戏中,玩家驾驶飞机,在空中进行战斗.点击并移动自己的飞机,发射炮弹,打掉敌小型飞机.中型飞机和大型飞机,来获得分数和奖励,打掉一架小型飞机赢得3分,打掉一架中型飞机赢得5分,打掉一架大型飞机赢得10分,累加得分.撞到敌飞机命减1,当命数为0时,则游戏结束. 二. 效果图页面展示: 初始界面如图-1所示: 玩家在如图-1所示的界面的任意位置,按下鼠标左键,开始游戏. 图-1 默认分数

  • JavaScript实现飞机大战游戏

    本文实例为大家分享了canvas ,js 实现一个简单的飞机大战,供大家参考,具体内容如下 预览图: 代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport"

  • 用JS实现飞机大战小游戏

    本文实例为大家分享了JS实现飞机大战小游戏的具体代码,供大家参考,具体内容如下 小的时候玩的飞机大战感觉还蛮神奇,今天自己就学着做了一个 先制作好要做好的几步以及背景样式 var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var start = 0; // 开始阶段 var starting = 1; // 开始的加载阶段 var running =

  • 基于JS实现飞机大战游戏的示例代码

    目录 演示 技术栈 源码 定义敌方战机 定义我方战机 碰撞检测 演示 技术栈 今天没有什么特别要讲的,要不我们提前介绍下次要做的技术吧.你不说话就是同意了.我们开始了. 下图是正则表达式的一些总结大家可以先看看哦 (function() { /** * 1. JavaScript使用正则式的函数 */ const str = "abchelloasdasdhelloasd"; // 1. 查找 console.log(str.search("h")); // 3 /

  • 基于JS实现Flappy Bird游戏的示例代码

    前言 Flappy Bird 是一款无尽的游戏,玩家可以控制一只鸟.玩家必须保护小鸟免于与管道等障碍物相撞.每次小鸟通过管道时,分数都会增加一.当小鸟与管道碰撞或因重力而坠落时,游戏结束.以下部分描述了构建此游戏必须采取的步骤. 游戏可以通过这个链接进入 完整源码地址 实现代码 HTML 部分:在此部分中,创建和加载游戏的元素.选择背景.鸟类.障碍和得分元素的图像.接下来,我们创建并链接 style.css 和 index.js 文件. <!DOCTYPE html> <html>

  • 基于JS实现蜘蛛侠动作游戏的示例代码

    目录 代码结构 代码展示 HTML JS 项目运行 游戏截图 整个游戏源码是由html.js. css.图片等代码完成的,无后端数据保存功能. 代码结构 js文件夹是游戏事件控制文件 vapp文件夹是游戏图片文件 icon.png 是网页游戏图标 index.html 是游戏主页 代码展示 HTML index.html代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:/

  • js实现飞机大战游戏

    本文实例为大家分享了js实现飞机大战游戏的具体代码,供大家参考,具体内容如下 CSS部分的代码: <style> * { margin: 0px; padding: 0px; } canvas{ border: 1px solid #000; display: block; margin: auto; } </style> JavaScript代码: <!-- 先创建一个画布 --> <canvas id="canvas" width=&quo

  • Java实现游戏飞机大战-III的示例代码

    目录 前言 主要设计 功能截图 代码实现 游戏面板类 商店类 总结 前言 <飞机大战-III>是一款融合了街机.竞技等多种元素的经典射击手游.华丽精致的游戏画面,超炫带感的技能特效,超火爆画面让你肾上腺素爆棚,给你带来全方位震撼感受,体验飞行战斗的无限乐趣. 游戏是用java语言实现,采用了swing技术进行了界面化处理,设计思路用了面向对象思想. 主要需求 基于Java Swing,以飞机大战为原形,以抗日电视剧<亮剑>中的“李云龙”为主题,实现菜单.选关.难度.等级.技能等功能

  • Java实现经典游戏飞机大战-I的示例代码

    目录 前言 主要设计 功能截图 代码实现 启动类 核心类 核心算法 总结 前言 <飞机大战-I>是一款融合了街机.竞技等多种元素的经典射击手游.华丽精致的游戏画面,超炫带感的技能特效,超火爆画面让你肾上腺素爆棚,给你带来全方位震撼感受,体验飞行战斗的无限乐趣. 游戏是用java语言实现,采用了swing技术进行了界面化处理,设计思路用了面向对象思想. 主要需求 玩家控制一台战斗机,以消灭所有的敌机为胜利,有些敌机会掉落装备,不可错过哦 主要设计 1. 用Swing库做可视化界面 2.鼠标控制战

  • 基于JS实现弹性漂浮广告的示例代码

    目录 效果图 1.功能(鼠标移入移出事件.点击事件.定时器控制移动) 2.div初始样式设置 3.获取div可以移动的页面大小 4.定时器控制移动,鼠标移入事件停止移动,鼠标移出继续移动. 5.点击事件点击让div消失 6.完整代码 效果图 1.功能(鼠标移入移出事件.点击事件.定时器控制移动) div实现在页面上移动,并判断碰到页面边框反弹,鼠标移入div停止移动,鼠标移出div进行移动,点击div让它从页面消失,定时器控制它的移动. 2.div初始样式设置 //div(广告)获取节点 var

  • 基于C语言实现迷宫游戏的示例代码

    目录 C语言迷宫游戏 定义地图 打印地图方法一 打印地图方法二 定义起点和终点位置 实现读取按键 实现小球下向下移动一步 总结小球移动规律 实现重新打印地图 实现连续移动 实现小球下向上下左右移动 实现小球走到终点就胜利 C语言迷宫游戏 这篇文章是给学完并学懂了C语言的分支(选择和循环)结构和二维数组的朋友看的. 要做一个游戏或者程序先要想好有那些要求,以下是我认为一个迷宫必带的要求: 迷宫要先打印出来(要设置墙.空气.小球的起点),是墙就不能,是空气就可以走. 每次输入'w'.'a'.'s'.

  • 基于Vue3实现数字华容道游戏的示例代码

    目录 前言 环境 思路 实现 GameCnt GameTool GamePass GameTip Menu 最后 前言 恰逢春之四月,天气忽热忽凉,遇游戏大赛,以笨拙之技,书一篇小文. 游戏规则:存在n*n的格子,需要将它们按数字顺序或图片顺序一一还原即可. 环境 主要环境: vue3 version:3.2.4 vite version:2.5.0 vue-router version:4.0.14 注:这个游戏的路由使用的是自动路由插件 主要插件: windicss version:3.5.

  • 基于JS实现动态跟随特效的示例代码

    目录 演示 技术栈 源码 css部分 js部分 演示 技术栈 这次用到了关于css的一些功能,和jQuery. CSS3中添加的新属性animation是用来为元素实现动画效果的,但是animation无法单独担当起实现动画的效果.承载动画的另一个属性——@keyframes.使用的时候为了兼容可加上-webkit-.-o-.-ms-.-moz-.-khtml-等前缀以适应不同的浏览器. 创建动画的原理是,将一套 CSS 样式逐渐变化为另一套样式. 通过 @keyframes 规则,您能够创建动

随机推荐