太空入侵者游戏使用HTML, CSS和JavaScript

游戏是一种利用休闲甚至消磨时间的互动方式。无论年龄大小，人们都喜欢玩游戏。在进行网页开发时，为什么不创建自己的游戏来与计算机交互呢?当你创建一个像这样的项目时，你不需要有更高的web开发知识，但你需要很好地掌握你的基础知识和javascript更多的东西。

我们需要三个文件，即index。HTML, style。CSS, app。js作为HTML, CSS, JavaScript文件，这就足够了。我们并不太关注UI/UX，我们更关注的是为了学习和进步而创造的游戏。这是一个简单但耗时的项目，您可能需要同步修改每个文件，而不是逐个修改。

想要在游戏开发中创建项目?：

游戏开发工具包将发货给你，你可以学习和建立使用教程。你今天就可以免费开始了!

大纲:

《太空入侵者》是一款简单的游戏，玩家作为射击者需要通过摧毁中间的三个障碍物(网格是15x15的网格)而到达网格的另一边。这个游戏也像一个有时间限制的游戏，没有时钟，但前方的障碍成为生存的计数器。这主要基于开关用例。这款游戏是少数出现在非多媒体手机上的游戏之一。

这些东西会被用到:

这些是javascript文件中使用的方法:-

• querySelector ()
• addEventListener ()
• 开关的情况下
• setInterval ()
• clearInterval ()
• 键码
• 班级名册
• 包括()
• push ()
• indexOf ()

要求:

硬件:

• 一台笔记本电脑或台式机，支持任何操作系统(Linux/Windows/iOS)

软件/技术:

• 一个浏览器(Chrome/Firefox/Opera/Safari/IE)来运行程序。我更喜欢chrome或firefox，因为它提供了一个控制台，可以看到程序背后的工作，就像python的IDE(使用鼠标右键，选择'检查'或Ctrl+Shift+I打开它，并切换到控制台标签在这个窗口)
• 编写代码的文本编辑器(Visual Studio(VS) Code/Atom/Sublime/Notepad)。我更喜欢VS code，因为它从库中完成了代码，主题也很吸引人。
• 网络连接

实现:

如前所述，我们将需要三个:i) index.html ii) style.css iii) app.js

我们将按步骤同时处理每个文件

步骤1:

• 添加HTML的基本结构，并记得链接CSS文件(style.css)和javascript文件(app.js)
• 添加名称为“Score”的h3标签，然后添加id为“result”的span标签
• 现在添加div类grid
• 对于15x15的网格，我们添加了225个div标签
• 现在在css的网格类中添加网格作为伸缩包装的特性，尺寸为300px X 300px
• 对于网格下的div使用尺寸20px X 20px
• 在CSS中添加职业射手(背景:蓝色)，入侵者(背景:紫色，半径10px)，爆炸(背景:红色)，激光(背景:橙色)

步骤2:

• 现在我们在我们的javascript文件中使用文档addEventListener方法为我们的青蛙添加功能，其中'DOMContentLoaded'，我们所有的代码都将在这个事件监听器中完成
• 我们使用查询选择器all方法在变量平方下添加所有div。网格div '选择所有分区
• 类似地，我们添加了来自HTML连接' #class '查询选择器的结果显示变量
• 我们让当前射手点位于202处，因为它是块点，并声明宽度=15，同时将当前入侵者点添加为0，结果=0，干掉的外星人数组=[]，方向=1
• 我们用一个从0到39的数字数组来定义外来入侵者，这定义了入侵者可能出现的地方，我们很容易通过forEach看到他们
• / /画外星入侵者

alienInvaders。forEach(invader => squares[currentInvaderIndex + invader].classList.add('invader'));

• 我们可以通过改变数组的值来控制这一点，比如HTML页面中的0到5
• 对于射手也一样，使用classList并在每个里面添加如上所述的射手

步骤3:

