编码中统一更该变量的快捷键_更多项目想法，以提高您的编码技能

编码中统一更该变量的快捷键

Two weeks ago I published an article containing 15 project ideas that you can build to level up your coding skills, and people were very excited about that resource.

两周前，我发表了一篇文章，其中包含15个项目构想 ，您可以构建这些构想来提高您的编码技能，人们对该资源感到非常兴奋。

Also, the app-ideas repository has gotten almost 3000 stars since I published that article. That’s insane! ?

此外，自从我发表那篇文章以来， 应用程序思想库已经获得了近3000颗星。 太疯狂了！ ？

Thank you all for that! ?

谢谢大家！ ？

In this post we’ll go over some new projects that were added to the repository since then.

在本文中，我们将介绍自那时以来已添加到资源库中的一些新项目。

As a quick reminder, all of the projects are divided into three tiers based on the knowledge and experience required to complete them. Check out the tiers description in the repository.

快速提醒一下，根据完成项目所需的知识和经验，所有项目都分为三个层次 。 在存储库中检查层描述。

Below you’ll find 2 Beginner, 4 Intermediate and 3 Advanced project ideas.

在下面，您将找到2个初学者 ，4个中级和3个高级项目构想。

1.计算器 (1. CALCULATOR)

Tier: 1 — Beginner

等级： 1 —初学者

Calculators are not only one of the most useful tools available, but they are also a great way to understand UI and event processing in an application. In this problem you will create a calculator that supports basic arithmetic calculations on integers.

计算器不仅是可用的最有用的工具之一，而且还是理解应用程序中的UI和事件处理的好方法。 在此问题中，您将创建一个支持整数的基本算术计算的计算器。

The styling is up to you so use your imagination and get creative! You might also find it worth your time to experiment with the calculator app on your mobile device to better understand basic functionality and edge cases.

样式取决于您，因此请发挥您的想象力并发挥创造力！ 您可能还会发现值得花时间在移动设备上试用计算器应用程序，以更好地了解基本功能和边缘情况。

约束条件 (Constraints)

• You may not use the eval() function to execute calculations

  您不得使用eval()函数执行计算

用户故事 (User Stories)

• User can see a display showing the current number entered or the result of the last operation.
  用户可以看到显示输入的当前号码或上次操作结果的显示。
• User can see an entry pad containing buttons for the digits 0–9, operations — ‘+’, ‘-’, ‘/’, and ‘=’, a ‘C’ button (for clear), and an ‘AC’ button (for clear all).
  用户可以看到一个输入板，其中包含用于数字0–9的按钮，操作-“ +”，“-”，“ /”和“ =”，“ C”按钮(用于清除)和“ AC”按钮(以清除所有内容)。
• User can enter numbers as sequences up to 8 digits long by clicking on digits in the entry pad. Entry of any digits more than 8 will be ignored.
  用户可以通过单击输入板中的数字来输入数字，最多为8位数字。 超过8位的任何数字都将被忽略。
• User can click on an operation button to display the result of that operation on: _ the result of the preceeding operation and the last number entered OR _ the last two numbers entered OR * the last number entered
  用户可以单击操作按钮以在以下位置显示该操作的结果：_先前操作的结果和最后输入的数字或_ _最后输入的两个数字或*输入的最后一个数字
• User can click the ‘C’ button to clear the last number or the last operation. If the users last entry was an operation the display will be updated to the value that preceded it.
  用户可以单击“ C”按钮清除最后一个数字或最后一个操作。 如果用户的最后输入是一项操作，则显示将更新为之前的值。
• User can click the ‘AC’ button to clear all internal work areas and to set the display to 0.
  用户可以单击“ AC”按钮以清除所有内部工作区域并将显示设置为0。
• User can see ‘ERR’ displayed if any operation would exceed the 8 digit maximum.
  如果任何操作超过最大8位数字，用户可以看到显示的“ ERR”。

奖励功能 (Bonus features)

• User can click a ‘+/-’ button to change the sign of the number that is currently displayed.
  用户可以单击“ +/-”按钮来更改当前显示的数字的符号。
• User can see a decimal point (.) button on the entry pad that allows floating point numbers up to 3 places to be entered and operations to be carried out to the maximum number of decimal places entered for any one number.
  用户可以在输入板上看到一个小数点(。)按钮，该按钮允许输入最多3个位置的浮点数，并可以进行操作，直到输入任意一个数字的最大小数位数为止。

