javascript做游戏_我用JavaScript构建了一个角色扮演游戏。 你也可以 这是如何做。...

javascript做游戏

by Robert Skalko

罗伯特·斯科尔科(Robert Skalko)

我用JavaScript构建了一个角色扮演游戏。 你也可以 这是如何做。 (I built a role playing game in JavaScript. You can, too. Here’s how.)

So you want to try and make a game, but are a bit intimidated? Don’t worry, I was too!

因此，您想尝试制作游戏，但感到有些害怕吗？ 别担心，我也是！

I was afraid of using objects, for example. They were this big spooky thing that I shelved away for later. But now I use them all the time!

例如，我害怕使用对象。 它们是一件大的怪异事物，我将其搁置以备后用。 但是现在我一直在使用它们！

I’m going to walk you through all the steps I went through to build my JavaScript role playing game.

我将引导您完成构建JavaScript角色扮演游戏所经历的所有步骤。

Here’s my game running on CodePen. (Note that it’s not yet optimized for mobile):

这是我在CodePen上运行的游戏。 (请注意，它尚未针对移动设备进行优化)：

First, pick the point of your game. Is it a puzzle? An RPG? A hack & slash? All right, now think about the technical difficulties of making it. A puzzle game would require a lot of complicated javascript. A hack & slash would need a lot of careful balancing, and so on.

首先 ， 选择游戏要点。 这是一个难题吗？ 角色扮演游戏？ 砍刀吗？ 好吧，现在考虑一下制作它的技术难度。 一个益智游戏将需要很多复杂JavaScript。 砍刀和砍刀需要仔细平衡，以此类推。

Also, decide whether you want it to be a browser game, a mobile game, or both (a “native web” game).

另外，确定您希望它是浏览器游戏，手机游戏还是两者(“本机网络”游戏)。

For example, my game can’t fit well on mobile screen, because the player has 24 spells. That’s not comfortable clicking these small buttons on a tiny screen, so I would need to redesign the game for mobile.

例如，我的游戏不能很好地适应手机屏幕，因为玩家有24个咒语。 在小屏幕上单击这些小按钮并不舒服，因此我需要重新设计手机游戏。

Second, write down all the things you need to program to actually make the game. For me it was:

其次 ，写下编写游戏所需的所有东西。 对我来说是：

• an inventory system
  库存系统
• an item generator
  项目生成器
• a player stat system
  球员统计系统
• a saving system
  一个储蓄系统

Third, start making your game by solving these problems one by one.

第三 ，通过一一解决这些问题来开始制作游戏。

需要实际创建游戏的帮助吗？ (Need help actually creating the game?)

It’s much easier to break your game down into small tasks. You’re not making a game, you’re making an inventory system. Then you’re making a combat system. And so on.

将您的游戏分解成小任务要容易得多。 您不是在制作游戏，而是在制作库存系统。 然后，您正在建立一个战斗系统。 等等。

Unless you are already good at drawing — or want to spend months or years getting good at it — use these tools to create assets that will make your game look good:

除非您已经很擅长绘画-或想花费数月或数年来完善它-否则，请使用以下工具来创建可使您的游戏看起来不错的资产：

• Game-Icons.net — these icons are fun and easy to color

  Game - Icons.net-这些图标有趣且易于着色

• Open Game Art — get some great public domain assets

  开放游戏艺术 -获得一些出色的公共领域资产

• Bulk Resize Photos — a great tool for making your own tiny icons

  批量调整照片大小 -制作自己的小图标的绝佳工具

• CSS Sprite Generator — helps you make CSS spritesheets for your icons

  CSS Sprite Generator —帮助您制作图标CSS Spritesheets

我遇到的问题以及解决方法 (Issues I encountered them and how I solved them)

精灵表 (Spritesheets)

Do you plan on having more than 20 images in your game? If so, you don’t want to make 20 images with image links to each one. You might not think 20 images is that much, but if you decide to add 50 more? That’s where spritesheets come in handy. Put some pictures onto them, copy the CSS file to your project, and just add the class to your element that corresponds with your desired image.

您打算在游戏中拥有20张以上的图像吗？ 如果是这样，您不希望制作20张图像，每个图像均具有图像链接。 您可能不认为20张图像那么多，但是如果您决定再添加50张？ 那就是Spritesheet派上用场的地方。 将一些图片放到它们上，将CSS文件复制到您的项目中，然后将类添加到与所需图像相对应的元素中。

保存游戏状态 (Saving your game’s state)

Do you want your game to be saved? Well you can choose between using the browser’s LocalStorage and storing things on a server. Servers require back end knowledge. If you have none, I suggest using LocalStorage. It saves the game as long as the user doesn’t delete it with some cleanup tool. Here’s how I did it:

您要保存游戏吗？ 好了，您可以选择使用浏览器的LocalStorage还是将内容存储在服务器上。 服务器需要后端知识。 如果没有，我建议使用LocalStorage。 只要用户不使用某些清理工具将其删除，它就可以保存游戏。 这是我的做法：

Basically, save all your data in one object, then update your items on load. Use the JSON stringify and parse it later.

基本上，将所有数据保存在一个对象中，然后在加载时更新项目。 使用JSON字符串化并稍后解析。

模块化您的代码 (Modularize your code)

Figure out which part to hard-code and which parts to modularize. I mistakenly started hard-coding spells, which got ugly quickly. I needed 24 of these functions, along with 24 ifCritical functions.

找出要硬编码的部分和要模块化的部分。 我错误地开始对拼写进行硬编码，但很快就变得丑陋了。 我需要这些功能中的24个，以及24个ifCritical函数。

Now you may ask, how does the second spell work? I have a function playerAttack() that uses the spell object to do stuff:

现在您可能会问，第二个咒语是如何工作的？ 我有一个函数playerAttack()，该函数使用spell对象做事情：

• It first runs the update spells function, which calls the spells object. Then the spell takes your current stats and turns them into values like “damage” and “mana cost”.
  它首先运行update spells函数，该函数调用spells对象。 然后，该法术会获取您当前的状态并将其转换为“伤害”和“法力消耗”之类的值。
• It checks to see whether the damage is more than 0. If yes, it does damage to boss and displays the damage, which spell did it, and the amount. It does this for most other values, too. You might think that a greater-than-zero check is useless, but you’ll think again when the game says you did 0 damage and restored 0 mana.
  它会检查伤害是否大于0。如果是，它将对首领造成伤害并显示伤害，造成伤害的法术和伤害值。 它还针对大多数其他值执行此操作。 您可能会认为大于零的检查是没有用的，但是当游戏说您造成0点伤害并恢复了0点法力值时，您会再次考虑。
• Then it runs a custom function, if the spell has one. This could be used to give spells special effects which aren’t possible through our main attack function.
  然后，如果该咒语包含一个，它将运行一个自定义函数。 这可以用来赋予法术特殊效果，这是我们的主要攻击功能无法实现的。

游戏循环 (The game loop)

For me, the game loop checks and update things: player stats, whether the player is dead, whether the player just leveled up, whether a boss is dead, and so on.

对我而言，游戏循环检查并更新以下内容：玩家统计信息，玩家是否已死亡，玩家是否刚刚升级，老板是否已死亡等等。

You’ll have to figure this one out yourself. I think it’s good learning experience. Think about for what and when the checks and updates need to run. For example, with a level check, I set it to run every 20 seconds since leveling isn’t that big a deal.

您必须自己弄清楚这一点。 我认为这是很好的学习经验。 考虑一下什么以及何时需要运行检查和更新。 例如，通过级别检查，我将其设置为每20秒运行一次，因为级别调整没什么大不了的。

But then I also have a Boss death check which runs every second after battle starts. Why? So players don’t have to wait 20 seconds for a boss to die.

但是然后我还有一个Boss死亡检查，它在战斗开始后每秒进行一次。 为什么？ 因此，玩家不必等待20秒就可以使老板死亡。

Some other things don’t even need to be in a loop. The functions can just be called when they are needed. Take my update spell function, for example. It’s only called when a player uses a spell.

其他一些事情甚至不需要陷入循环。 仅在需要时才可以调用这些函数。 以我的更新拼写功能为例。 仅当玩家使用咒语时才调用。

我学到的一些东西： (A few things I’ve learned:)

• Objects are good. This way, when you have to save data, you just need to save the object — not the 50 individual variables.
  对象很好。 这样，当您必须保存数据时，只需要保存对象-而不是50个单独的变量。
• Always set timeouts and intervals as variables, so they can be cleared later on — unless they are permanent effects that and you’re sure you won’t ever need to clear them.
  始终将超时和时间间隔设置为变量，以便以后可以清除它们-除非它们是永久影响，并且您确定永远不需要清除它们。
• One big javascript file might not be a wise idea. CodePen only allows for one JavaScript file, but ideally, you should separate everything into modules.
  一个大的javascript文件可能不是一个明智的主意。 CodePen只允许一个JavaScript文件，但是理想情况下，您应该将所有内容都分成模块。

• If you’re not worried about performance, you can just copy and paste the object when it needs to be updated — no need for updating half of the values individually. If the object is huge, you can even define the object first as a variable like: var object; and then build it up using some other function when you want it to be updated. I did this with my spells. Every time player casts a spell, the updateSpell() function first defines the spells object again, calculates all the damage and stats, and then fires the spell.

  如果您不担心性能，则只需在需要更新时复制并粘贴对象即可-无需单独更新一半的值。 如果对象很大，您甚至可以先将对象定义为变量，例如： var object; 然后在需要更新时使用其他功能对其进行构建。 我用我的咒语做到了。 每次玩家施放咒语时，updateSpell()函数都会首先再次定义咒语对象，计算所有伤害和属性，然后触发该咒语。

我折衷的有趣之处： (Funny things I’ve compromised on:)

• Skill mana costs are per boss level, because if they were at the player level, I’d punish players for leveling up. This also made higher level bosses much harder, which I liked.
  技能法术力费用是按老板级别计算的，因为如果是在玩家级别，我会惩罚升级的玩家。 这也使高级别的老板变得更加困难，这是我喜欢的。