• 现在我们通过调用变量“e”作为事件的函数为射击游戏添加移动
• ' e '表示带有键盘按钮键代码的事件(在谷歌上很容易获得)
• 在放入开关方法之前，将射头从当前位置移开
• 现在我们根据按键的情况改变位置
• 如果我们按左箭头(' <- ')向左移动，键码= 37;如果按右箭头(' -> ')向右移动，键码= 39
• 为了激活这个函数，我们使用带有' keydown '的addEventListener作为事件调用move shooter函数
• 现在签入浏览器并继续
• 现在我们将使用时间循环引入入侵者的移动
• 我们将固定左边和右边与宽度的比较
• 现在使用if else if语句给出方向(-1表示左，1表示右)
• 使方向=宽度更改线
• 在else if中检查行变化，再次使用if else检查左侧边缘是否变化，因此改变方向为1 else为-1
• 现在使用for循环，我们从当前位置删除入侵者，添加方向，然后再次添加入侵者到新的位置
• 在相同的函数中，我们用不同的方式检查game
• 首先使用if语句检查入侵者和射手是否都存在，然后显示“游戏结束”并清除间隔
• 第二次使用for循环，我们检查是否有外星人在网格的最后4个方格，我们以以下方式宣布游戏结束:

if (alienInvaders[i] >(方块。长度-(宽度- 1)){

resultDisplay。textContent = 'Game Over'

clearInterval (invaderId)

}

• 浏览器上的入侵者交叉检查

目的:

• 现在我们来练习射击
• 首先我们声明laserId，然后currentLaserIndex = currentShooterIndex
• 现在我们在这个函数中添加一个函数来移动激光
• 我们首先从当前的激光位置移除激光，然后将索引值降低宽度，取直线向上，并在这里添加激光
• 现在我们检查当前位置是否有带激光的入侵者，所以我们同时移除激光和入侵者，并在这个位置添加臂架
• 现在我们设置在250毫秒后移除爆炸的超时时间，如下所示:

setTimeout(() => squares[currentLaserIndex].classList.remove('boom')， 250);

clearInterval (laserId);

• 然后我们声明一个变量，用于携带alientaken down，并将其推入数组的alieninvadertakendown声明了很久
• 现在我们将result增加1并更新resultdisplay以增加score并移出if语句
• 最后，我们检查是否有激光到达最后一行或正方形，我们从索引中删除激光
• 现在我们用空格键(键码32)声明调用激光的函数

文档。addEventListener('keyup'， e => {

如果(e.keyCode) {

laserId = setInterval(moveLaser, 100);

}

})

• 现在我们关闭整个集合，像这样调用函数

文档。addEventListener(“弹起”,拍摄)

• 在声明moveInvaders函数时，我们需要改变上一步中使用的最后一个for语句(这是因为我们有一个数组来比较，否则外星人即使在射击后也会再次出现)
• 从下图:

For (i = 0;我< alienInvaders。长度- 1;我+ +){

广场(alienInvaders[我]].classList.add(“入侵者”);

}

• 我们改为:

For (i = 0;我< alienInvaders。长度- 1;我+ +){

如果(! alienInvadersTakenDown.includes (i)) {

广场(alienInvaders[我]].classList.add(“入侵者”);

}

}

• 现在在move invader函数中，我们添加了获胜标准(逻辑=如果所有入侵者都被杀死，我们就赢了)

/ /决定赢

如果(alienInvadersTakenDown。长度=== alieninvads .length) {

resultDisplay。textContent = 'YOU WIN';

clearInterval (invaderId);

}

现在我们完成了编码，你可以改变形状，大小和移动方式，添加一些循环，增加网格，记住划分计算，改进它。你可以参考我的Github个人资料寻求帮助:

https://github.com/vaibhavkumar-779/

你知不知道

2022世界杯亚洲区赛程表时间Skyfi实验室帮助学生学习实用的技能通过构建真实的项目。

你可以和朋友一起报名，并在家门口领取工具包

你可以向专家学习，建立可行的项目，向世界展示技能，获得最好的工作。
今天开始!

• 超文本标记语言
• CSS
• PHP

• 游戏开发
• Web开发

太空入侵者游戏使用HTML, CSS和JavaScript