青蛙过河游戏使用JavaScript和HTML

游戏是一种利用休闲甚至消磨时间的互动方式。人们喜欢玩游戏，不分年龄。在做网页开发的时候，为什么不创建你自己的游戏来与你的电脑互动呢?当构建一个这样的项目时，你不需要更高的web开发知识，但在你的基础知识和javascript更多的东西。

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

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

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

大纲:

《Frogger》是一款基于网格的游戏，玩家是一只从网格底部开始的青蛙，必须跨越两个障碍才能到达对面的结束方块/网格。第一个障碍是道路，汽车在两个方向移动，我们必须移动，以避免被任何一个他们。然后是第二个障碍，是一条河，在那里我们要跳上原木，就在前一个的对面。这款游戏是为数不多的非多媒体手机游戏之一。

会用到的东西:

这些方法在我们的javascript文件中使用

• querySelector ()
• addEventListener ()
• setInterval ()
• clearInterval ()
• forEach ()
• classList.add ()
• classList.contains ()
• classList.remove ()

要求:

硬件:

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

软件/技术:

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

实现:

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

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

第一步(搭建框架):

• 我们首先设置HTML页面。添加标题为“Frogger”，然后链接CSS文件使用链接标签，然后链接javascript使用脚本标签
• 我们在div标签中添加网格作为一个类，现在在其中添加81个div标签来创建网格
• 添加带有按钮类的Start/Stop按钮，带有span标签的Seconds具有定时器的class time-left，然后添加h3标签，将结果作为类
• 现在我们为此制作CSS部分，我们将网格显示为flex-wrap和flex-wrap，尺寸将被9整除，如180px*180px，得到9x9的网格
• 对于每一个除法，我们给出的尺寸都是按9来划分的，就像上面一样，我们给出20px*20px
• 然后我们在网格中给结束块、开始块和青蛙着色
• 现在我们将这些类的end块和start块硬编码在div标签第5下和以上，分别从网格div start和end

第二步(成型):

• 现在我们使用文档addEventListener方法在我们的javascript文件中为青蛙添加功能，其中的'DOMContentLoaded'，我们所有的代码都将在这个事件监听器中完成
• 我们使用查询选择器all方法来选择变量平方下的所有divs。网格div '选择所有分区
• 类似地，我们添加其他HTML变量，从时间到开始按钮，结果
• 我们让当前点为76，因为它是开始的块点，并声明宽度=9，同时添加当前时间为20
• 使用classList.add将' frog '添加到当前点
• 现在我们添加了使用键盘移动青蛙的功能，我们将使用在谷歌上很容易找到的按键代码(提示:' 37 ':左箭头，' 38 ':上箭头，' 39 ':右箭头，' 40 ':下箭头)
• 在currentIndex中向左移动减小1，然后向右移动增加1
• 当to向下移动时，宽度增加，宽度减少，向上移动
• 现在使用函数在这个索引处添加青蛙
• 现在去html页面添加以下19从上到下相同

从上面

< div class = " log-left l1 " > < / div >

< div class = " log-left l2 " > < / div >

< div class = " log-left l3 " > < / div >

< div class = " log-left l4 " > < / div >

< div class = " log-left l5 " > < / div >

< div class = " log-left l1 " > < / div >

< div class = " log-left l2 " > < / div >

< div class = " log-left l3 " > < / div >

< div class = " log-left l4 " > < / div >

< div class = " log-right l5 " > < / div >

< div class = " log-right l1 " > < / div >

< div class = " log-right l2 " > < / div >

< div class = " log-right l3 " > < / div >

< div class = " log-right l4 " > < / div >

< div class = " log-right l5 " > < / div >

< div class = " log-right l1 " > < / div >

< div class = " log-right l2 " > < / div >

< div class = " log-right l3 " > < / div >

从下面

< div class = "车右c1 " > < / div >

< div class = "车右c2 " > < / div >

< div class = "车右c3 " > < / div >

< div class = "车右c1 " > < / div >

< div class = "车右c2 " > < / div >

< div class = "车右c3 " > < / div >

< div class = "车右c1 " > < / div >

< div class = "车右c2 " > < / div >

< div class = "车右c3 " > < / div >

< div class = "车左c1 " > < / div >

< div class = "车左c2 " > < / div >

< div class = "车左c3 " > < / div >

< div class = "车左c1 " > < / div >

< div class = "车左c2 " > < / div >

< div class = "车左c3 " > < / div >

< div class = "车左c1 " > < / div >

< div class = "车左c2 " > < / div >

< div class = "车左c3 " > < / div >

• C1代表汽车c2,c3代表道路，然后添加CSS
• 在CSS中，L1、l2、l3表示日志，l4、l5表示河流和颜色

步骤3(添加运动功能):

• 为每种类型carleft、carright、logleft、logright声明常量变量，并使用查询选择器All将它们与它们的类连接起来
• 实现两种自动功能，一种用于汽车运动，另一种用于自动日志运动
• 现在我们写函数来移动车辆向左向左向右移动，log也是这样
• 在每个连接左车变量与功能移动汽车左，相同的右使用forEach方法

carsRight。forEach (carRight = > moveCarRight (carRight));

• 以同样的方式调用日志移动函数
• 我们必须声明四个函数两个用于log，两个用于汽车运动
• 在carleft和carright中有三种情况c1 c2 c3使用classList进行勾选;改变使用开关案例同样c1->c2->c3->c1为左，c1->c3,c2->c1,c3->c2为右，如下方式

例carLeft.classList.contains (c1):

carLeft.classList.remove (c1)

carLeft.classList.add (c2)

打破

• 用同样的方法处理logleft和logright但是有五种情况，l1->l2->l3->l4->l5->l1为左，l1->l5,l2->l1, l3->l2, l4->l3, l5->l4为右
• 现在我们通过声明它们的函数来设定获胜和失败的规则
• 在赢函数中，我们检查我们是否结束块包含青蛙获得'你赢'的结果在控制台使用innerhtml
• 现在，lose函数有三个条件，如果当前时间等于0，或者classList包含汽车c1或河流l4,l5，我们将在控制台“You lose”上获得输出
• 我们清除定时器，删除青蛙，使用删除事件监听器删除事件

步骤4:

• 对于青蛙的移动，我们需要两个更多的函数，包括左移和右移的圆木

• 很简单，我们检查青蛙的当前指数，如果它在左对数指数之间(如在我们的例子中，它是>=27和<35)，我们将当前指数增加1，对于右对数指数(如>18和<26)，我们将当前指数减少1

• 现在，我们声明一个名为move pieces的函数，使每个函数每秒都能工作，并添加逻辑以减少当前时间1并在剩余时间内进行更新

• 现在使用添加事件监听器，我们使用开始/暂停按钮来调用移动部件，以“点击”作为事件

• 我们添加了一个if-else语句来检查timeid的值，如果等于零，则将计时器id更新为

如果(timerId) {

clearInterval (timerId)

其他}{

timerId = setInterval(movePieces, 1000)

文档。addEventListener(“弹起”,moveFrog)

｝

• 把青蛙的CSS改为last来显示它

现在一切都完成了。这需要时间，正确地检查每一步，这样你就可以很好地渲染它。如果你希望你可以访问我的Github这个和其他项目

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

你知不知道

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

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

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

• 超文本标记语言
• JavaScript

• 游戏开发

青蛙过河游戏使用JavaScript和HTML