https://github.com/hsiangleev/game-puzzle

拼图游戏
https://github.com/hsiangleev/game-puzzle

Last synced: 8 months ago
JSON representation

拼图游戏

• Host: GitHub
• URL: https://github.com/hsiangleev/game-puzzle
• Owner: hsiangleev
• Created: 2017-09-17T02:40:22.000Z (almost 9 years ago)
• Default Branch: master
• Last Pushed: 2017-09-17T03:28:27.000Z (almost 9 years ago)
• Last Synced: 2024-12-28T06:10:33.865Z (over 1 year ago)
• Language: JavaScript
• Homepage: https://hsiangleev.github.io/game-puzzle/index.html
• Size: 1.4 MB
• Stars: 1
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: readme.md

Awesome Lists containing this project

README

          
# 拼图

### [链接地址]( https://hsiangleev.github.io/game-puzzle/index.html)

* 页面布局:

  * bg: 背景提示图，使用半透明效果，移动图片后显示，层级最低，z-index:-1;

  * cvs: 当前画布，层级默认0；

  * content：覆盖在画布之上  z-index:1 


    * currentCheckpoint: 显示当前关卡数与难度系数   z-index:2 


    * currentBox: 鼠标按下时显示的盒子，模拟拖拽画布效果(按下瞬间清除盒子内画布，显示背景提示图)   z-index:1 


    * willBox: 鼠标移动时显示将要交换的盒子   z-index:0 


  * begin: 开始游戏层   z-index:2

  * over: 完成关卡显示层   z-index:3

* js实现

  * loadImg加载图片资源

  * 自定义封装event事件

  * index.js设置初始化背景提示层，选择难度，开始游戏，和每一关完成后的显示

  * drawBg.js：


    * 大致思路: 


      * 初始化两个二维数组，oArr存放初始化的坐标，randomArr存放顺序打乱后的坐标 


      * 把图片按randomArr存储，每次图片交换之后，randomArr数组中的顺序也交换 


      * 当最后两个数组转换的字符串完全相等时，闯关成功 


    * 模拟拖拽画布效果思路:


      * 开始时两个小盒子隐藏，鼠标按下，获取按下的所在位置，转换成数组的index值，通过数组和index值找到currentBox显示位置，同时记录中心点坐标，清除当前区域画布，显示出背景提示图;  


      * 鼠标移动，willBox盒子在距离currentBox中心点最近的区域显示; 


      * 鼠标松开，重新绘制两块区域的画布，然后隐藏两个小盒子，交换数组randomArr的顺序； 


      * 检查是否完成闯关，若完成闯关则移除当前所有事件