有用的链接和资源 (Useful links and resources)

• Calculator (Wikipedia)

  计算器(维基百科)

• MDN

  MDN

示例项目 (Example projects)

2.配方APP (2. RECIPE APP)

Tier: 1 — Beginner

等级： 1 —初学者

You might not have realized this, but recipes are nothing more than culinary algorithms. Like programs, recipes are a series of imperative steps which, if followed correctly, result in a tasty dish.

您可能没有意识到这一点，但是食谱不过是烹饪算法而已。 像程序一样，食谱是一系列必要的步骤，如果正确遵循的话，就可以制成可口的菜。

The objective of the Recipe app is to help the user manage recipes in a way that will make them easy to follow.

食谱应用程序的目的是帮助用户以易于遵循的方式管理食谱。

约束条件 (Constraints)

• For the initial version of this app, the recipe data may be encoded as a JSON file. After implementing the initial version of this app you may expand on this to maintain recipes in a file or database.
  对于此应用的初始版本，配方数据可以编码为JSON文件。 实施此应用程序的初始版本后，您可以对此进行扩展以在文件或数据库中维护配方。

用户故事 (User Stories)

• User can see a list of recipe titles
  用户可以看到配方标题列表
• User can click a recipe title to display a recipe card containing the recipe title, meal type (breakfast, lunch, supper, or snack), number of people it serves, its difficulty level (beginner, intermediate, advanced), the list of ingredients (including their amounts), and the preparation steps.
  用户可以单击食谱标题以显示包含食谱标题，进餐类型(早餐，午餐，晚餐或小吃)，服务的人数，其难度等级(初学者，中级，高级)，配方列表的配方卡(包括其金额)以及准备步骤。
• User click a new recipe title to replace the current card with a new recipe.
  用户单击一个新配方标题，以使用新配方替换当前卡。

奖励功能 (Bonus features)

• User can see a photo showing what the item looks like after it has been prepared.
  用户可以看到一张照片，其中显示了物品准备好后的样子。
• User can search for a recipe not in the list of recipe titles by entering the meal name into a search box and clicking a ‘Search’ button. Any open source recipe API may be used as the source for recipes (see The MealDB below).
  用户可以通过在搜索框中输入餐名并单击“搜索”按钮来搜索不在食谱标题列表中的食谱。 任何开源配方API都可以用作配方的来源(请参见下面的MealDB)。
• User can see a list of recipes matching the search terms
  用户可以看到与搜索字词匹配的食谱列表
• User can click the name of the recipe to display its recipe card.
  用户可以单击配方名称以显示其配方卡。
• User can see a warning message if no matching recipe was found.
  如果找不到匹配的配方，用户可以看到警告消息。
• User can click a ‘Save’ button on the cards for recipes located through the API to save a copy to this apps recipe file or database.
  用户可以单击卡上用于通过API定位的配方卡上的“保存”按钮，以将副本保存到此应用的配方文件或数据库中。

有用的链接和资源 (Useful links and resources)

• Using Fetch

  使用提取

• Axios

  Axios

• The MealDB API

  MealDB API

示例项目 (Example projects)

3.绘图应用 (3. DRAWING APP)

Tier: 2 — Intermediate

等级： 2-中级

Create digital artwork on a canvas on the web to share online and also export as images.

在网上的画布上创建数字作品，以在线共享并导出为图像。

用户故事 (User Stories)

• User can draw in a canvas using the mouse

  用户可以使用鼠标在canvas绘制

• User can change the color
  用户可以更改颜色
• User can change the size of the tool
  用户可以更改工具的大小

• User can press a button to clear the canvas

  用户可以按一个按钮清除canvas

奖励功能 (Bonus features)

• User can save the artwork as an image (.png, .jpg, etc format)

  用户可以将图稿另存为图像( .png ， .jpg等格式)

• User can draw different shapes (rectangle, circle, star, etc)

  用户可以绘制不同的形状( rectangle ， circle ， star等)

• User can share the artwork on social media
  用户可以在社交媒体上分享艺术品

有用的链接和资源 (Useful links and resources)

• Learn how to create a Drawing Application using p5js

  了解如何使用p5js创建绘图应用程序

示例项目 (Example projects)

4. EMOJI翻译器 (4. EMOJI TRANSLATOR)

Tier: 2 — Intermediate

等级： 2-中级

Emojis have become the lingua franca of modern society. They are a fun and fast way to communicate, but an also extremely expressive mechanism for communicating emotions and reactions.

表情符号已成为现代社会的通用语 。 它们是一种有趣而又快速的交流方式，同时也是表达情感和React的极具表现力的机制。

The objective of the Emoji Translator app is to translate text entered by the user into an equivalent string of emojis, translated from one or more words in the original text, and words for which there is no corresponding emoji.

Emoji Translator应用程序的目的是将用户输入的文本翻译成等效的emoji字符串，从原始文本中的一个或多个单词翻译成没有对应emoji的单词。

用户故事 (User Stories)

• User can enter a string of words, numbers, and punctuation into a text box
  用户可以在文本框中输入字符串，数字和标点符号
• User can click a ‘Translate’ button to translate words in the entered text into their corresponding emojis.
  用户可以单击“翻译”按钮，将输入文本中的单词翻译成其相应的表情符号。
• User can see a warning message if ‘Translate’ was clicked, but the input text box was empty or unchanged from the last translation.
  如果单击了“翻译”，则用户会看到警告消息，但是输入文本框为空或与上一次翻译相比未更改。
• User can see text elements in the entered text translated to their equivalent emojis in an output text box. Text elements for which there is no emoji will be left unchanged.
  用户可以在输出文本框中看到输入的文本中的文本元素，这些文本元素已转换为等效的表情符号。 没有表情符号的文本元素将保持不变。
• User can click a ‘Clear’ button to clear the input and output text boxes.
  用户可以单击“清除”按钮清除输入和输出文本框。

奖励功能 (Bonus features)

• Developer will implement an emoji synonym feature to allow the app to translate a wider variety of words to emoji.
  开发人员将实现表情符号同义词功能，以允许该应用将更多种类的单词翻译为表情符号。
• User can select the language the input text is entered from a dropdown list of languages.
  用户可以从语言下拉列表中选择输入文本的语言。

有用的链接和资源 (Useful links and resources)

Full Emoji List v12.0

完整的表情符号列表v12.0

示例项目 (Example projects)

Emoji Translate

表情符号

5. MEME GENERATOR APP (5. MEME GENERATOR APP)

Tier: 2 — Intermediate

等级： 2-中级

Allow users to generate custom memes by adding text over an image.

允许用户通过在图像上添加文本来生成自定义模因。

用户故事 (User Stories)

• User can upload an image that will appear in a canvas
  用户可以上传将出现在画布中的图像
• User can add text in the top part of the image
  用户可以在图像的顶部添加文本
• User can add text in the bottom part of the image
  用户可以在图像的底部添加文本
• User can select the color of the text
  用户可以选择文字的颜色
• User can select the size of the text
  用户可以选择文字大小
• User can save the resulting meme
  用户可以保存生成的模因

奖励功能 (Bonus features)

• User can select the font-family for the text
  用户可以选择文本的字体系列
• User can share the meme on social media (twitter, reddit, facebook, etc)
  用户可以在社交媒体(推特，reddit，facebook等)上共享模因
• User can drag the text around and place it wherever he wants on top of the image
  用户可以在文本周围拖动文本并将其放置在图像上方的任何位置
• User can draw shapes on top of the image (circles, rectangles, or free drawing with the mouse)
  用户可以在图像上方绘制形状(圆形，矩形或使用鼠标自由绘制)

有用的链接和资源 (Useful links and resources)

Working with canvas is made very easy by the p5js library.

p5js库使使用canvas变得非常容易。

示例项目 (Example projects)

Meme Generator by imgflip

Meme Generator由imgflip

6.打字习惯 (6. TYPING PRACTICE)

Tier: 2 — Intermediate

等级： 2-中级

Some things are so obvious they can be easily overlooked. As a developer your ability to type quickly and accurately is one factor that influences your development productivity. The objective of the Typing Practice app is to provide you with typing practice along with metrics to allow you to measure your progress.

有些事情非常明显，很容易被忽略。 作为开发人员，您快速准确键入的能力是影响您开发效率的因素之一。 打字练习应用程序的目的是为您提供打字练习以及相关指标，以帮助您衡量进度。

Typing practice displays a word which you must then type within a specific interval of time. If the word is incorrectly typed it stays on screen and the time interval remains the same. But when the word is correctly typed a new word is displayed and the time interval is slightly reduced.

键入练习将显示一个单词，然后必须在特定的时间间隔内键入该单词。 如果该单词输入错误，它将停留在屏幕上，并且时间间隔保持不变。 但是，正确键入单词后会显示一个新单词，并且时间间隔会略微缩短。

Hopefully, this repetitive practice will help you improve both your typing speed and accuracy.

希望这种重复的做法将帮助您提高打字速度和准确性。

用户故事 (User Stories)

• User can see the time interval words must be typed in displayed in the app window.
  用户可以看到必须输入的时间间隔字会显示在应用程序窗口中。
• User can see the number of successful attempts and the number of total attempts in a score box.
  用户可以在分数框中查看成功尝试的次数和总尝试的次数。
• User can click a ‘Start Practice’ button to start the practice session.
  用户可以单击“开始练习”按钮以开始练习会话。
• User can see the prompt word displayed in a text box.
  用户可以看到在文本框中显示的提示词。
• User can begin typing the word in a text input box.
  用户可以开始在文本输入框中输入单词。
• User can see the letters that have been typed flash if an incorrect letter is entered and the text input box will be cleared.
  如果输入了错误的字母，并且文本输入框将被清除，则用户可以看到键入的字母闪烁。
• User can see the a message adjacent to the text input box indicating the user should try again if an incorrect letter is entered.
  用户可以在文本输入框旁边看到一条消息，指示如果输入了错误的字母，则用户应再次尝试。
• User can see the number of total attempts incremented in the score box.
  用户可以在分数框中看到增加的总尝试次数。
• User can see a congratulations message if the word is correctly typed.
  如果正确键入单词，用户可以看到祝贺消息。
• User can see the time interval words must be typed decremented by a small amount if the word is correctly typed.
  用户可以看到，如果正确键入单词，则必须键入少量的时间间隔单词。
• User can see the number of successful attempts incremented in the score box if the word was correctly typed.
  如果正确键入单词，用户可以在分数框中看到增加的成功尝试次数。
• User can click a ‘Stop Practice’ button to stop the practice session.
  用户可以单击“停止练习”按钮以停止练习。

奖励功能 (Bonus features)

• User can hear a unique audible tone signaling when a new word is displayed, a word is correctly entered, or an incorrect letter is typed in the word.
  当显示新单词，正确输入单词或在单词中键入错误字母时，用户可以听到独特的声音提示。
• User can login to the app
  用户可以登录到应用程序
• User can see cumulative performance statistics across all of his/her practice sessions.
  用户可以在他/她的所有练习中查看累积的性能统计信息。

有用的链接和资源 (Useful links and resources)

• keydown

  按键

• setInterval

  setInterval

示例项目 (Example projects)

Twiddler Typing Tutor

钳子打字导师

7.电梯 (7. ELEVATOR)

Tier: 3 — Advanced

等级： 3-高级

It’s tough to think of a world without elevators. Especially if you have to walk up and down 20 flights of stairs each day. But, if you think about it elevators were one of the original implementations of events and event handlers long before web applications came on the scene.

很难想象没有电梯的世界。 特别是如果您每天必须上下走20层楼梯。 但是，如果您考虑一下，电梯早在Web应用程序出现之前就已经是事件和事件处理程序的原始实现之一。

The objective of the Elevator app is to simulate the operation of an elevator and more importantly, how to handle the events generated when the buildings occupants use it. This app simulates occupants calling for an elevator from any floor and pressing the buttons inside the elevator to indicate the floor they wish to visit.

Elevator应用程序的目的是模拟电梯的运行，更重要的是，如何处理建筑物占用者使用电梯时产生的事件。 这个应用程序模拟了居住者从任何楼层呼唤电梯并按下电梯内的按钮以指示他们希望访问的楼层的情况。

约束条件 (Constraints)

• You must implement a single event handler for the up and down buttons on each floor. For example, if there are 4 floors a single event handler should be implemented rather than 8 (two buttons per floor).
  您必须为每个楼层的向上和向下按钮实现单个事件处理程序。 例如，如果有4个楼层，则应实施单个事件处理程序，而不是8个(每个楼层两个按钮)。
• Similarly, a single event handler should be implemented for all buttons on the control panel in the elevator rather than a unique event handler for each button.
  类似地，应该为电梯控制面板上的所有按钮实现单个事件处理程序，而不是为每个按钮实现唯一的事件处理程序。

用户故事 (User Stories)

• User can see a cross section diagram of a building with four floors, an elevator shaft, the elevator, and an up button on the first floor, up and down buttons on the second and third floors, and a down button on the fourth floor.
  用户可以看到四层建筑物的横截面图，其中电梯竖井，电梯以及一楼的向上按钮，二楼和三楼的向上和向下按钮以及四楼的向下按钮。
• User can see the elevator control panel with a button for each of the floors to the side of the diagram.
  用户可以在图侧面的每个楼层看到带有按钮的电梯控制面板。
• User can click the up and down button on any floor to call the elevator.
  用户可以点击任意楼层的上下按钮来呼叫电梯。
• User can expect that clicking the up and down buttons on any floor to request the elevator will be queued and serviced in the sequence they were clicked.
  用户可以期望单击任意楼层上的向上和向下按钮以请求电梯按其被单击的顺序排队和维修。
• User can see the elevator move up and down the shaft to the floor it was called to.
  用户可以看到电梯将竖井上下移动到被呼叫的楼层。
• User can click the elevator control panel to select the floor it should travel to.
  用户可以单击电梯控制面板以选择应该行驶的楼层。
• User can expect the elevator to pause for 5 seconds waiting for a floor button on the control panel to be clicked. If a floor button isn’t clicked within that time the elevator will process the next call request.
  用户可以期望电梯暂停5秒钟，以等待单击控制面板上的楼层按钮。 如果在此时间内未单击楼层按钮，则电梯将处理下一个呼叫请求。
• User can expect the elevator to return to the first floor when there are no requests to process.
  没有任何处理请求时，用户可以期望电梯返回第一层。

奖励功能 (Bonus features)

• User can see a warning notification if the number of elevator requests exceeds the maximum number allowed. This limit is left to the developer.
  如果电梯请求的数量超过允许的最大数量，则用户可以看到警告通知。 此限制留给开发人员。
• User can hear a sound when the elevator arrives at a floor.
  当电梯到达地板时，用户可以听到声音。
• User can see an occupant randomly arrive at a floor to indicate when the user should click the up or down elevator call button on that floor.
  用户可以看到居住者随机到达某个楼层，以指示用户何时应单击该楼层上的上下电梯呼叫按钮。
• User can specify the time interval between new occupants arriving to call an elevator.
  用户可以指定到达电梯的新乘客之间的时间间隔。

有用的链接和资源 (Useful links and resources)

First-in, first out queue (Wikipedia)

先进先出队列(Wikipedia)

示例项目 (Example projects)

8.快速食品模拟器应用程序 (8. FAST FOOD SIMULATOR APP)

Tier: 3 — Advanced

等级： 3-高级

Fast Food app simulates the operation of a simple take-away restaurant and is designed to help the developer put their knowledge of Promises and SOLID design principles to work.

Fast App应用程序模拟了一个简单的外卖餐厅的操作，旨在帮助开发人员将其对Promises和SOLID设计原则的了解付诸实践。

This app simulates customers of a take-away restaurant placing orders and and waiting for them to be prepared and delivered to a pickup counter. After placing the order the customer waits on the order to be announced before picking it up and proceeding to the dining area.

此应用程序模拟外卖餐厅的客户下订单，并等待他们准备好并交付给取货柜台。 下订单后，客户等待订单被宣布，然后再提货并前往用餐区。

The user stories that make up this app center around four distinct roles:

构成此应用程序的用户故事围绕四个不同的角色：

• User — the end user using the application
  用户-使用该应用程序的最终用户
• Customer — the simulated Customer
  客户-模拟客户
• Order Taker — the simulated Order Taker
  接单员—模拟的接单员
• Cook — the simulated Cook
  库克-模拟库克
• Server — the simulated Server
  服务器-模拟服务器

This app has quite a few User Stories. Don’t be overwhelmed though. Take the time to sketch out not just the UI, but how the different actors (roles) interact and incrementally build the app following Agile principles.

这个程序有很多用户故事。 但是不要被淹没。 花时间画出的不仅是用户界面，还有其他角色(角色)如何按照敏捷原则进行交互并逐步构建应用程序。

