# PopStar

**Repository Path**: Wchang/PopStar

## Basic Information

- **Project Name**: PopStar
- **Description**: 原生JS实现消灭星星游戏
- **Primary Language**: JavaScript
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2022-01-15
- **Last Updated**: 2022-01-20

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# PopStar
#原生JS实现消灭星星游戏

本次为使用js实现消除星星游戏的小练习，整体分三步走：<br>
##一、整体布局的搭建<br>
   *1、背景图片：body背景和容器背景<br>
   *2、容器布局：分为四部分：目标分数容器、当前分数容器、当前操作可消除分数容器、星星容器。<br>
      每个容器都是一个DIV，当前操作可消除分数容器初始设置为透明状态，星星的容器为动态生成。<br>
   *3、星星容器生成：<br>
      （1）页面对每个星星方框的大小和整个星星容器的行列数进行初始化，每个小方框大小为50*50，行列数为12*12.<br>
      （2）在创建方框的函数中定义其大小和样式，并添加到squareSet[][]数组中.<br>
      （3）获取星星容器父级元素，将容器添加到父级元素<br>
      （4）对每个方框设置背景图片，和其定位。<br>
##二、鼠标滑过每个方块，搜索周围与之相连的相同的方块，并闪烁表示<br>
    	*1、搜索时，要搜索当前方块的上下左右四个方向。要注意判断排除已经搜索到的方块，避免出现死循环的情况<br>
 	*2、使用setInterval函数、transform属性：scale，遍历每个搜索到的方块，使其随时间变化不断变化其大小<br>
	*3、计算要删除闪烁方块会得到的分数，显示在“当前操作可消除分数容器”<br>
##三、删除方块后，填充空白区域，即方块下落和左移的效果<br>
    *1、要注意，左下角为（0,0）点，即第一行第一列的元素.<br>
    *2、遍历squareSet数组中剩余的方块<br>
	判断纵向：固定列，寻找数组中该列为null的方块，同时设置一个指针pointer，记录空位出现的位置；然后将寻找到的不为空的方块补到空位上<br>
	判断横向：因为上面判断了纵向的方块，所以只需要判断第一行的某列元素是否为空，就知道该列所有元素是否都是空了。使用splice函数截取即可<br>
##四、判断游戏是否结束<br>
    循环squareSet中的元素，寻找各个方块的临近相同颜色的方块，若找到了，则游戏尚未结束；否则游戏结束<br>