{"json_modified": "2016-06-24T11:09:05.897905", "uuid": "67a8dbc9-8560-468d-ae9e-4d86190112b8", "title": "Paddle and keyboard controls", "url": "/en-US/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/Paddle_and_keyboard_controls", "tags": ["Canvas", "Beginner", "canvas", "Graphics", "beginner", "Tutorial", "JavaScript", "Controls", "keyboard", "Games"], "translations": [{"uuid": "798c366b-f75a-4d21-82a5-8d2f922d5512", "title": "\u0420\u0430\u043a\u0435\u0442\u043a\u0430 \u0438 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u043a\u043b\u0430\u0432\u0438\u0430\u0442\u0443\u0440\u043e\u0439", "url": "/ru/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/Paddle_and_keyboard_controls", "tags": [], "summary": "<span class=\"translation-chunk\" style=\"background-color: rgb(255, 255, 255); color: rgb(34, 34, 34); cursor: text; font-family: arial,helvetica,sans-serif; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 19.2px; margin: 0px; outline: 0px; padding: 0px; text-align: start; text-indent: 0px; text-transform: none; white-space: pre-wrap;\">\u041c\u044f\u0447</span><span class=\"translation-chunk\" style=\"background-color: rgb(255, 255, 255); color: rgb(34, 34, 34); cursor: text; font-family: arial,helvetica,sans-serif; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 19.2px; margin: 0px; outline: 0px; padding: 0px; text-align: start; text-indent: 0px; text-transform: none; white-space: pre-wrap;\"> </span><span class=\"translation-chunk\" style=\"background-color: rgb(255, 255, 255); color: rgb(34, 34, 34); cursor: text; font-family: arial,helvetica,sans-serif; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 19.2px; margin: 0px; outline: 0px; padding: 0px; text-align: start; text-indent: 0px; text-transform: none; white-space: pre-wrap;\">\u0431\u0435\u0441\u043f\u0440\u0435\u043f\u044f\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e</span><span class=\"translation-chunk\" style=\"background-color: rgb(255, 255, 255); color: rgb(34, 34, 34); cursor: text; font-family: arial,helvetica,sans-serif; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 19.2px; margin: 0px; outline: 0px; padding: 0px; text-align: start; text-indent: 0px; text-transform: none; white-space: pre-wrap;\"> </span><span class=\"translation-chunk\" style=\"background-color: rgb(255, 255, 255); color: rgb(34, 34, 34); cursor: text; font-family: arial,helvetica,sans-serif; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 19.2px; margin: 0px; outline: 0px; padding: 0px; text-align: start; text-indent: 0px; text-transform: none; white-space: pre-wrap;\">\u043e\u0442\u0440\u0430\u0436\u0430\u0435\u0442\u0441\u044f \u043e\u0442 \u0441\u0442\u0435\u043d,</span><span class=\"translation-chunk\" style=\"background-color: rgb(255, 255, 255); color: rgb(34, 34, 34); cursor: text; font-family: arial,helvetica,sans-serif; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 19.2px; margin: 0px; outline: 0px; padding: 0px; text-align: start; text-indent: 0px; text-transform: none; white-space: pre-wrap;\"> </span><span class=\"translation-chunk\" style=\"background-color: rgb(255, 255, 255); color: rgb(34, 34, 34); cursor: text; font-family: arial,helvetica,sans-serif; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 19.2px; margin: 0px; outline: 0px; padding: 0px; text-align: start; text-indent: 0px; text-transform: none; white-space: pre-wrap;\">\u0438</span><span class=\"translation-chunk\" style=\"background-color: rgb(255, 255, 255); color: rgb(34, 34, 34); cursor: text; font-family: arial,helvetica,sans-serif; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 19.2px; margin: 0px; outline: 0px; padding: 0px; text-align: start; text-indent: 0px; text-transform: none; white-space: pre-wrap;\"> </span><span class=\"translation-chunk\" style=\"background-color: rgb(255, 255, 255); color: rgb(34, 34, 34); cursor: text; font-family: arial,helvetica,sans-serif; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 19.2px; margin: 0px; outline: 0px; padding: 0px; text-align: start; text-indent: 0px; text-transform: none; white-space: pre-wrap;\">\u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c</span><span class=\"translation-chunk\" style=\"background-color: rgb(255, 255, 255); color: rgb(34, 34, 34); cursor: text; font-family: arial,helvetica,sans-serif; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 19.2px; margin: 0px; outline: 0px; padding: 0px; text-align: start; text-indent: 0px; text-transform: none; white-space: pre-wrap;\"> </span><span class=\"translation-chunk\" style=\"background-color: rgb(255, 255, 255); color: rgb(34, 34, 34); cursor: text; font-family: arial,helvetica,sans-serif; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 19.2px; margin: 0px; outline: 0px; padding: 0px; text-align: start; text-indent: 0px; text-transform: none; white-space: pre-wrap;\">\u043d\u0430 \u043d\u0435\u0433\u043e \u0431\u0435\u0441\u043a\u043e\u043d\u0435\u0447\u043d\u043e</span><span class=\"translation-chunk\" style=\"background-color: rgb(255, 255, 255); color: rgb(34, 34, 34); cursor: text; font-family: arial,helvetica,sans-serif; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 19.2px; margin: 0px; outline: 0px; padding: 0px; text-align: start; text-indent: 0px; text-transform: none; white-space: pre-wrap;\">, </span><span class=\"translation-chunk\" style=\"background-color: rgb(255, 255, 255); color: rgb(34, 34, 34); cursor: text; font-family: arial,helvetica,sans-serif; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 19.2px; margin: 0px; outline: 0px; padding: 0px; text-align: start; text-indent: 0px; text-transform: none; white-space: pre-wrap;\">\u043d\u043e</span><span class=\"translation-chunk\" style=\"background-color: rgb(255, 255, 255); color: rgb(34, 34, 34); cursor: text; font-family: arial,helvetica,sans-serif; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 19.2px; margin: 0px; outline: 0px; padding: 0px; text-align: start; text-indent: 0px; text-transform: none; white-space: pre-wrap;\"> </span><span class=\"translation-chunk\" style=\"background-color: rgb(255, 255, 255); color: rgb(34, 34, 34); cursor: text; font-family: arial,helvetica,sans-serif; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 19.2px; margin: 0px; outline: 0px; padding: 0px; text-align: start; text-indent: 0px; text-transform: none; white-space: pre-wrap;\">\u0432 \u043d\u0430\u0441\u0442\u043e\u044f\u0449\u0435\u0435 \u0432\u0440\u0435\u043c\u044f</span><span class=\"translation-chunk\" style=\"background-color: rgb(255, 255, 255); color: rgb(34, 34, 34); cursor: text; font-family: arial,helvetica,sans-serif; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 19.2px; margin: 0px; outline: 0px; padding: 0px; text-align: start; text-indent: 0px; text-transform: none; white-space: pre-wrap;\"> </span><span class=\"translation-chunk\" style=\"background-color: rgb(255, 255, 255); color: rgb(34, 34, 34); cursor: text; font-family: arial,helvetica,sans-serif; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 19.2px; margin: 0px; outline: 0px; padding: 0px; text-align: start; text-indent: 0px; text-transform: none; white-space: pre-wrap;\">\u043d\u0435\u0442</span><span class=\"translation-chunk\" style=\"background-color: rgb(255, 255, 255); color: rgb(34, 34, 34); cursor: text; font-family: arial,helvetica,sans-serif; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 19.2px; margin: 0px; outline: 0px; padding: 0px; text-align: start; text-indent: 0px; text-transform: none; white-space: pre-wrap;\"> </span><span class=\"translation-chunk\" style=\"background-color: rgb(255, 255, 255); color: rgb(34, 34, 34); cursor: text; font-family: arial,helvetica,sans-serif; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 19.2px; margin: 0px; outline: 0px; padding: 0px; text-align: start; text-indent: 0px; text-transform: none; white-space: pre-wrap;\">\u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u0438</span><span class=\"translation-chunk\" style=\"background-color: rgb(255, 255, 255); color: rgb(34, 34, 34); cursor: text; font-family: arial,helvetica,sans-serif; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 19.2px; margin: 0px; outline: 0px; padding: 0px; text-align: start; text-indent: 0px; text-transform: none; white-space: pre-wrap;\">. </span><span class=\"translation-chunk\" style=\"background-color: rgb(255, 255, 255); color: rgb(34, 34, 34); cursor: text; font-family: arial,helvetica,sans-serif; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 19.2px; margin: 0px; outline: 0px; padding: 0px; text-align: start; text-indent: 0px; text-transform: none; white-space: pre-wrap;\">\u042d\u0442\u043e \u043d\u0435 \u0438\u0433\u0440\u0430</span><span class=\"translation-chunk\" style=\"background-color: rgb(255, 255, 255); color: rgb(34, 34, 34); cursor: text; font-family: arial,helvetica,sans-serif; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 19.2px; margin: 0px; outline: 0px; padding: 0px; text-align: start; text-indent: 0px; text-transform: none; white-space: pre-wrap;\"> </span><span class=\"translation-chunk\" style=\"background-color: rgb(255, 255, 255); color: rgb(34, 34, 34); cursor: text; font-family: arial,helvetica,sans-serif; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 19.2px; margin: 0px; outline: 0px; padding: 0px; text-align: start; text-indent: 0px; text-transform: none; white-space: pre-wrap;\">\u0435\u0441\u043b\u0438 \u0412\u044b \u043d\u0435 \u043c\u043e\u0436\u0435\u0442\u0435 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u0438\u0440\u043e\u0432\u0430\u0442\u044c</span><span class=\"translation-chunk\" style=\"background-color: rgb(255, 255, 255); color: rgb(34, 34, 34); cursor: text; font-family: arial,helvetica,sans-serif; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 19.2px; margin: 0px; outline: 0px; padding: 0px; text-align: start; text-indent: 0px; text-transform: none; white-space: pre-wrap;\"> </span><span class=\"translation-chunk\" style=\"background-color: rgb(255, 255, 255); color: rgb(34, 34, 34); cursor: text; font-family: arial,helvetica,sans-serif; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 19.2px; margin: 0px; outline: 0px; padding: 0px; text-align: start; text-indent: 0px; text-transform: none; white-space: pre-wrap;\">\u0435\u0433\u043e</span><span class=\"translation-chunk\" style=\"background-color: rgb(255, 255, 255); color: rgb(34, 34, 34); cursor: text; font-family: arial,helvetica,sans-serif; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 19.2px; margin: 0px; outline: 0px; padding: 0px; text-align: start; text-indent: 0px; text-transform: none; white-space: pre-wrap;\">! </span><span class=\"translation-chunk\" style=\"background-color: rgb(255, 255, 255); color: rgb(34, 34, 34); cursor: text; font-family: arial,helvetica,sans-serif; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 19.2px; margin: 0px; outline: 0px; padding: 0px; text-align: start; text-indent: 0px; text-transform: none; white-space: pre-wrap;\">\u0422\u0430\u043a</span><span class=\"translation-chunk\" style=\"background-color: rgb(255, 255, 255); color: rgb(34, 34, 34); cursor: text; font-family: arial,helvetica,sans-serif; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 19.2px; margin: 0px; outline: 0px; padding: 0px; text-align: start; text-indent: 0px; text-transform: none; white-space: pre-wrap;\"> </span><span class=\"translation-chunk\" style=\"background-color: rgb(255, 255, 255); color: rgb(34, 34, 34); cursor: text; font-family: arial,helvetica,sans-serif; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 19.2px; margin: 0px; outline: 0px; padding: 0px; text-align: start; text-indent: 0px; text-transform: none; white-space: pre-wrap;\">\u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u0434\u043e\u0431\u0430\u0432\u0438\u043c</span><span class=\"translation-chunk\" style=\"background-color: rgb(255, 255, 255); color: rgb(34, 34, 34); cursor: text; font-family: arial,helvetica,sans-serif; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 19.2px; margin: 0px; outline: 0px; padding: 0px; text-align: start; text-indent: 0px; text-transform: none; white-space: pre-wrap;\"> </span><span class=\"translation-chunk\" style=\"background-color: rgb(255, 255, 255); color: rgb(34, 34, 34); cursor: text; font-family: arial,helvetica,sans-serif; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 19.2px; margin: 0px; outline: 0px; padding: 0px; text-align: start; text-indent: 0px; text-transform: none; white-space: pre-wrap;\">\u043d\u0435\u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435 \u0441 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u043c</span><span class=\"translation-chunk\" style=\"background-color: rgb(255, 255, 255); color: rgb(34, 34, 34); cursor: text; font-family: arial,helvetica,sans-serif; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 19.2px; margin: 0px; outline: 0px; padding: 0px; text-align: start; text-indent: 0px; text-transform: none; white-space: pre-wrap;\">: </span><span class=\"translation-chunk\" style=\"background-color: rgb(255, 255, 255); color: rgb(34, 34, 34); cursor: text; font-family: arial,helvetica,sans-serif; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 19.2px; margin: 0px; outline: 0px; padding: 0px; text-align: start; text-indent: 0px; text-transform: none; white-space: pre-wrap;\">\u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435</span><span class=\"translation-chunk\" style=\"background-color: rgb(255, 255, 255); color: rgb(34, 34, 34); cursor: text; font-family: arial,helvetica,sans-serif; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 19.2px; margin: 0px; outline: 0px; padding: 0px; text-align: start; text-indent: 0px; text-transform: none; white-space: pre-wrap;\"> \u0440\u0430\u043a\u0435\u0442\u043a\u043e\u0439</span><span class=\"translation-chunk\" style=\"background-color: rgb(255, 255, 255); color: rgb(34, 34, 34); cursor: text; font-family: arial,helvetica,sans-serif; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 19.2px; margin: 0px; outline: 0px; padding: 0px; text-align: start; text-indent: 0px; text-transform: none; white-space: pre-wrap;\">.</span>", "localization_tags": ["inprogress"], "locale": "ru", "last_edit": "2016-06-24T11:09:02", "review_tags": []}], "modified": "2016-03-14T03:43:38", "label": "Paddle and keyboard controls", "localization_tags": [], "locale": "en-US", "id": 146841, "last_edit": "2016-03-14T03:43:19", "summary": "Technical review completed.", "sections": [{"id": "Subnav", "title": "Subnav"}, {"id": "Defining_a_paddle_to_hit_the_ball", "title": "Defining a paddle to hit the ball"}, {"id": "Allowing_the_user_to_control_the_paddle", "title": "Allowing the user to control the paddle"}, {"id": "The_paddle_moving_logic", "title": "The paddle moving logic"}, {"id": "Compare_your_code", "title": "Compare your code"}, {"id": "Next_steps", "title": "Next steps"}], "slug": "Games/Tutorials/2D_Breakout_game_pure_JavaScript/Paddle_and_keyboard_controls", "review_tags": []}