{"id":16347263,"url":"https://github.com/hsiangleev/vue-moveball","last_synced_at":"2025-11-11T14:30:21.017Z","repository":{"id":112080385,"uuid":"103802591","full_name":"hsiangleev/vue-moveBall","owner":"hsiangleev","description":"vue-小球弹射","archived":false,"fork":false,"pushed_at":"2017-09-17T04:23:48.000Z","size":72,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-12-28T12:43:37.130Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://hsiangleev.github.io/vue-moveBall/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/hsiangleev.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-09-17T04:21:13.000Z","updated_at":"2018-01-24T08:25:05.000Z","dependencies_parsed_at":null,"dependency_job_id":"d2a1b6a1-c4e3-43f3-97b8-de41188e3ab9","html_url":"https://github.com/hsiangleev/vue-moveBall","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hsiangleev%2Fvue-moveBall","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hsiangleev%2Fvue-moveBall/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hsiangleev%2Fvue-moveBall/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hsiangleev%2Fvue-moveBall/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hsiangleev","download_url":"https://codeload.github.com/hsiangleev/vue-moveBall/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":239592673,"owners_count":19664855,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-11T00:40:51.664Z","updated_at":"2025-11-11T14:30:20.961Z","avatar_url":"https://github.com/hsiangleev.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"### 弹射小球\r\n\u003e  [链接地址]( https://hsiangleev.github.io/vue-moveBall/ )\r\n\u003e 1. 定义每个弹射的小球组件( ocicle )\r\n\u003e 2. 组件message自定义属性存放小球初始信息(可修改)\u003cbr\u003e\r\n\u003e ```javascript\r\n\u003e \t{\r\n\u003e \t　　　top: \"0px\",        //小球距离上方坐标\r\n\u003e \t　　　left: \"0px\",        //小球距离左边坐标\r\n\u003e \t　　　speedX: 12,      //小球每次水平移动距离\r\n\u003e \t　　　speedY: 6         //小球每次垂直移动距离\r\n\u003e \t}\r\n\u003e ```\r\n\u003e 3. 思路\r\n\u003e \t* 定时器设置小球每一帧移动\r\n\u003e \t*  初始方向：isXtrue为true则小球为横坐标正方向；\u003cbr\u003e\r\n\u003e 　　　　　　　　　isYtrue为true则小球为纵坐标正方向\r\n\u003e \t* 每次移动之前获取小球当前坐标(oleft,otop)，当前坐标加上移动距离为下一帧坐标\r\n\u003e \t* 边界判断：横轴坐标范围超过最大值则加号变减号\r\n\u003e 4. vue知识点\r\n\u003e \t* 父子组件传递信息使用props\r\n\u003e \t* 模板编译之前获取el宽高 \u003cbr\u003e\r\n\u003e ```javascript\r\n\u003e beforeMount: function (){\r\n\u003e   this.elWidth=this.$el.clientWidth;\r\n\u003e   this.elHeight=this.$el.clientHeight;\r\n\u003e }\r\n\u003e ```\r\n\u003e \t* 子组件获取el宽高 ( this.$root.elWidth,this.$root.elHeight )\r\n\u003e \t* 模板编译完成后更新子组件信息\u003cbr\u003e\r\n\u003e ```javascript\r\n\u003e \tmounted: function (){\r\n\u003e \t//根据父组件信息更新小球数据\r\n\u003e \t  this.addStyle.top=this.message.top;\r\n\u003e \t  this.addStyle.left=this.message.left;\r\n\u003e \t  this.speedX=this.message.speedX;\r\n\u003e \t  this.speedY=this.message.speedY;\r\n\u003e \t  //小球初始坐标\r\n\u003e \t  this.oleft=parseInt(this.addStyle.left);\r\n\u003e \t  this.otop=parseInt(this.addStyle.top);\r\n\u003e \t  this.move();\r\n\u003e \t}\r\n\u003e ```\r\n\r\n***\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhsiangleev%2Fvue-moveball","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhsiangleev%2Fvue-moveball","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhsiangleev%2Fvue-moveball/lists"}