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

    IOC,依赖倒置的意思,所谓依赖,从程序的角度看,就是比如A要调用B的方法,那么A就依赖于B,反正A要用到B,则A依赖于B. 所谓倒置,你必须理解如果不倒置,会怎么着,因为A必须要有B,才可以调用B, ...

  2. MySQL复制报错(Slave failed to initialize relay log info structure from the repository)

    机器重启以后,主从出现了问题,具体报错信息: Slave failed to initialize relay log info structure from the repository 解决方案: ...

  3. Oracle11g服务详细介绍及哪些服务是必须开启的

    版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/DaisyLoveZly/article/details/79463713 七个服务的含义分别为:1. ...

  4. Andriod(3)——Understanding Android Resources

    Now, we will follow that introduction with an in-depth look at Android SDK fundamentals and cover re ...

  5. ORA-28001:口令已经失效

    Oracle11G创建用户时缺省密码过期限制是180天(即6个月),如果超过180天用户密码未做修改则该用户无法登录. 查看密码的有效期设置,LIMIT字段是密码有效天数. select * from ...

  6. 沉淀再出发:dubbo的基本原理和应用实例

    沉淀再出发:dubbo的基本原理和应用实例 一.前言 阿里开发的dubbo作为服务治理的工具,在分布式开发中有着重要的意义,这里我们主要专注于dubbo的架构,基本原理以及在Windows下面开发出来 ...

  7. August 25th 2017 Week 34th Friday

    Stop to have a rest, do not forget others still in the running. 停下来休息的时候,不要忘记别人还在奔跑. You don't need ...

  8. Java日期格式化参数对照表

    Symbol Meaning Presentation Example G era designator Text AD y year Number 2009 M month in year Text ...

  9. cascade属性

    cascade属性是设置级联操作的也就是在操作一端的数据如果影响到多端数据时会进行级联操作,一对一的时候直接写在标签上,其他的要写在set标签上 cascade="none|save-upd ...

  10. Odoo中的模型在哪里

    Odoo 模型存在 Python 的模块之外, 在中间注册表那里. 对于这个注册表,可以通过self.env[<model name>]进入,例如, 通过res.partner 模型获取对 ...