约束条件 (Constraints)

• Order tickets can be represented as two different types of Promises — one the Server waits on while the Cook prepares the order and another the Customer waits on while in the serving line.
  订单可以表示为两种不同类型的承诺：一种是在厨师准备订单时服务器等待，另一种是客户在服务线上等待的客户。

• Use the native equivalent of JS Promises in whichever language you choose to develop in. JS developers should use native Promises and not async/await.

  无论您选择使用哪种语言开发，都应使用与JS Promises等效的本机。JS开发人员应使用本机Promises而不是async/await 。

• Create this app using native language features. You may NOT use a simulation package or library.
  使用母语功能创建此应用。 您不得使用仿真程序包或库。
• New customers arrive in the order line at a fixed interval of time. In other words, new customers arrive at a constant rate.
  新客户以固定的时间间隔到达订单行。 换句话说，新客户以恒定的速度到达。
• Order tickets are fulfilled at a fixed interval of time as well. They are completed at a constant rate.
  订单也按固定的时间间隔完成。 它们以恒定的速率完成。

用户故事 (User Stories)

Application Operation

应用操作

• User can see an input area that allows the entry of the time interval for customer arrival and a time interval for the fulfillment of an order ticket by the cook.

  用户可以看到一个输入区域，该区域允许输入顾客到达的时间间隔和厨师完成订单的时间间隔。

• User can see a customized warning message if the customer arrival interval or the order fulfillment interval is incorrectly entered.
  如果错误地输入了客户到达间隔或订单履行间隔，则用户可以看到定制的警告消息。
• User can start the simulation by clicking on a Start button.
  用户可以通过单击开始按钮来启动仿真。
• User can see an order line area containing a text box showing the number of customers waiting to place orders.
  用户可以看到包含文本框的订单行区域，其中显示了等待下订单的客户数量。

• User can see an order area containing text boxes showing the order number currently being taken.

  用户可以看到一个包含文本框的订单区域，其中显示了当前正在使用的订单号 。

• User can see a kitchen area containing a text box showing the order number that’s being prepared and a text box listing the waiting orders in sequence, along with a count of the number of waiting orders.

  用户可以看到一个厨房区域，其中包含一个显示正在准备的订单号的文本框和一个依次列出等待订单的文本框，以及等待订单数量的计数。

• User can see a Pickup area containing a text box showing the order number that’s currently available for pickup by the Customer and a text box showing the number of Customers waiting in the serving line.

  用户可以在“提货”区域看到一个文本框，该文本框显示客户当前可用于提货的订单号 ，而一个文本框显示在服务行中等待的客户数量。

• User can stop the simulation at any time by clicking a Stop button.
  用户可以随时单击“停止”按钮来停止模拟。

奖励功能 (Bonus features)

• User can specify how long it takes for an Order Taker to create an order ticket.

  用户可以指定需要多长时间的接单员，以创建一个订单票 。

• User can specify how long it takes for the Server to deliver an order to the customer.
  用户可以指定服务器将订单交付给客户所需的时间。
• User can specify the total amount of time the simulation is to run once the Start button has been clicked.
  单击“开始”按钮后，用户可以指定运行模拟的总时间。
• User can see an animated view of Customers and orders as they move through the workflow.
  当客户和订单在工作流程中移动时，用户可以看到它们的动画视图。

有用的链接和资源 (Useful links and resources)

• Fast Food Simulator — Logical Workflow

  快餐模拟器—逻辑工作流

• Agile Manifesto & 12 Principles of Agile Software

  敏捷宣言和敏捷软件的12条原则

• SOLID Principles Every Developer Should Know

  每个开发人员都应该知道的SOLID原则

• Using Promises

  使用承诺

• Promise

  诺言

9.壳牌游戏 (9. SHELL GAME)

Tier: 3 — Advanced

等级： 3-高级

A Shell game is a classic gambling game that dates back to ancient Greece. Playing it requires three shells, a pea, hand dexterity by the operator, and keen observation skills on the part of the player. It’s also a classic con game since it’s easy for the operator to swindle the player. Thank goodness the latter isn’t our intent with this app.

壳牌游戏是一种经典的赌博游戏，其历史可以追溯到古希腊。 演奏它需要三个炮弹，一个豌豆，操作员的手灵巧性以及演奏者敏锐的观察技巧。 这也是经典的骗局，因为操作员很容易欺骗玩家。 谢天谢地，后者不是我们使用此应用的目的。

This Shell game is intended to provide a graphical interface to the classical shell game and to provide the player with an honest game to play. Our game draws three shells on the canvas along with the pea, moves the pea under one, of the shells, and shuffles the shells for a specific interval of time. The user must then click on the shell they think the pea is hidden under. The user is allowed to continue guessing until the pea is located.

此Shell游戏旨在为经典Shell游戏提供图形界面，并为玩家提供诚实的游戏玩法。 我们的游戏在画布上与豌豆一起绘制了三个贝壳，将豌豆移至其中一个贝壳下方，并在特定的时间间隔内对贝壳进行洗牌。 然后，用户必须单击他们认为豌豆藏在下面的贝壳。 允许用户继续猜测直到找到豌豆。

用户故事 (User Stories)

• User can see the canvas with three shells and the pea.
  用户可以看到带有三个贝壳的帆布和豌豆。
• User can click the shell the pea is to be hidden under.
  用户可以单击要隐藏豌豆的壳。
• User can see the pea move under the shell thats been clicked.
  用户可以看到豌豆在被单击的外壳下移动。
• User can click on a ‘Shuffle’ button to start an animated shuffling of the shells for 5 seconds.
  用户可以单击“随机播放”按钮以开始动画播放贝壳5秒钟。
• User can click on the shell she believes the pea is hidden under when the animation stops.
  用户可以单击动画停止时她认为豌豆隐藏在其下的外壳。
• User can see the shell that has been clicked rise to reveal if the pea is hidden under it.
  用户可以看到被点击的贝壳升起，以显示豌豆是否藏在其下方。
• User can continue clicking shells until the pea is found.
  用户可以继续单击贝壳，直到找到豌豆。
• User can see a congratulations message when the pea is located
  豌豆位于时，用户可以看到祝贺消息
• User can start a new game by clicking a shell the pea is to be hidden under (step #2 above). The steps above are then repeated.
  用户可以通过单击要隐藏豌豆的外壳开始新游戏(上面的步骤2)。 然后重复上述步骤。

奖励功能 (Bonus features)

• User can see a score panel containing the number of wins and the number of games played.
  用户可以看到一个分数面板，其中包含获胜次数和玩过的游戏次数。
• User can see the number of games played increase when the pea is hidden under a shell
  当豌豆藏在壳下时，用户可以看到玩的游戏数量增加
• User can see the number of wins incremented when the pea is found on the first guess.
  当第一次猜豌豆时，用户可以看到获胜次数增加。
• User can see the shell hiding the pea to animate (color, size, or some other effect) when it is clicked (a correct guess).
  用户单击它时(正确的猜测)，可以看到壳隐藏了豌豆以进行动画处理(颜色，大小或其他效果)。

有用的链接和资源 (Useful links and resources)

• Shell Game (Wikipedia)

  壳牌游戏(维基百科)

• Javascript HTML DOM Animation

  Javascript HTML DOM动画

• p5js Animation Library

  p5js动画库

示例项目 (Example projects)

结论 (Conclusion)

Don’t forget to check out the previous article and the repository if you want to find more application/project ideas.

如果您想找到更多的应用程序/项目构想，请不要忘记查看上一篇文章和存储库 。

Also, if the information from this article and from the repo was useful to you in any way, make sure you give it a star ?; this way others can find it and benefit too! Thank you!

另外，如果本文和回购中的信息对您有任何帮助，请确保给它加一个星号？ 这样，其他人也可以找到它并从中受益！ 谢谢！

Do you have any suggestions on how we could improve this project overall? Let us know! We’d love to hear your feedback!

您对我们如何整体改善该项目有任何建议吗？ 让我们知道！ 我们希望听到您的反馈！

You are welcomed to contribute with your own ideas! We can make this repository the go-to resource when it comes to app ideas.

欢迎您为自己的想法做出贡献！ 当涉及到应用创意时，我们可以使该存储库成为首选资源。

Originally published at www.florin-pop.com.

最初在www.florin-pop.com上发布。

翻译自: https://www.freecodecamp.org/news/more-project-ideas-to-improve-your-coding-skills-99f48d09bb4b/

编码中统一更该变量的快捷键