前端工程师新手一枚,之前一直做些小设计,以及静态页面的编写工作。刚刚接触 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:

.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;
}
.mask {
font-size: 26px;
color: orange;
font-weight: bolder;
text-align: center;
padding-top: 100px;
}

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 自制华容道拼图(可以升级难度、关卡、更换图片)的更多相关文章

  1. 自制Unity小游戏TankHero-2D(4)关卡+小地图图标+碰撞条件分析

    自制Unity小游戏TankHero-2D(4)关卡+小地图图标+碰撞条件分析 我在做这样一个坦克游戏,是仿照(http://game.kid.qq.com/a/20140221/028931.htm ...

  2. Angular4 自制打地鼠游戏

    前端工程师新手一枚,之前一直做些小设计,以及静态页面的编写工作.刚刚接触 Angular 没有多久,四个月前对于 Javascript也只是会写 alert 之流,现在进步算是很大,下面是自制的打地鼠 ...

  3. [转]Angular4 自制分页控件

    本文转自:https://blog.csdn.net/Junyuan_123/article/details/79486276 过年后第一波,自制的分页控件,可能功能没有 PrimeNG 那么好,但是 ...

  4. Angular4 自制分页控件

    过年后第一波,自制的分页控件,可能功能没有 PrimeNG 那么好,但是基本可以实现自定义翻页功能,包括:首页/最后一页/上一页/下一页. 用户可以自定义: 1. 当前默认页码(如未提供,默认为第一页 ...

  5. mac系统xcode升级等软件更换appid账户

    删掉xcode 后发现 还是 会存在更新项,点击还是会提示输入之前app id 账号的密码 经过搜索和分析,发现是 Spotlight 在捣鬼,文件和目录删除了,但是索引文件没有被更新. 依次执行下面 ...

  6. 升级xcode时更换appid账户

    转自:http://blog.csdn.net/zhuzhihai1988/article/details/39803743 为了免下载安装Xcode,安装时使用了别人提供的Xcode.dmg安装,而 ...

  7. JavaScript写一个拼图游戏

    拼图游戏的代码400行, 有点多了, 在线DEMO的地址是:打开: 因为使用canvas,所以某些浏览器是不支持的: you know: 为什么要用canvas(⊙o⊙)?  因为图片是一整张jpg或 ...

  8. atitit.html5 拼图游戏的解决之道.

    atitit.html5 拼图游戏的解决之道. 1. 拼图游戏的操作(点击法and 拖动法) 1 1. 支持键盘上.下.左.右键移动: 1 2. 支持点击空白模块中的上下左右箭头移动: 1 3. 支持 ...

  9. 程序设计 之 C#实现《拼图游戏》 (下) 原理篇

    前言:在 http://www.cnblogs.com/labixiaohei/p/6698887.html 程序设计 之 C#实现<拼图游戏>(上),上传了各模块代码,而在本文中将详细剖 ...

随机推荐

  1. 软工读书笔记 week4 ——《黑客与画家》下

    因为时间有限,只对书中后半部分几个篇章进行了阅读.        一.另一条路       作者以他自己为例,在那个没人知道什么叫“软件运行在服务器时”的时代,他和朋友选择创业时,没有选择写传统的桌面 ...

  2. 2.bootstrap安装

    1.下载 您可以从 http://getbootstrap.com/ 上下载 Bootstrap 的最新版本(或者 http://www.bootcss.com/  中文网) Download Boo ...

  3. 京东原来你运用的这玩意,不错,我也要!! ContainerDNS

    转自社区 ContainerDNS 本文介绍的 DNS 命名为 ContainerDNS,作为京东商城软件定义数据中心的关键基础服务之一,具有以下特点: 分布式,高可用 自动发现服务域名 后端探活 易 ...

  4. 有关平台支持的从经典部署模型到 Azure Resource Manager 的迁移的技术深入探讨

    本文将深入探讨如何从 Azure 经典部署模型迁移到 Azure Resource Manager 部署模型. 本文将介绍资源和功能级别的资源,让用户了解 Azure 平台如何在两种部署模型之间迁移资 ...

  5. linux下pgAdmin4安装

    首先到pgAdmin4官方网站下载安装包:https://www.pgadmin.org/download/ 我下载的是3.0; 到文件所在目录执行安装命令: sudo pip install ./p ...

  6. 在datagridview中添加button按钮

    .Net的DataGridView控件中,提供了一种列的类型,叫 DataGridViewButtonColumn ,这种列类型是展示为一个 按钮,可以给button赋予相应的text,并且,此but ...

  7. c# datarow[] 转换成 datatable, List<T> 转datatable

      c# datarow[] 转换成 datatable, List<T> 转datatable DdataRow[]转成Datatable private DataTable ToDat ...

  8. mysql免安装版配置+navicat测试

    好久之前就在mysql官网下载了mysql的包,但是一直没有安装.今天测试下. 下载好的mysql是一个zip压缩包,直接解压就可以了,然后改名为mysql,以免路径太复杂. 配置环境变量 把D:\A ...

  9. Exchange2016 & Skype for business 集成之三统一联系人存储

    Exchange2016&Skype for business集成之二统一联系人存储 利用统一的联系人存储库,用户可以维护单个联系人列表,然后使这些联系人适用于多个应用程序,包括 Skype ...

  10. python3.6+GDAL-2.1.3环境配置

    1.下载地址:http://www.lfd.uci.edu/~gohlke/pythonlibs/#gdal 2.配置:见上图命令(跟以前相似) 3.测试: