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

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

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

第二关：三列/八块儿

第三关：四列/15块儿

HTML：

<span class="paddingr30">Section: {{colomnData.barrier}}</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>

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

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

</li>

</ul>

</div>

<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: 0 10px;

}

button:hover {

cursor: pointer;

}

.paddingv10 {

padding-top: 10px;

padding-bottom: 10px;

}

.paddingt10 {

padding-top: 10px;

}

.paddingb10 {

padding-bottom: 10px;

}

.paddingr30 {

padding-right: 30px;

}

.marginr10 {

margin-right: 10px;

}

.marginl10 {

margin-left: 10px;

}

.borderb {

border-bottom: solid 1px #cccccc;

}

.clear {

clear: both;

}

.clear:before {

content: '';

display: block;

clear: both;

}

.clear:after {

content: '';

display: block;

clear: both;

}

.bg-white {

background-color: #fff;

}

.bg-gray {

background-color: #ccc !important;

}

.text-center {

text-align: center;

}

.text-black {

color: #333;

}

.text-red {

color: lightcoral;

}

.fs-26 {

font-size: 26px;

}

.mask {

position: fixed;

left: 0;

right: 0;

top: 0;

bottom: 0;

width: 100%;

height: 100%;

background: rgba(0,0,0,.6);

font-size: 26px;

color: orange;

font-weight: bolder;

text-align: center;

padding-top: 100px;

}

.mainContent {

width: 1000px;

box-sizing: border-box;

}

.gigContent {

width: 100%;

min-height: 500px;

text-align: center;

}

.gigContent .gigItem{

margin: 20px auto 0;

}

.gigContent .gigItem li {

list-style-type: none;

width: 100px;

height: 100px;

float: left;

line-height: 100px;

text-align: center;

color: #dedede;

font-size: 26px;

font-weight: bolder;

box-sizing: border-box;

border: solid 1px #dedede;

}

.gigContent .gigItem li.full {

background-repeat: no-repeat;

background-color: orange;

}

.gigContent .gigItem li.empty {

background-image: none!important;

border: none;

}

.gigContent .gigItem li.full:hover {

cursor: pointer;

box-shadow: 0px 0px 10px #fff;

}

.gigContent .gigItem:before, .gigContent .gigItem:after {

content: '';

display: block;

clear: both;

}

TS:

import { Component, OnInit } from '@angular/core';

import { Router } from '@angular/router';

@Component ({

templateUrl: './gigsaw.component.html',

styleUrls: ['./gigsaw.component.css']

})

export class GigsawComponent implements OnInit {

private puzzles: Array<any>; // 随机生成的乱序数组

private positionArr: Array<any>; // 每点击一块儿，会生成其上下左右位置的数组

private emptyBox: any; // 空白小块儿

private boxMovable: boolean = false; // 图片是否可以移动

private isSuccessful: boolean = false; // 是否过关

private step: number = 0; // 移动步数

private colomnData: any = { barrier: 3, colomNum: 4, totalNum: 15 }; // 关卡数、列数、小块儿总数

private imgRandom: number; // 随机选择图片

private ifViewPic: boolean = false; // 是否查看大图

constructor(private router: Router){}

ngOnInit(){

this.resetFn();

this.changePicFn();

}

resetFn(){

let puzzlesRandom = [];

// 根据关卡数，生成相应的数组

for(let i = 1; i <= this.colomnData.totalNum; i++){

puzzlesRandom.push(i);

}

// 将数组打乱

this.puzzles = puzzlesRandom.sort(() => {

return Math.random() - 0.5;

});

// 将空白块儿加入

this.puzzles.push('');

this.step = 0;

}

changePicFn(){

this.imgRandom = Math.round( Math.random() * 4 + 1);

}

checkMovableFn(index: number){ // 查看所点击图片是否可以移动

// 获取所点击图片位置以及上下左右坐标

this.positionArr = [

{ name: 'curNum', value: this.puzzles[index], position: index },

{ name: 'topNum', value: this.puzzles[index - this.colomnData.colomNum],

position: index - this.colomnData.colomNum },

{ name: 'btmNum', value: this.puzzles[index + this.colomnData.colomNum],

position: index + this.colomnData.colomNum },

{ name: 'lftNum', value: this.puzzles[index - 1], position: index - 1 },

{ name: 'ritNum', value: this.puzzles[index + 1], position: index + 1 }

]

// 如果所点击的图片不是空白块儿，将value为空的一项赋值给emptyBox

if(this.puzzles[index] != ''){

this.emptyBox = this.positionArr.filter(function (k, v) { return k.value == '' })[0];

// 如果emptyBox有值，则表示周围有空白块，可以移动

if(this.emptyBox != undefined){

this.boxMovable = true;

}

moveBoxFn(index: number){

// 移动小块儿，将被点击小块儿的值赋值给空白块儿，将被点击小块儿设置为空

this.boxMovable = false;

this.checkMovableFn(index);

if(this.boxMovable) {

this.puzzles[this.emptyBox.position] = this.puzzles[index];

this.puzzles[index] = '';

this.step++;

}

setTimeout(() => {

this.isSuccessfulFn();

}, 100);

}

isSuccessfulFn(){

for(let i = 1; i <= this.colomnData.totalNum; i++) {

if(this.puzzles[i-1] != i) {

this.isSuccessful = false;

return;

}

this.isSuccessful = true;

if(this.isSuccessful){

let temConfirm = confirm('Conguratulations! You win! \n Would you like to go to next section?')

if(temConfirm){

this.getNextSectionFn();

} else {

this.router.navigate(['/home']);

}

getNextSectionFn(){ // 进入下一关

this.colomnData.barrier = this.colomnData.barrier + 1;

this.colomnData.colomNum = (this.colomnData.barrier + 1) ;

this.colomnData.totalNum = this.colomnData.colomNum * this.colomnData.colomNum - 1;

if(this.colomnData.barrier >= 6) {

alert('Congaratulations! You pass all the sections!')

this.router.navigate(['/home']);

}

this.resetFn();

this.changePicFn();

}

getColumnWidth(){ // 根据列数设置外层盒子的宽度

return { width: this.colomnData.colomNum * 100 + 'px' };

}

getPicPosition(index: number){ // 根据列数调整背景图片的位置！！！好难

let posX, posY;

for(let n = 0; n < this.colomnData.colomNum; n++) {

if (index == this.colomnData.colomNum*n) {

posX = '100%';

} else if (index == this.colomnData.colomNum * n + 1){

posX = '0%';

}

else if (index == this.colomnData.colomNum * n + 2) {

posX = 100/(this.colomnData.colomNum - 1) + '%';

} else if (index == this.colomnData.colomNum * n + 3) {

posX = 100/(this.colomnData.colomNum - 1) * 2 + '%';

} else if (index == this.colomnData.colomNum * n + 4) {

posX = 100/(this.colomnData.colomNum - 1) * 3 + '%';

} else if (index == this.colomnData.colomNum * n + 5) {

posX = 100/(this.colomnData.colomNum - 1) * 4 + '%';

}

if (index <= this.colomnData.colomNum) {

posY = '0%';

} else if (index > this.colomnData.colomNum && index <= this.colomnData.colomNum * 2){

posY = 100/(this.colomnData.colomNum - 1) + '%';

} else if (index > this.colomnData.colomNum * 2 && index <= this.colomnData.colomNum * 3) {

posY = 100/(this.colomnData.colomNum - 1) * 2 + '%';

} else if (index > this.colomnData.colomNum * 3 && index <= this.colomnData.colomNum * 4) {

posY = 100/(this.colomnData.colomNum - 1) * 3 + '%';

} else if (index > this.colomnData.colomNum * 4 && index <= this.colomnData.colomNum * 5) {

posY = 100/(this.colomnData.colomNum - 1) * 4 + '%';

} else if (index > this.colomnData.colomNum * (this.colomnData.colomNum - 1)

&& index < this.colomnData.colomNum * this.colomnData.colomNum ){

posY = '100%';

}

return { backgroundPositionX: posX, backgroundPositionY: posY,

backgroundSize: this.colomnData.colomNum * 100 + 'px',

backgroundImage: 'url(\"../../assets/images/pic' + this.imgRandom + '.jpg\")' };

}

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

HTML5游戏实战之拼图游戏（包含关卡）
拼图游戏是每个人小时候都玩过的经典休闲游戏,依托Hola Studio强大的图片功能和事件回调体系,实现一个游戏性十足的拼图游戏并不难.本文就介绍整个游戏的制作过程,本游戏包含完整的游戏元素,包括广告 ...
html图片菱形,CSS3 菱形拼图实现只旋转div 背景图片不旋转功能
需求背景使用 vue 做的项目,业务需求有一个拼图效果,默认是深色的背景图,上面分五个区域,每次会亮一个区域,整张图都亮,拼图完成.先来看一下最终的效果图. 应用到的知识点: background- ...
xbox换服务器文件名,破旧国行xbox one换盘升级重生及更换港服
破旧国行xbox one换盘升级重生及更换港服 2019-02-28 13:00:00 42点赞 183收藏 57评论 2015年,心心念,买了台xbox one,还特地日亚又淘了个手柄,凑成一对手柄 ...
html 背景图片自动旋转,CSS3 菱形拼图实现只旋转div 背景图片不旋转功能
需求背景使用 vue 做的项目,业务需求有一个拼图效果,默认是深色的背景图,上面分五个区域,每次会亮一个区域,整张图都亮,拼图完成.先来看一下最终的效果图. 应用到的知识点: background- ...
JAVA 拼图游戏更换图片
拼图游戏切换图片切换游戏图片代码实现切换游戏图片第一步:创建JMenuBar对象第二步:创建三个JMenu对象(功能,关于我们,更换图片) 第三步:创建六个JMenuItem对象(重新游戏, ...
C语言自制华容道游戏代码
程序简介华容道,画风参考的是手机程序:超级华容道.玩法是将大块移动至下层的中间.随机盘面,难度适中,自动解题. 程序随机了横块纵块数量,所以会有无解或难解,生成函数保证了加载出来的盘面是可玩的,但不 ...
QQ三国华容道拼图脚本（半成品，成功率不高）
游戏简介: 将中间的图片还原成右上角的图片. 开发原因:最近突然想到回归,以及十多年没玩,以前只能拼三阶的.但是回归后发现这个拼图和我大二时的一个课设作业很像.当时做的是八数码问题的解决,思路当时是上 ...
Android案例手册 - 实现一个华容道拼图游戏
往期文章分享点击跳转=><导航贴>- Unity手册,系统实战学习点击跳转=><导航贴>- Android手册,重温移动开发
js实现拼图游戏（数字版本与图片版本）
纯js实现(点击式)拼图游戏在没有使用任何框架的前提下,使用纯JS语法去搭建一个简易的拼图游戏,非常适合熟悉CSS和JS的语法. 0->1的数字排序实现思路 1.拼图,首先选择3*3的难度,那 ...

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

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

最新文章

热门文章