Commit fda77d27 authored by 邵世尧's avatar 邵世尧

提交

parent d381f1ce
<div class="model-content"> <div class="model-content">
<div style="position: absolute;left: 100px;top:20px;width: 500px;"> <div style="position: absolute;left: 100px;top:20px;width: 500px;">
<nz-radio-group [(ngModel)]="side"> <nz-radio-group [(ngModel)]="side" (ngModelChange)="sidec()">
<label nz-radio nzValue="A"(click)="sideB()">默认背面</label> <label nz-radio nzValue="A">默认背面</label>
<label nz-radio nzValue="B"(click)="sideA()">默认正面</label> <label nz-radio nzValue="B">默认正面</label>
</nz-radio-group> </nz-radio-group>
<div *ngFor="let it of picArr; let i = index" class="card-item" style="padding: 0.5vw;"> <div *ngFor="let it of picArr; let i = index" class="card-item" style="padding: 0.5vw;">
...@@ -27,7 +27,7 @@ ...@@ -27,7 +27,7 @@
<div *ngIf="it.optionTypeA == 'A'" style="width: 60%"> <div *ngIf="it.optionTypeA == 'A'" style="width: 60%">
<input style="width: 80%; margin-bottom: 0.5vw" type="text" nz-input placeholder="" [(ngModel)]="it.title" (blur)="saveItem()"> <input style="width: 80%; margin-bottom: 0.5vw" type="text" nz-input placeholder="" [(ngModel)]="it.title" (blur)="save()">
</div> </div>
......
import {Component, EventEmitter, Input, OnDestroy, OnChanges, OnInit, Output, ApplicationRef, ChangeDetectorRef} from '@angular/core'; import {Component, EventEmitter, Input, OnDestroy, OnChanges, OnInit, Output, ApplicationRef, ChangeDetectorRef, ViewChild, ElementRef} from '@angular/core';
import { NzMessageService } from 'ng-zorro-antd';
...@@ -8,194 +9,162 @@ import {Component, EventEmitter, Input, OnDestroy, OnChanges, OnInit, Output, Ap ...@@ -8,194 +9,162 @@ import {Component, EventEmitter, Input, OnDestroy, OnChanges, OnInit, Output, Ap
styleUrls: ['./form.component.css'] styleUrls: ['./form.component.css']
}) })
export class FormComponent implements OnInit, OnChanges, OnDestroy { export class FormComponent implements OnInit, OnChanges, OnDestroy {
// @Input()
item;
@ViewChild('videoContainer')
videoContainer: ElementRef;
@ViewChild('videoNode')
videoNode: ElementRef;
@Output()
update = new EventEmitter();
picArr = []; intervalId;
_item: any;
saveKey = 'ssy003'; picArr;
radioValue;
side side
saveKey = 'ssy003';
// @Input()
set item(item) {
this._item = item;
// this.init();
}
get item() {
return this._item;
}
@Output() constructor(private nzMessageService: NzMessageService,
update = new EventEmitter(); private appRef: ApplicationRef,
public changeDetectorRef: ChangeDetectorRef) {
}
ngOnChanges() {
constructor(private appRef: ApplicationRef,private changeDetectorRef: ChangeDetectorRef) {
} }
ngOnInit() { ngOnInit() {
this.item = {};
this.item.contentObj = {};
const getData = (<any> window).courseware.getData; const getData = (<any> window).courseware.getData;
getData((data) => { getData((data) => {
if (data) { if (data) {
this.item = data; this.item = data;
} else { } else {
this.item = {}; this.item = {};
}
if ( !this.item.contentObj ) {
this.item.contentObj = {}; this.item.contentObj = {};
}
if(this.item.sideA==1){
this.side='B';
}
else if(this.item.sideB==1){
this.side='A';
} }
console.log('~data:', data);
this.init(); this.initDefaultData();
this.changeDetectorRef.markForCheck();
this.changeDetectorRef.detectChanges();
this.refresh();
// this.initDefaultData(); console.log('data:', data);
this.init();
this.changeDetectorRef.markForCheck();
this.changeDetectorRef.detectChanges();
this.refresh();
}, this.saveKey); }, this.saveKey);
// this.initData();
}
ngOnChanges() {
}
ngOnDestroy() {
} }
sidec(){
if(this.side=="A"){
this.item.sideA=0;
this.item.sideB=1;
}
init() { if(this.side=="B"){
this.item.sideA=1;
this.item.sideB=0;
if (this.item.contentObj.picArr) { }
this.picArr = this.item.contentObj.picArr; this.save();
} else {
this.picArr = this.getDefaultPicArr();
this.item.contentObj.picArr = this.picArr;
} }
console.log('item:' , this.item); initDefaultData() {
// this.picArr = this.getDefaultPicArr();
// this.item.contentObj.picArr = this.picArr;
// console.log('this.item:;', this.picArr);
}
cardItemData(){ const picArr = this.item.contentObj.picArr;
return { if (!picArr) {
title: "",
pic_url: "",
audio_url: ""
}; const picArr = [];
for (let i = 0; i < 6; i ++) {
picArr.push({
pic_url: '',
audio_url: '',
title:'',
sideA:'',
sideB:''
});
} }
sideA(){
this.item.sideA=1;
this.item.sideB=0;
this.picArr=[];
this.item.contentObj.picArr = this.picArr;
for(let i=0;i<6;i++){ this.item.contentObj.picArr = picArr;
let item = this.cardItemData();
this.picArr.push(item);
} }
this.saveItem();
} }
sideB(){
this.item.sideB=1;
this.item.sideA=0;
this.picArr=[];
this.item.contentObj.picArr = this.picArr;
for(let i=0;i<6;i++){
let item = this.cardItemData();
this.picArr.push(item);
}
this.saveItem();
console.log('init~data:', this.picArr);
}
getDefaultPicArr() { ngOnDestroy() {
let arr = []; console.log('in ngOnDestory');
return arr;
} }
init() {
this.picArr = this.item.contentObj.picArr || [];
addItem6() {
this.picArr=[];
this.item.contentObj.picArr = this.picArr; this.item.contentObj.picArr = this.picArr;
for(let i=0;i<6;i++){
let item = this.cardItemData();
this.picArr.push(item);
} }
this.saveItem();
console.log('init~data:', this.picArr);
}
onImageUploadSuccessByItem(e, item) {
onImageUploadSuccessByItem(e, item, id = null) {
if (id != null) {
item[id + '_pic_url'] = e.url;
} else {
item.pic_url = e.url; item.pic_url = e.url;
this.save();
} }
onAudioUploadSuccessByItem(e, item) {
item.audio_url = e.url;
this.save(); this.save();
} // this.update.emit(this.item);
radioClick(it, radioValue) {
it.radioValue = radioValue;
this.saveItem(); // console.log('this.item: ', this.item);
} }
clickCheckBox() {
console.log(' in clickCheckBox');
this.saveItem();
}
saveItem() { onAudioUploadSuccessByItem(e, item, id = null) {
console.log(' in saveItem'); if (id != null) {
item[id + '_audio_url'] = e.url;
} else {
item.audio_url = e.url;
}
// this.update.emit(this.item); // this.update.emit(this.item);
this.save(); this.save();
} }
save() { save() {
(<any> window).courseware.setData(this.item, null, this.saveKey); (<any> window).courseware.setData(this.item, null, this.saveKey);
console.log('side'+this.item);
this.refresh(); this.refresh();
} }
...@@ -203,8 +172,7 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy { ...@@ -203,8 +172,7 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
setTimeout(() => { setTimeout(() => {
this.appRef.tick(); this.appRef.tick();
}, 1); }, 1);
console.log("===========================================================================================");
} }
} }
...@@ -28,7 +28,6 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -28,7 +28,6 @@ export class PlayComponent implements OnInit, OnDestroy {
// 数据 // 数据
data; data;
ctx; ctx;
canvasWidth = 1280; // canvas实际宽度 canvasWidth = 1280; // canvas实际宽度
...@@ -60,14 +59,11 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -60,14 +59,11 @@ export class PlayComponent implements OnInit, OnDestroy {
saveKey = 'ssy003'; saveKey = 'ssy003';
picIndex = 0; picIndex = 0;
cardArr = []; cardArr = [];
picArr picArr
canTouch =true;
canTouch = true;
curPic; curPic;
...@@ -130,9 +126,8 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -130,9 +126,8 @@ export class PlayComponent implements OnInit, OnDestroy {
this.initCtx(); this.initCtx();
this.initData(); this.initData();
// this.randomItemCard();
this.initView(); this.initView();
console.log("qqqqqqqqqqqqqqqqqq");
} }
...@@ -577,6 +572,8 @@ initImg() { ...@@ -577,6 +572,8 @@ initImg() {
/** /**
* 初始化数据 * 初始化数据
*/ */
...@@ -629,9 +626,9 @@ initImg() { ...@@ -629,9 +626,9 @@ initImg() {
//声明骰子 //声明骰子
this.stouzi(); this.stouzi();
//骰子呼吸动画 //骰子呼吸动画
}
} a
a
big(){ big(){
const tween=tweenChange(this.tz, {scaleX: 1.1, scaleY: 1.1}, 1 , ()=>{ const tween=tweenChange(this.tz, {scaleX: 1.1, scaleY: 1.1}, 1 , ()=>{
...@@ -667,9 +664,12 @@ stouzi(){ ...@@ -667,9 +664,12 @@ stouzi(){
this.t.init(this.images.get("t1")); this.t.init(this.images.get("t1"));
this.startBorder.addChild(this.tz); // this.startBorder.addChild(this.tz);
this.tz.setScaleXY(this.mapScale/1.2); this.tz.setScaleXY(this.mapScale/1.2);
this.tz.y=-50; this.tz.y=this.canvasHeight/2.5;
this.tz.x=this.canvasWidth/2;
this.renderArr.push(this.tz);
} }
...@@ -690,12 +690,15 @@ startBtn(){ ...@@ -690,12 +690,15 @@ startBtn(){
this.Btn.addChild(this.stn); this.Btn.addChild(this.stn);
this.Btn.addChild(this.retn); this.Btn.addChild(this.retn);
this.startBorder.addChild(this.Btn); // this.startBorder.addChild(this.Btn);
this.stn.visible=true; this.stn.visible=true;
this.retn.visible=false; this.retn.visible=false;
this.Btn.setScaleXY(this.mapScale/1.5); this.Btn.setScaleXY(this.mapScale/1.5);
this.b=0; this.b=0;
this.Btn.y=200; this.Btn.y=this.canvasHeight/1.2;
this.Btn.x=this.canvasWidth/2;
this.renderArr.push(this.Btn);
...@@ -779,52 +782,34 @@ getPetal() { ...@@ -779,52 +782,34 @@ getPetal() {
bg bg
startBorder startBorder
bgLayer bgLayer
initBg() {
this.bgLayer = new MySprite();
this.renderArr.push(this.bgLayer);
const bg = new ShapeRect();
bg.fillColor = '#75d100';
bg.setSize(this.canvasWidth, this.canvasHeight);
this.renderArr.push(bg);
this.bg = bg;
//把图片填充入背景,全覆盖
this.startBorder = new MySprite();
this.startBorder.init(this.images.get('BG'));
this.startBorder.x = this.canvasWidth / 2 ;
this.startBorder.y = this.canvasHeight / 2 ;
const sx = this.canvasWidth / this.startBorder.width;
const sy = this.canvasHeight / this.startBorder.height;
const s=Math.max(sx,sy);
console.log(s+"s");
this.startBorder.setScaleXY(s);
this.renderArr.push(this.startBorder);
} count=0;
count=0; active=1;
active=1; last
last
mapDown(event) { mapDown(event) {
if (!this.canTouch) {
return;
}
//点击按钮,骰子竖直跳下来,卡片弹出来 //点击开始按钮,骰子竖直跳下来,卡片弹出来
if (this.checkClickTarget(this.stn)&&(this.b==0)) { if (this.checkClickTarget(this.stn)&&(this.b==0)) {
this.canTouch=false; this.canTouch=false;
this.big(); this.big();
this.startGame(); this.startGame();
setTimeout(() => {
this.canTouch=true;
}, 1600);
return; return;
} }
//点击重新开始按钮
if (this.checkClickTarget(this.retn)&&(this.b==1)) { if (this.checkClickTarget(this.retn)&&(this.b==1)) {
this.canTouch=false;
console.log("bbbbb"+this.b);
this.canTouch = false;
for(let i=0;i<this.cardArr.length;i++){ for(let i=0;i<this.cardArr.length;i++){
tweenChange(this.cardArr[i], {scaleX: 0, scaleY: 0}, 0.3, ()=>{ tweenChange(this.cardArr[i], {scaleX: 0, scaleY: 0}, 0.3, ()=>{
}); });
...@@ -834,26 +819,35 @@ last ...@@ -834,26 +819,35 @@ last
this.tz.setScaleXY(this.mapScale/1.5); this.tz.setScaleXY(this.mapScale/1.5);
this.tz.y=-50; this.tz.y=-50;
// this.big(); // this.big();
this.startGame(); this.startGame();
setTimeout(() => {
this.canTouch=true;
}, 1600);
} }
//点击骰子,随机选卡] //点击骰子,随机选卡]
if (this.checkClickTarget( this.t)) { if (this.checkClickTarget( this.t)) {
this.canTouch=false;
console.log(this.canTouch+"-----00000000000");
this.a.stop(); this.a.stop();
this.w.stop(); this.w.stop();
this.canTouch = false;
console.log(this.canTouch+"-----0000000000011111111");
this.starttouzi(); this.starttouzi();
setTimeout(() => {
this.canTouch=true;
}, 1900);
return; return;
...@@ -918,16 +912,17 @@ last ...@@ -918,16 +912,17 @@ last
this.canTouch = false; this.canTouch = false;
this.tAnimation(); this.tAnimation();
if(this.count!=1){ if(this.count!=1){
hideItem(this.faguang[this.last]);
hideItem(this.faguang[this.last]);
} }
if(this.count==6){ if(this.count==6){
this.canTouch = false;
this.count=0; this.count=0;
setTimeout(() => { setTimeout(() => {
//骰子消失 //骰子消失
console.log("消失骰子数"+this.t);
// hideItem(this.tz); // hideItem(this.tz);
...@@ -942,7 +937,7 @@ last ...@@ -942,7 +937,7 @@ last
}); });
}, 180); }, 180);
}, 1800); }, 1300);
} }
...@@ -951,14 +946,14 @@ last ...@@ -951,14 +946,14 @@ last
b b
btnIn1(item){ btnIn1(item){
this.playAudio("sm-in"); this.playAudio("sm-in");
tweenChange(item, {y: 200}, .3); tweenChange(item, {y: this.canvasHeight-100*this.mapScale}, .3);
} }
btnOut(item){ btnOut(item){
this.playAudio("sm-out"); this.playAudio("sm-out");
let out = this.canvasWidth+200*this.mapScale; let out = this.canvasWidth+200*this.mapScale;
tweenChange(item, {y: out}, 3); tweenChange(item, {y: out}, 3);
} }
//开始游戏 //开始游戏
startGame(){ startGame(){
this.canTouch = false; this.canTouch = false;
this.playAudio("start"); this.playAudio("start");
...@@ -978,10 +973,12 @@ last ...@@ -978,10 +973,12 @@ last
//卡片弹出来 //卡片弹出来
setTimeout(() => { setTimeout(() => {
this.initCard(); this.initCard();
}, 180); }, 180);
//骰子掉下来 //骰子掉下来
setTimeout(() => { setTimeout(() => {
this.touzi(); this.touzi();
}, 300); }, 300);
} }
...@@ -1005,14 +1002,14 @@ last ...@@ -1005,14 +1002,14 @@ last
this.randomt = this.newball[0]; this.randomt = this.newball[0];
this.playAudio("touzi"); this.playAudio("touzi");
this.canTouch = false;
console.log("this.a"+this.a); console.log("this.a"+this.a);
console.log(this.t[this.randomt]+"kongmei22222222");
const animation=new MyAnimation(); const animation=new MyAnimation();
for(let j=0;j<2;j++){ for(let j=0;j<2;j++){
for(let i=0;i<6;i++){ for(let i=0;i<6;i++){
...@@ -1036,7 +1033,8 @@ last ...@@ -1036,7 +1033,8 @@ last
this.bs[ this.randomt]=1; this.bs[ this.randomt]=1;
} }
animation.stop(); animation.stop();
console.log("---------"+this.randomt);
let x=3; let x=3;
// this.t.init(this.images.get("t"+x)); // this.t.init(this.images.get("t"+x));
this.t.init(this.images.get("t"+(this.randomt+1))); this.t.init(this.images.get("t"+(this.randomt+1)));
...@@ -1057,9 +1055,6 @@ last ...@@ -1057,9 +1055,6 @@ last
rect.y=this.cardArr[this.randomt].y-140; rect.y=this.cardArr[this.randomt].y-140;
rect.width=250; rect.width=250;
rect.height=250; rect.height=250;
console.log("rect"+rect.width);
console.log("cardx"+this.cardArr[this.randomt].x);
console.log("cardy"+this.cardArr[this.randomt].y);
showBlingBling(this.images.get('ss'), rect, this.bgLayer, this.mapScale*1.5, 1, 0.05, 1.5); showBlingBling(this.images.get('ss'), rect, this.bgLayer, this.mapScale*1.5, 1, 0.05, 1.5);
}); });
...@@ -1069,6 +1064,7 @@ last ...@@ -1069,6 +1064,7 @@ last
this.a.start(); this.a.start();
this.w.start(); this.w.start();
}; };
...@@ -1081,8 +1077,8 @@ last ...@@ -1081,8 +1077,8 @@ last
ss4 ss4
oldball oldball
newball newball
randomtz(){ randomtz(){
this.oldball=[0,1,2,3,4,5]; this.oldball=[0,1,2,3,4,5];
this.oldball=randomSortByArr(this.oldball); this.oldball=randomSortByArr(this.oldball);
...@@ -1108,48 +1104,39 @@ newball ...@@ -1108,48 +1104,39 @@ newball
const picLength = this.cardArr.length; const picLength = this.cardArr.length;
const top = (120)*this.mapScale;//第一排 const top = (120)*this.mapScale;//卡片第一排距离头顶的距离
const top2 = (212+160)*this.mapScale;//第二排 const top2 = (212+160)*this.mapScale;//卡片第二排距离头顶的距离
const allWidth = ((picLength/2)*280+(picLength/2-1)*80)*this.mapScale; const allWidth = ((picLength/2)*280+(picLength/2-1)*80)*this.mapScale;//卡片总宽
const drawItem = (index)=>{ const drawItem = (index)=>{
//设置卡片间距 //设置卡片间距
let itemBack = this.cardArr[index]; let itemBack = this.cardArr[index];
itemBack.x = (this.canvasWidth-allWidth)/2+((Math.floor(index/2)*(253+55))+200)*this.mapScale;
if(index%2==0){ if(index<3){
itemBack.y = top; itemBack.y = top;
itemBack.x = (this.canvasWidth-allWidth)/2+(((index)*(253+55))+200)*this.mapScale;//剩余的宽加
}else{ }else{
itemBack.y = top2; itemBack.y = top2;
} itemBack.x = (this.canvasWidth-allWidth)/2+(((index-3)*(253+55))+200)*this.mapScale;//剩余的宽加
itemBack.setScaleXY(this.mapScale);
this.renderArr.push(itemBack);
};
const drawItem2 = (index)=>{
let itemBack = this.cardArr[index];
//itemBack.x = ((this.canvasWidth-allWidth)/2)*this.mapScale;
if(index%2==0){
itemBack.x = top*2+100;
}else{
itemBack.x = top2*2-170;
}
itemBack.y = top*2-30;
}
itemBack.setScaleXY(this.mapScale); itemBack.setScaleXY(this.mapScale);
this.renderArr.push(itemBack); this.renderArr.push(itemBack);
}; };
if(picLength==2){
for(let i=0;i<picLength;i++){ for(let i=0;i<6;i++){
drawItem2(i);
}
}else{
for(let i=0;i<picLength;i++){
drawItem(i); drawItem(i);
} }
}
} }
...@@ -1191,10 +1178,10 @@ newball ...@@ -1191,10 +1178,10 @@ newball
}); });
} }
q q
front=[] front=[]
back=[] back=[]
bs=[]; bs=[];
faguang=[] faguang=[]
randomItemCard(){ randomItemCard(){
this.cardArr = []; this.cardArr = [];
...@@ -1318,6 +1305,33 @@ faguang=[] ...@@ -1318,6 +1305,33 @@ faguang=[]
this.front[3].init(this.images.get("front2")); this.front[3].init(this.images.get("front2"));
this.front[2].init(this.images.get("front2")); this.front[2].init(this.images.get("front2"));
}
initBg() {
this.bgLayer = new MySprite();
this.renderArr.push(this.bgLayer);
const bg = new ShapeRect();
bg.fillColor = '#75d100';
bg.setSize(this.canvasWidth, this.canvasHeight);
this.renderArr.push(bg);
this.bg = bg;
//把图片填充入背景,全覆盖
this.startBorder = new MySprite();
this.startBorder.init(this.images.get('BG'));
this.startBorder.x = this.canvasWidth / 2 ;
this.startBorder.y = this.canvasHeight / 2 ;
const sx = this.canvasWidth / this.startBorder.width;
const sy = this.canvasHeight / this.startBorder.height;
const s=Math.max(sx,sy);
console.log(s+"s");
this.startBorder.setScaleXY(s);
this.renderArr.push(this.startBorder);
} }
mapMove(event) { mapMove(event) {
......
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