• Items are created with all stats, but they are not displayed if they are 0. This way, I don’t need to check for undefined, and I can avoid displaying stats if they’re generated as 0. Double win!
  项目是使用所有统计信息创建的，但是如果它们为0，则不会显示它们。这样，我不需要检查未定义的数据，并且如果将统计信息生成为0，就可以避免显示统计信息。双赢！
• I have simplified buffs and debuffs a lot. Basically, there’s a var buffStat, nerfStat, totalStat and stat. So buffs or debuffs never stack.
  我简化了很多增益和减益效果。 基本上，有一个var buffStat，nerfStat，totalStat和stat。 因此，增益或减益不会叠加。
• With bosses, nerf stat skill doesn’t actually nerf it to 0. This is a lot more sophisticated than that. It nerfs the stat by 9999999, then checks to see if it’s less than 0. If yes, it sets it to 0. So if you manage to reach a level where you have stats that are in the billions, I might have to add more zeros.
  对于上司，nerf stat技能实际上不会使其变为0。这要复杂得多。 它使统计值达到9999999，然后检查其是否小于0。如果是，则将其设置为0。因此，如果您设法达到统计值处于数十亿的水平，则可能需要添加更多零。

What all of this has thought me is that I should plan a bit further ahead, even if I’m just building a fun project to expand my own skills.

所有这些使我想到的是，即使我只是在构建一个有趣的项目来扩展自己的技能，我也应该进一步计划。

Also, I now have a much better understanding of how bugs arise: sometimes you don’t realize all the edge cases where things can break down the road. And that’s when the bugs bite.

而且，我现在对错误的产生方式有了更好的了解：有时您没有意识到所有可能导致故障的极端情况。 那就是虫咬的时候。

漏洞与利用 (Bugs and Exploits)

This one amazed me, and scared me a little. I couldn’t believe that my perfect piece of art contained bugs!

这个让我感到惊讶，并让我有些害怕。 我简直不敢相信我的完美艺术品包含错误！

Ok, I’m exaggerating a bit. But I did underestimate the sheer number of things that could go wrong without me even realizing it.

好吧，我有点夸张了。 但是我确实低估了很多事情，即使我什至没有意识到，也会出错。

Here’s a few bugs and exploits that cropped up, off the top of my head:

这是我脑海中浮现的一些错误和漏洞：

1. You could change boss levels while battling a boss, and get better loot drops that way
   您可以在与boss战斗时改变boss的等级，并以此获得更好的战利品掉落
2. HP and Mana bars would sometime overflow
   HP和Mana酒吧有时会溢出
3. You could attack the boss before the battle even started. Talk about a sucker punch!
   您甚至可以在战斗开始之前就攻击老板。 谈论抽油杆！
4. Mana could go negative, which prevented you from being able to perform even basic attacks, which is the main way you can restore your mana.
   法力值可能会变为负值，这使您无法进行基本攻击，这是恢复法力值的主要方法。
5. Heals temporarily increased your maximum health.
   暂时治愈会增加您的最大生命值。
6. One spell wasn’t actually clickable most of the time due to a CSS problem
   大多数情况下，由于CSS问题，实际上无法点击一种咒语
7. Attacking while not in combat put your spells on infinite cooldown
   不在战斗中进行攻击会使您的法术无限冷却

These all sound horrifying right? In an MMORPG, these things would be abused from day one and ruin everything!

这些都听起来很恐怖吧？ 在MMORPG中，这些东西从第一天起就会被滥用，并破坏一切！

Well, the good news is that most of them were easily fixable — usually with less than 1 line of code.

好消息是，它们中的大多数很容易修复-通常只需不到1行代码。

Others bugs, though, required me to completely rework the entire system. With the spell system, I went from having to write 3 whole functions for each spell to needing only a small object which takes only a few seconds of editing.

但是，其他错误要求我完全重做整个系统。 使用咒语系统，我从必须为每个咒语编写3个完整功能，到只需要一个仅花费几秒钟编辑时间的小对象。

Again, here’s my game if you want to try it out (note that it’s not optimized for mobile devices):

再说一次，如果您想尝试一下，这是我的游戏(请注意，它并非针对移动设备进行了优化)：

And here’s the code (which is also open source and editable on CodePen):

这是代码(它也是开源的，并且可以在CodePen上编辑)：

RobertSkalko/LOOT-RPG-v1.0LOOT-RPG-v1.0 - Kill bosses, get LOOT!github.com

RobertSkalko / LOOT-RPG-v1.0 LOOT-RPG- v1.0-杀死头目 ，获得战利品！ github.com

Keep in mind that I’m a beginner (just 2 months into programming) so some of my solutions can be improved. Hopefully though, I gave you at least the basics to get you started!

请记住，我是一个初学者(距离编程仅2个月)，因此可以改善我的一些解决方案。 不过，希望我至少给了您入门的基础知识！

Have fun creating your Javascript game!

玩得开心，创建您的Javascript游戏！

翻译自: https://www.freecodecamp.org/news/learning-javascript-by-making-a-game-4aca51ad9030/

javascript做游戏