{"id":16347384,"url":"https://github.com/hsiangleev/game-puzzle","last_synced_at":"2025-10-30T21:31:31.917Z","repository":{"id":112079881,"uuid":"103798015","full_name":"hsiangleev/game-puzzle","owner":"hsiangleev","description":"拼图游戏","archived":false,"fork":false,"pushed_at":"2017-09-17T03:28:27.000Z","size":1469,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-12-28T06:10:33.865Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://hsiangleev.github.io/game-puzzle/index.html","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-17T02:40:22.000Z","updated_at":"2020-06-30T07:05:55.000Z","dependencies_parsed_at":null,"dependency_job_id":"8dc3a65a-0996-4b52-bf73-7910cfc9583f","html_url":"https://github.com/hsiangleev/game-puzzle","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%2Fgame-puzzle","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hsiangleev%2Fgame-puzzle/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hsiangleev%2Fgame-puzzle/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hsiangleev%2Fgame-puzzle/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hsiangleev","download_url":"https://codeload.github.com/hsiangleev/game-puzzle/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":239565663,"owners_count":19660158,"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:41:58.520Z","updated_at":"2025-10-30T21:31:31.844Z","avatar_url":"https://github.com/hsiangleev.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 拼图\r\n### [链接地址]( https://hsiangleev.github.io/game-puzzle/index.html)\r\n* 页面布局:\r\n  * bg: 背景提示图，使用半透明效果，移动图片后显示，层级最低，z-index:-1;\r\n  * cvs: 当前画布，层级默认0；\r\n  * content：覆盖在画布之上  z-index:1 \u003cbr\u003e\r\n    * currentCheckpoint: 显示当前关卡数与难度系数   z-index:2 \u003cbr\u003e\r\n    * currentBox: 鼠标按下时显示的盒子，模拟拖拽画布效果(按下瞬间清除盒子内画布，显示背景提示图)   z-index:1 \u003cbr\u003e\r\n    * willBox: 鼠标移动时显示将要交换的盒子   z-index:0 \u003cbr\u003e\r\n  * begin: 开始游戏层   z-index:2\r\n  * over: 完成关卡显示层   z-index:3\r\n\r\n* js实现\r\n  * loadImg加载图片资源\r\n  * 自定义封装event事件\r\n  * index.js设置初始化背景提示层，选择难度，开始游戏，和每一关完成后的显示\r\n  * drawBg.js：\u003cbr\u003e\r\n    * 大致思路: \u003cbr\u003e\r\n      * 初始化两个二维数组，oArr存放初始化的坐标，randomArr存放顺序打乱后的坐标 \u003cbr\u003e\r\n      * 把图片按randomArr存储，每次图片交换之后，randomArr数组中的顺序也交换 \u003cbr\u003e\r\n      * 当最后两个数组转换的字符串完全相等时，闯关成功 \u003cbr\u003e\r\n    * 模拟拖拽画布效果思路:\u003cbr\u003e\r\n      * 开始时两个小盒子隐藏，鼠标按下，获取按下的所在位置，转换成数组的index值，通过数组和index值找到currentBox显示位置，同时记录中心点坐标，清除当前区域画布，显示出背景提示图;  \u003cbr\u003e\r\n      * 鼠标移动，willBox盒子在距离currentBox中心点最近的区域显示; \u003cbr\u003e\r\n      * 鼠标松开，重新绘制两块区域的画布，然后隐藏两个小盒子，交换数组randomArr的顺序； \u003cbr\u003e\r\n      * 检查是否完成闯关，若完成闯关则移除当前所有事件 \u003cbr\u003e\r\n\r\n\r\n\r\n\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhsiangleev%2Fgame-puzzle","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhsiangleev%2Fgame-puzzle","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhsiangleev%2Fgame-puzzle/lists"}