{"json_modified": "2016-09-15T09:30:54.197517", "uuid": "6ca4178d-6254-421f-bd56-b737a03480aa", "title": "Move the ball", "url": "/en-US/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/Move_the_ball", "tags": ["Canvas", "Beginner", "Loop", "movement", "beginner", "Tutorial", "JavaScript", "canvas", "Games", "2D"], "translations": [{"uuid": "1b88dc55-319a-40ed-9752-6d125888e40d", "title": "\u8b93\u7403\u79fb\u52d5", "url": "/zh-TW/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript/Move_the_ball", "tags": [], "summary": "\u5b8c\u6210\u4e0a\u4e00\u500b\u6b65\u9a5f\uff0c\u4f60\u5df2\u7d93\u77e5\u9053\u5982\u4f55\u756b\u51fa\u4e00\u9846\u7403\uff0c\u73fe\u5728\u8b93\u4ed6\u52d5\u8d77\u4f86\u5427\u3002\u85c9\u7531\u7e6a\u88fd\u7403\u5728\u87a2\u5e55\u4e0a\u7136\u5f8c\u518d\u6e05\u9664\uff0c\u7136\u5f8c\u5728\u6bcf\u500b\u5f71\u683c\u4e2d\u7e6a\u88fd\u7403\u5728\u504f\u79fb\u4e00\u9ede\u9ede\u7684\u4f4d\u7f6e\u4e0a\uff08\u5982\u679c\u5728\u540c\u4e00\u500b\u4f4d\u7f6e\u4e0a\u5c31\u7b49\u65bc\u6c92\u52d5\uff09\uff0c\u9020\u6210\u7269\u9ad4\u79fb\u52d5\u7684\u611f\u89ba\uff0c\u5c31\u5982\u540c\u96fb\u5f71\u4e2d\u7269\u9ad4\u79fb\u52d5\u7684\u65b9\u5f0f\u3002", "localization_tags": ["inprogress"], "locale": "zh-TW", "last_edit": "2016-03-03T22:25:18", "review_tags": []}], "modified": "2016-09-15T09:30:54", "label": "Move the ball", "localization_tags": [], "locale": "en-US", "id": 146833, "last_edit": "2016-09-15T09:30:50", "summary": "You already know how to draw a ball from working through the previous article, so now let's make it move. Technically, we will be painting the ball on the screen, clearing it and then painting it again in a slightly different position every frame to make the impression of movement \u2014 just like how movement works with the movies.", "sections": [{"id": "Subnav", "title": "Subnav"}, {"id": "Defining_a_drawing_loop", "title": "Defining a drawing loop"}, {"id": "Making_it_move", "title": "Making it move"}, {"id": "Clearing_the_canvas_before_each_frame", "title": "Clearing the canvas before each frame"}, {"id": "Cleaning_up_our_code", "title": "Cleaning up our code"}, {"id": "Compare_your_code", "title": "Compare your code"}, {"id": "Next_steps", "title": "Next steps"}], "slug": "Games/Tutorials/2D_Breakout_game_pure_JavaScript/Move_the_ball", "review_tags": []}