Commit ada1e15e authored by Chen Jiping's avatar Chen Jiping

完善模板

parent 8c12485f
......@@ -29,34 +29,6 @@
</div>
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-label [nzSpan]="6" nzFor="add-btn" nzNoColon=true>备选颜色</nz-form-label>
<nz-form-control [nzXs]='24' [nzSm]='12' [nzMd]='12' [nzLg]='6'>
<button nz-button nzType="dashed" class="add-btn" id="add-btn" [disabled]="item.colorArr.length == 8 ? true : false" (click)="addColorItem()">
<i nz-icon nzType="plus-circle" nzTheme="outline"></i>添加
</button>
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-control nzOffset='6' [nzXs]='24' [nzSm]='16' [nzMd]='16' [nzLg]='10'>
<nz-table #borderedTable nzBordered nzTitle="颜色列表" [nzData]="item.colorArr" [nzShowPagination]=false>
<thead>
<tr>
<th>序号</th>
<th>颜色</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let color of borderedTable.data;let i = index">
<td>{{ i + 1 }}</td>
<td><div [(colorPicker)]="color.val" [style.background]="color.val" style="cursor: pointer; width:50px;height:30px;border:1px solid #CCC;float:left;margin-left: 10px;" (colorPickerClose)="save()"></div></td>
<td><button nz-button nzType="danger" (click)="delColorItem(i)"><i nz-icon nzType="delete" nzTheme="outline"></i></button></td>
</tr>
</tbody>
</nz-table>
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-label [nzSpan]="6" nzFor="add-btn" nzNoColon=true>图片</nz-form-label>
<nz-form-control [nzXs]='24' [nzSm]='12' [nzMd]='12' [nzLg]='6'>
......@@ -80,17 +52,7 @@
<nz-form-item>
<nz-form-label [nzSpan]="6" nzNoColon=true>涂色</nz-form-label>
<nz-form-control [nzSpan]="18">
<nz-select [(ngModel)]="data.color" style="width: 100%;" id="color"
(ngModelChange)="onChange($event, data, 'color')" nzPlaceHolder="color">
<nz-option [nzValue]="option.val" nzCustomContent [nzLabel]="option.val"
*ngFor="let option of item.colorArr"><div [ngStyle]="{'background-color':option.val,'height':'30px','border':'1px solid'}"></div>
</nz-option>
</nz-select>
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-control nzOffset='6' [nzSpan]="6">
<div [ngStyle]="{'background-color':data.color,'height':'30px','border':'1px solid'}"></div>
<div [(colorPicker)]="data.color" [style.background]="data.color" style="cursor: pointer; width:50px;height:30px;border:1px solid #CCC;float:left;margin-left: 10px;" (colorPickerClose)="save()"></div>
</nz-form-control>
</nz-form-item>
</nz-card>
......
......@@ -27,7 +27,7 @@ export class AudioComponent extends Item {
ended = false;
progress: ShapeRect;
progress: ShapeRectNew;
progressVal = 0;
......@@ -100,8 +100,8 @@ export class AudioComponent extends Item {
bg.addChild(progressBar);
this.progressVal = progressBar.getBoundingBox().width;
const progress = new ShapeRect();
progress.setSize(0, progressBar.getBoundingBox().height);
const progress = new ShapeRectNew();
progress.setSize(0, progressBar.getBoundingBox().height, 13 * this.scaleX);
progress.x = this.progressInitX;
progress.y = 37 * this.scaleY;
progress.fillColor = "#c80df3";
......@@ -109,7 +109,7 @@ export class AudioComponent extends Item {
this.progress = progress;
const progressBtn = new MySprite();
progressBtn.init(this.images.get("processBtn"), 0, 0);
progressBtn.init(this.images.get("processBtn"), 0.5, 0);
progressBtn.scaleX = this.scaleX;
progressBtn.scaleY = this.scaleY;
progressBtn.x = this.progressInitX;
......
import { Item } from './Item';
import { ShapeRect, MySprite, shake, ShapeRectNew } from './Unit';
import { ShapeRect, MySprite, shake2, ShapeRectNew } from './Unit';
import { playAudio } from './AudioUtil';
import { Star } from './StarUtil'
import { PageBar, CyclePageBar } from './PageBar';
......@@ -171,6 +171,10 @@ export class Card extends Item {
colorBg: ShapeRectNew;
starBg : ShapeRect;
cardBoxBorder: MySprite;
set x(x) {
this._x = x;
......@@ -217,13 +221,27 @@ export class Card extends Item {
bg.addChild(cardBox, 1);
this.cardBox = cardBox;
const cardBoxBorder = this.getPic('card_box_border');
cardBoxBorder.x = bg.width / 2;
cardBoxBorder.y = bg.height / 2;
bg.addChild(cardBoxBorder, 3);
this.cardBoxBorder = cardBoxBorder;
const cardLight = this.getPic('card_light');
cardLight.x = bg.width / 2 + 1 * this.scaleX;
cardLight.y = bg.height / 2 + 3 * this.scaleY;
cardLight.alpha = 0;
bg.addChild(cardLight, 3);
bg.addChild(cardLight, 4);
this.cardLight = cardLight;
const starBg = new ShapeRect();
starBg.setSize(265 * this.scaleX, 294 * this.scaleY);
starBg.x = 0;
starBg.y = 0;
starBg.alpha = 0;
bg.addChild(starBg, 999);
this.starBg = starBg;
this.initPic();
}
......@@ -271,6 +289,7 @@ export class Card extends Item {
}
this.colorBg.fillColor = color;
this.colorBg.alpha = 1;
this.cardBoxBorder.alpha = 0;
}
clearColor(){
......@@ -278,6 +297,7 @@ export class Card extends Item {
return;
}
this.colorBg.alpha = 0;
this.cardBoxBorder.alpha = 1;
}
checkRight(colorCode, color, callback = null, errCallback = null) {
......@@ -300,7 +320,7 @@ export class Card extends Item {
this.cardLight.alpha = 0;
this.clearColor();
playAudio(this.audioObj['wrong']);
shake(this.bg, 5, callback);
shake2(this.bg, 5, callback);
}
private showRight(color, callback = null) {
......
......@@ -1747,5 +1747,49 @@ export function shake(item, time = 0.5, callback = null, rate = 1) {
}
export function shake2(item, time = 0.5, callback = null, rate = 1) {
if (item.shakeTween) {
return;
}
item.shakeTween = true;
const offX = 15 * item.scaleX * rate;
const baseX = item.x;
const baseY = item.y;
const easing = TWEEN.Easing.Sinusoidal.InOut;
const move4 = () => {
moveItem(item, baseX, baseY, time / 4, () => {
item.shakeTween = false;
if (callback) {
callback();
}
}, easing);
};
const move3 = () => {
moveItem(item, baseX + offX / 4, baseY, time / 4, () => {
move4();
}, easing);
};
const move2 = () => {
moveItem(item, baseX - offX / 4 * 3, baseY, time / 4, () => {
move3();
}, easing);
};
const move1 = () => {
moveItem(item, baseX + offX, baseY, time / 7.5, () => {
move2();
}, easing);
};
move1();
}
// --------------- custom class --------------------
......@@ -458,8 +458,28 @@ export class PlayComponent implements OnInit, OnDestroy {
this.data.picArr = [];
}
const initColorArr = (colorArr) => {
colorArr.push({ code: '01', name: '红色', val: '#f3440d', picUrl: 'assets/play/palette/red.png' });
colorArr.push({ code: '02', name: '紫色', val: '#c80df3', picUrl: 'assets/play/palette/purple.png' });
colorArr.push({ code: '03', name: '绿色', val: '#26eb45', picUrl: 'assets/play/palette/green.png' });
colorArr.push({ code: '04', name: '蓝色', val: '#404dfb', picUrl: 'assets/play/palette/blue.png' });
colorArr.push({ code: '05', name: '橘色', val: '#ff9600', picUrl: 'assets/play/palette/orange.png' });
colorArr.push({ code: '06', name: '粉色', val: '#ff6073', picUrl: 'assets/play/palette/pink.png' });
colorArr.push({ code: '07', name: '天蓝色', val: '#07d6ff', picUrl: 'assets/play/palette/skyBlue.png' });
colorArr.push({ code: '08', name: '紫粉色', val: '#ff07ff', picUrl: 'assets/play/palette/purplePink.png' });
}
if (!this.data.colorArr) {
this.data.colorArr = [];
initColorArr(this.data.colorArr);
}
console.log(this.data);
......@@ -525,6 +545,26 @@ export class PlayComponent implements OnInit, OnDestroy {
this.starRenderArr = [];
this.endRenderArr = [];
for (let i = 0; i < this.data.picArr.length; ++i) {
let pic = this.data.picArr[i];
let exsit = false;
for (let j = 0; j < this.data.colorArr.length; ++j) {
let color = this.data.colorArr[j];
if (color.val === pic.color) {
exsit = true;
break;
}
}
if (!exsit) {
this.data.colorArr.push({ val: pic.color });
}
}
}
......@@ -543,6 +583,8 @@ export class PlayComponent implements OnInit, OnDestroy {
this.initPic();
this.canTouch = true;
this.playAudio('into');
}
initBg() {
......@@ -740,11 +782,9 @@ export class PlayComponent implements OnInit, OnDestroy {
this.curCard.checkRight(colorCard.code, colorCard.color, () => {
const star = new Star(this.starRenderArr, this.images, this.ctx);
star.showStar(this.curCard.bg.getBoundingBox(), this.mapScale, 1, 200, 20);
showPopParticle(this.images.get('icon_star'), {x: this.curCard.width / 2,y: this.curCard.height / 2} ,this.curCard.starBg, 20, 40, this.curCard.height * 0.6, 2);
setTimeout(() => {
star.stop();
this.canTouch = true;
......@@ -752,7 +792,7 @@ export class PlayComponent implements OnInit, OnDestroy {
this.canTouch = false;
this.showEnd();
}
}, 4000);
}, 2000);
}, () => {
this.canTouch = true;
......
......@@ -38,6 +38,7 @@ const res = [
['card_box', "assets/play/card_box.png"],
['card_light', "assets/play/card_light.png"],
['card_box_border', "assets/play/card_box_border.png"],
['icon_star', "assets/play/star.png"],
......
src/assets/play/card_box.png

6.06 KB | W: | H:

src/assets/play/card_box.png

3.31 KB | W: | H:

src/assets/play/card_box.png
src/assets/play/card_box.png
src/assets/play/card_box.png
src/assets/play/card_box.png
  • 2-up
  • Swipe
  • Onion skin
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment