Angular4 自制华容道拼图（可以升级难度、关卡、更换图片）

前端工程师新手一枚，之前一直做些小设计，以及静态页面的编写工作。刚刚接触 Angular 没有多久，四个月前对于 js 也只是会写 alert 之流，现在进步算是很大，下面是自制的华容道拼图（可以升级难度、关卡、更换图片，查看完整大图），希望大神临幸，千万别拍砖。

图片背景是用根据宽度，列数算好的公式用css写上去的，所以不同的列数，背景图片的比例不同，写着非常麻烦，但是又找不到简单方法，所以我只写到了第六关，希望有大神指点~~

第二关：三列/八块儿

第三关： 四列/15块儿

 

HTML：

<div class="gigContent">

<div class="paddingv10 borderb bg-white">

<span class="paddingr30">Section: { {colomnData.barrier}}</span>

<span class="paddingr30">Step: { {step}}</span>

<button (click)="resetFn()" class="flexWidth">Reset</button>

<button (click)="changePicFn()" class="flexWidth">Change Picture</button>

<button (click)="ifViewPic = true" class="flexWidth">View big picture</button>

</div>

<ul class="gigItem" [ngStyle]="getColumnWidth()">

<li *ngFor="let puzzle of puzzles; let i = index" (click)="moveBoxFn(i)"

[ngClass]="{'empty': puzzle == '', 'full': puzzle != ''}" [ngStyle]="getPicPosition(puzzle)">

</li>

</ul>

</div>

 

<div class="mask" *ngIf="ifViewPic">

<img src="../../assets/images/pic{ {imgRandom}}.jpg" style="width: 500px;" />

<br/>

<button (click)="ifViewPic = false" class="flexWidth">Close</button>

</div>

 

CSS：

* {

padding: 0;

margin: 0;

border: 0;

}

body {

background-color: #dedede;

}

button {

height: 26px;

line-height: 26px;

background-color:blueviolet;

color: #fff;

}

button.fixWidth {

width: 80px;

}

button.flexWidth {

padding</