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

提交

parent 7b9a904b
...@@ -128,5 +128,8 @@ ...@@ -128,5 +128,8 @@
} }
} }
}, },
"defaultProject": "ng-template-generator" "defaultProject": "ng-template-generator",
} "cli": {
"analytics": "0ed1797c-900d-4932-8f62-22d25633dc0e"
}
}
\ No newline at end of file
...@@ -6,3 +6,30 @@ ...@@ -6,3 +6,30 @@
height: 100%; height: 100%;
} }
.item-box{
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
padding: 10px;
padding-bottom: 2vw;
padding-top: 3vw;
}
.border {
border-radius: 20px;
border-style: dashed;
width: 500px;
text-align: center;
}
.pic-sound-box {
width: 50%;
display: flex;
flex-direction: column
}
\ No newline at end of file
<div class="model-content">
<div class="model-content"> <div style="position: absolute;left: 100px;top:20px;width: 500px;">
<nz-radio-group [(ngModel)]="side">
<label nz-radio nzValue="A"(click)="sideB()">默认背面</label>
<div style="position: absolute; left: 200px; top: 100px; width: 800px;"> <label nz-radio nzValue="B"(click)="sideA()">默认正面</label>
</nz-radio-group>
<input type="text" nz-input [(ngModel)]="item.text" (blur)="save()">
<div *ngFor="let it of picArr; let i = index" class="card-item" style="padding: 0.5vw;">
<app-upload-image-with-preview <div class="border">
[picUrl]="item.pic_url" <h3 style="width: 100%; line-height: 40px; text-align: center;"> 卡片-{{i+1}}</h3>
(imageUploaded)="onImageUploadSuccess($event, 'pic_url')"
></app-upload-image-with-preview>
<div style="display: flex; align-items: center; width: 100%;">
<app-audio-recorder <!--上传-->
[audioUrl]="item.audio_url" <div class="item-box" style="width: 100%">
(audioUploaded)="onAudioUploadSuccess($event, 'audio_url')"
></app-audio-recorder>
<app-custom-hot-zone></app-custom-hot-zone> <div style="display: flex; align-items: center">
<app-upload-video></app-upload-video> <span style="padding-right: 10px"> 类型:</span>
<app-lesson-title-config></app-lesson-title-config>
</div> <nz-radio-group [(ngModel)]="it.optionTypeA" (ngModelChange)="save()">
<label nz-radio nzValue="A">文本</label>
<label nz-radio nzValue="B">图片</label>
</nz-radio-group>
</div>
<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()">
</div>
<div *ngIf="it.optionTypeA == 'B'" style="width: 90%; margin: auto">
<div style="width: 100%;">
<app-upload-image-with-preview
[picUrl]="it.pic_url"
(imageUploaded)="onImageUploadSuccessByItem($event, it)"
></app-upload-image-with-preview>
</div>
</div>
<app-audio-recorder
style="margin-top: 0.5vw"
[audioUrl]="it.audio_url"
(audioUploaded)="onAudioUploadSuccessByItem($event, it)">
</app-audio-recorder>
</div>
</div>
</div>
</div>
</div>
</div> </div>
\ No newline at end of file
...@@ -9,13 +9,29 @@ import {Component, EventEmitter, Input, OnDestroy, OnChanges, OnInit, Output, Ap ...@@ -9,13 +9,29 @@ import {Component, EventEmitter, Input, OnDestroy, OnChanges, OnInit, Output, Ap
}) })
export class FormComponent implements OnInit, OnChanges, OnDestroy { export class FormComponent implements OnInit, OnChanges, OnDestroy {
// 储存数据用 picArr = [];
saveKey = "test_0011"; _item: any;
// 储存对象 saveKey = 'ssy003';
item; radioValue;
side
// @Input()
set item(item) {
this._item = item;
// this.init();
}
get item() {
return this._item;
}
@Output()
update = new EventEmitter();
constructor(private appRef: ApplicationRef,private changeDetectorRef: ChangeDetectorRef) { constructor(private appRef: ApplicationRef) {
} }
...@@ -23,74 +39,154 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy { ...@@ -23,74 +39,154 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
ngOnInit() { ngOnInit() {
this.item = {}; this.item = {};
this.item.contentObj = {};
// 获取存储的数据 const getData = (<any> window).courseware.getData;
(<any> window).courseware.getData((data) => { getData((data) => {
if (data) { if (data) {
this.item = data; this.item = data;
} else {
this.item = {};
} }
if ( !this.item.contentObj ) {
this.item.contentObj = {};
}
console.log('~data:', data);
this.init(); this.init();
this.changeDetectorRef.markForCheck();
this.changeDetectorRef.detectChanges();
this.refresh(); this.refresh();
}, this.saveKey);
// this.initDefaultData();
}
}, this.saveKey);
this.initData();
}
ngOnChanges() { ngOnChanges() {
} }
ngOnDestroy() { ngOnDestroy() {
} }
init() { init() {
if (this.item.contentObj.picArr) {
this.picArr = this.item.contentObj.picArr;
} else {
this.picArr = this.getDefaultPicArr();
this.item.contentObj.picArr = this.picArr;
}
console.log('item:' , this.item);
// this.picArr = this.getDefaultPicArr();
// this.item.contentObj.picArr = this.picArr;
// console.log('this.item:;', this.picArr);
}
cardItemData(){
return {
title: "",
pic_url: "",
audio_url: ""
};
}
sideA(){
this.item.sideA=1;
this.item.sideB=0;
this.save();
console.log('radiovalue:' , this.radioValue);
console.log('item:' , this.item);
}
sideB(){
this.item.sideB=1;
this.item.sideA=0;
this.save();
console.log('item:' , this.item);
}
getDefaultPicArr() {
let arr = [];
return arr;
} }
/**
* 储存图片数据
* @param e
*/
onImageUploadSuccess(e, key) {
this.item[key] = e.url; initData() {
this.save();
this.picArr=[];
this.item.contentObj.picArr = this.picArr;
for(let i=1;i<=6;i++){
let item = this.cardItemData();
this.picArr.push(item);
}
this.saveItem();
console.log('init~data:', this.picArr);
} }
/**
* 储存音频数据
* @param e
*/
onAudioUploadSuccess(e, key) {
this.item[key] = e.url; onImageUploadSuccessByItem(e, item) {
item.pic_url = e.url;
this.save();
}
onAudioUploadSuccessByItem(e, item) {
item.audio_url = e.url;
this.save(); this.save();
} }
radioClick(it, radioValue) {
it.radioValue = radioValue;
this.saveItem();
}
clickCheckBox() {
console.log(' in clickCheckBox');
this.saveItem();
}
/**
* 储存数据
*/ saveItem() {
console.log(' in saveItem');
// this.update.emit(this.item);
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();
} }
/**
* 刷新 渲染页面
*/
refresh() { refresh() {
setTimeout(() => { setTimeout(() => {
this.appRef.tick(); this.appRef.tick();
}, 1); }, 1);
console.log("===========================================================================================");
} }
} }
......
<div class="game-container" #wrap> <div class="game-container" #wrap>
<canvas id="canvas" #canvas></canvas> <canvas id="canvas" #canvas></canvas>
</div> </div>
...@@ -2,7 +2,7 @@ import {Component, ElementRef, ViewChild, OnInit, Input, OnDestroy, HostListener ...@@ -2,7 +2,7 @@ import {Component, ElementRef, ViewChild, OnInit, Input, OnDestroy, HostListener
import { import {
Label, Label,
MySprite, tweenChange, MySprite, tweenChange, MyAnimation, randomSortByArr, ShapeRect, getMinScale, showPopParticle, moveItem, removeItemFromArr, rotateItem, showStar, showItem, alphaItem, endShow, hideItem,
} from './Unit'; } from './Unit';
import {res, resAudio} from './resources'; import {res, resAudio} from './resources';
...@@ -28,6 +28,7 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -28,6 +28,7 @@ export class PlayComponent implements OnInit, OnDestroy {
// 数据 // 数据
data; data;
ctx; ctx;
canvasWidth = 1280; // canvas实际宽度 canvasWidth = 1280; // canvas实际宽度
...@@ -57,15 +58,16 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -57,15 +58,16 @@ export class PlayComponent implements OnInit, OnDestroy {
canvasLeft; canvasLeft;
canvasTop; canvasTop;
saveKey = 'test_0011'; saveKey = 'ssy003';
picIndex = 0;
cardArr = [];
picArr
btnLeft;
btnRight;
pic1;
pic2;
canTouch = true; canTouch = false;
curPic; curPic;
...@@ -74,35 +76,37 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -74,35 +76,37 @@ export class PlayComponent implements OnInit, OnDestroy {
this.winResizeEventStream.next(); this.winResizeEventStream.next();
} }
ngOnInit() { ngOnInit() {
this.data = {};
// 获取数据
const getData = (<any> window).courseware.getData; const getData = (<any> window).courseware.getData;
getData((data) => { getData((data) => {
if (data && typeof data == 'object') { if (data && typeof data == 'object') {
this.data = data; this.data = data;
} else {
this.data = {};
} }
// console.log('data:' , data);
// 初始化 各事件监听 console.log('data:' , data);
this.initListener(); if (!this.data.contentObj) {
this.data.contentObj = {};
}
// 若无数据 则为预览模式 需要填充一些默认数据用来显示
this.initListener();
this.initDefaultData(); this.initDefaultData();
// 初始化 音频资源
console.log("canvasdefout+"+this.canvas);
this.initAudio(); this.initAudio();
// 初始化 图片资源
this.initImg(); this.initImg();
// 开始预加载资源
this.load();
}, this.saveKey); }, this.saveKey);
} }
ngOnDestroy() { ngOnDestroy() {
...@@ -126,9 +130,12 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -126,9 +130,12 @@ export class PlayComponent implements OnInit, OnDestroy {
this.initCtx(); this.initCtx();
this.initData(); this.initData();
this.initView(); // this.randomItemCard();
this.initView();
console.log("qqqqqqqqqqqqqqqqqq");
} }
initCtx() { initCtx() {
this.canvasWidth = this.wrap.nativeElement.clientWidth; this.canvasWidth = this.wrap.nativeElement.clientWidth;
this.canvasHeight = this.wrap.nativeElement.clientHeight; this.canvasHeight = this.wrap.nativeElement.clientHeight;
...@@ -432,55 +439,176 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -432,55 +439,176 @@ export class PlayComponent implements OnInit, OnDestroy {
*/ */
initDefaultData() { initDefaultData() {
if (!this.data.pic_url) {
this.data.pic_url = 'assets/play/default/pic.jpg'; //将图片一一传到卡片上
this.data.pic_url_2 = 'assets/play/default/pic.jpg'; const picArr = this.data.contentObj.picArr;
if (!picArr || picArr.length == 0) {
const picArr = [];
picArr.push({
pic_url:'', audio_url: "assets/play/music/card.mp3", title: "1"
});
picArr.push({
pic_url:'', audio_url: "assets/play/music/card.mp3", title: "2"
});
picArr.push({
pic_url:'', audio_url: "assets/play/music/card.mp3", title: "3"
});
picArr.push({
pic_url:'', audio_url:"assets/play/music/card.mp3", title: "4"
});
this.data.contentObj.picArr = picArr;
} }
}
/**
* 添加预加载图片
*/
initImg() {
this.addUrlToImages(this.data.pic_url); }
this.addUrlToImages(this.data.pic_url_2);
initAudio() {
const contentObj = this.data.contentObj;
if (!contentObj) { return; }
const addUrlToAudioObj = (audioUrl) => {
if (audioUrl) {
// console.log('audioUrl:', audioUrl);
const audio = new Audio();
audio.src = audioUrl;
audio.load();
this.audioObj[audioUrl] = audio;
}
};
const arr = contentObj.picArr;
if (arr) {
for (let i = 0; i < arr.length; i++) {
addUrlToAudioObj(arr[i].audio_url);
}
} }
/**
* 添加预加载音频
*/
initAudio() {
// 音频资源
this.addUrlToAudioObj(this.data.audio_url);
this.addUrlToAudioObj(this.data.audio_url_2);
// 音效
this.addUrlToAudioObj('click', this.rawAudios.get('click'), 0.3); const audioObj = this.audioObj;
const addOneAudio = (key, url, vlomue = 1, loop = false, callback = null) => {
const audio = new Audio();
audio.src = url;
audio.load();
audio.loop = loop;
audio.volume = vlomue;
audioObj[key] = audio;
if (callback) {
audio.onended = () => {
callback();
};
}
};
// addOneAudio('sm-back', this.rawAudios.get('sm-back'), 1);
// addOneAudio('sm-display', this.rawAudios.get('sm-display'), 1);
//addOneAudio('sm-wrong', this.rawAudios.get('sm-wrong'), 1);
// addOneAudio('sm-win', this.rawAudios.get('sm-win'), 1);
// addOneAudio('sm-in', this.rawAudios.get('sm-in'), 1);
addOneAudio('touzi', this.rawAudios.get('touzi'), 1);
addOneAudio('card', this.rawAudios.get('card'), 1);
addOneAudio('start', this.rawAudios.get('start'), 1);
// this.successAudio.onended = () => {
// // this.showSuccessAudio();
// };
}
initImg() {
const contentObj = this.data.contentObj;
if (contentObj) {
const addPicUrl = (url) => {
if (url) {
this.rawImages.set(url, url);
}
};
const arr = this.data.contentObj.picArr;
if (arr) {
for (let i = 0; i < arr.length; i++) {
addPicUrl( arr[i].pic_url);
}
}
} }
// 预加载资源
this.loadResources().then(() => {
window["air"].hideAirClassLoading("ball",this.data);
// this.setfontData();
this.init();
this.update();
});
}
/** /**
* 初始化数据 * 初始化数据
*/ */
initData() { initData() {
this.canvasWidth = this.wrap.nativeElement.clientWidth;
this.canvasHeight = this.wrap.nativeElement.clientHeight;
this.canvas.nativeElement.width = this.wrap.nativeElement.clientWidth;
this.canvas.nativeElement.height = this.wrap.nativeElement.clientHeight;
const sx = this.canvasWidth / this.canvasBaseW; const sx = this.canvasWidth / this.canvasBaseW;
const sy = this.canvasHeight / this.canvasBaseH; const sy = this.canvasHeight / this.canvasBaseH;
const s = Math.min(sx, sy); const s = Math.min(sx, sy);
this.mapScale = s; this.mapScale = s;
// this.mapScale = sx; // this.mapScale = this.canvasWidth / this.canvasBaseW;
// this.mapScale = sy; // this.mapScale = this.canvasHeight / this.canvasBaseH;
this.renderArr = [];
this.renderArr = []; if (!this.data.contentObj.picArr) {
this.data.contentObj.picArr = [];
}
this.picArr = this.data.contentObj.picArr;
this.cardArr = [];
} }
...@@ -490,161 +618,698 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -490,161 +618,698 @@ export class PlayComponent implements OnInit, OnDestroy {
/** /**
* 初始化试图 * 初始化试图
*/ */
initView() { initView() {
//加背景
this.initBg();
//加流星
this.Animation();
//加开始按钮
this.startBtn();
//骰子在屏幕一直呼吸
//声明骰子
this.stouzi();
//骰子呼吸动画
}
a
big(){
this.initPic(); const tween=tweenChange(this.tz, {scaleX: 1.1, scaleY: 1.1}, 1 , ()=>{
this.small();
});
this.a=tween;
this.initBottomPart(); }
w
small(){
const tween=tweenChange(this.tz, {scaleX: 1, scaleY: 1}, 1 , ()=>{
this.big();
});
this.w=tween;
}
initBottomPart() { }
const btnLeft = new MySprite();
btnLeft.init(this.images.get('btn_left'));
btnLeft.x = this.canvasWidth - 150 * this.mapScale;
btnLeft.y = this.canvasHeight - 100 * this.mapScale;
btnLeft.setScaleXY(this.mapScale); stouzi(){
//声明骰子
this.tz=new MySprite();
this.t= new MySprite();
this.tz.addChild(this.t);
this.t.init(this.images.get("t1"));
this.startBorder.addChild(this.tz);
this.tz.setScaleXY(this.mapScale/1.2);
this.tz.y=-50;
}
this.renderArr.push(btnLeft); Btn
stn
retn
startBtn(){
this.btnLeft = btnLeft;
const allwidth=((this.cardArr.length/2)*280+(this.cardArr.length/2-1)*56)*this.mapScale;
this.Btn= new MySprite();
this.stn= new MySprite();
this.retn= new MySprite();
this.stn.init(this.images.get("stn"));
this.retn.init(this.images.get("retn"));
const btnRight = new MySprite(); this.Btn.addChild(this.stn);
btnRight.init(this.images.get('btn_right')); this.Btn.addChild(this.retn);
btnRight.x = this.canvasWidth - 50 * this.mapScale; this.startBorder.addChild(this.Btn);
btnRight.y = this.canvasHeight - 100 * this.mapScale; this.stn.visible=true;
btnRight.setScaleXY(this.mapScale); this.retn.visible=false;
this.Btn.setScaleXY(this.mapScale/1.5);
this.b=0;
this.Btn.y=200;
this.renderArr.push(btnRight);
this.btnRight = btnRight;
}
initPic() {
}
s1
Animation(){
this.endPageArr = [];
this.endPageArr.push(this.s1);
this.showPetalFlag = true;
this.s1=new MySprite();
this.s1.init(this.images.get("star"));
this.s1.x=this.canvasWidth;
this.s1.y=-1.2*this.canvasHeight;
this.startBorder.addChild(this.s1);
const randomT = 9;
this.s1['time'] = randomT;
moveItem(this.s1, -(this.canvasWidth + this.s1.width * this.s1.scaleX), this.canvasHeight + this.s1.height * this.s1.scaleY, this.s1['time'], () => {
removeItemFromArr(this.endPageArr, this.s1);
});
setTimeout(() => {
this.Animation();
},2000);
const maxW = this.canvasWidth * 0.7;
const pic1 = new MySprite();
pic1.init(this.images.get(this.data.pic_url));
pic1.x = this.canvasWidth / 2;
pic1.y = this.canvasHeight / 2;
pic1.setScaleXY(maxW / pic1.width);
this.renderArr.push(pic1);
this.pic1 = pic1;
}
addPetal() {
const label1 = new Label(); if (!this.showPetalFlag) {
label1.text = this.data.text; return;
label1.textAlign = 'center'; }
label1.fontSize = 50;
label1.fontName = 'BRLNSDB';
label1.fontColor = '#ffffff';
pic1.addChild(label1); const petal = this.getPetal();
this.endPageArr.push(petal);
moveItem(petal, petal.x, this.canvasHeight + petal.height * petal.scaleY, petal['time'], () => {
removeItemFromArr(this.endPageArr, petal);
});
rotateItem(petal, petal['tr'], petal['time']);
setTimeout(() => {
this.addPetal();
}, 100);
}
getPetal() {
const pic2 = new MySprite(); const petal = new MySprite(this.ctx);
pic2.init(this.images.get(this.data.pic_url_2));
pic2.x = this.canvasWidth / 2 + this.canvasWidth;
pic2.y = this.canvasHeight / 2;
pic2.setScaleXY(maxW / pic2.width);
this.renderArr.push(pic2); const id = Math.ceil( Math.random() * 4 );
this.pic2 = pic2; petal.init(this.images.get('petal_' + id));
this.curPic = pic1; const randomS = (Math.random() * 0.4 + 0.6) * this.mapScale;
} petal.setScaleXY(randomS);
const randomR = Math.random() * 360;
petal.rotation = randomR;
btnLeftClicked() { const randomX = Math.random() * this.canvasWidth;
petal.x = randomX;
petal.y = -petal.height / 2 * petal.scaleY;
this.lastPage(); const randomT = 2 + Math.random() * 5;
} petal['time'] = randomT;
btnRightClicked() { let randomTR = 360 * Math.random(); // - 180;
if (Math.random() < 0.5) { randomTR *= -1; }
petal['tr'] = randomTR;
this.nextPage(); return petal;
} }
lastPage() { bg
startBorder
initBg() {
if (this.curPic == this.pic1) { const bg = new ShapeRect();
return; bg.fillColor = '#75d100';
} bg.setSize(this.canvasWidth, this.canvasHeight);
this.renderArr.push(bg);
this.bg = bg;
this.canTouch = false;
//把图片填充入背景,全覆盖
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);
const moveLen = this.canvasWidth;
tweenChange(this.pic1, {x: this.pic1.x + moveLen}, 1);
tweenChange(this.pic2, {x: this.pic2.x + moveLen}, 1, () => {
this.canTouch = true;
this.curPic = this.pic1;
});
}
nextPage() {
if (this.curPic == this.pic2) {
}
count=0;
active=1;
mapDown(event) {
//点击按钮,骰子竖直跳下来,卡片弹出来
if (this.checkClickTarget(this.stn)&&(this.b==0)) {
this.canTouch=false;
this.big();
this.startGame();
return;
}
if (this.checkClickTarget(this.retn)&&(this.b==1)) {
console.log("bbbbb"+this.b);
this.canTouch = false;
for(let i=0;i<this.cardArr.length;i++){
tweenChange(this.cardArr[i], {scaleX: 0, scaleY: 0}, 0.3, ()=>{
});
}
this.tz.visible=true;
this.tz.setScaleXY(this.mapScale/1.5);
this.tz.y=-50;
// this.big();
this.startGame();
}
//点击骰子,随机选卡]
if (this.checkClickTarget( this.t)) {
console.log(this.canTouch+"-----00000000000");
this.a.stop();
this.w.stop();
this.canTouch = false;
console.log(this.canTouch+"-----0000000000011111111");
this.starttouzi();
return; return;
} }
//点击图片正面的动作
for(let i=0;i<this.cardArr.length;i++){
let card = this.cardArr[i];
let cardBg = card.children[1];
console.log("i"+i);
if (this.checkClickTarget(cardBg)&&(this.bs[i]==1)){
console.log("contc"+this.countc);
this.countc++;
let lcard;
lcard=this.cardArr[this.x];
if(this.countc==1){
}
else{
const audio = this.audioObj[lcard["audio_url"]];
audio.pause();
audio.currentTime = 0;
}
this.playAudio(card["audio_url"]);
this.x=i;
console.log("i-"+i);
this.playAudio(card["audio_url"]);
return;
}
}
this.canTouch = false; }
countc=0;
x
starttouzi(){
this.count++;
//骰子转动,给一个随机数
this.canTouch = false;
this.tAnimation();
if(this.count==6){
this.count=0;
setTimeout(() => {
//骰子消失
console.log("消失骰子数"+this.t);
// hideItem(this.tz);
this.tz.visible=false;
//重新开始按钮
this.stn.visible=false;
this.retn.visible=true;
this.b=1;
setTimeout(() => {
tweenChange(this.Btn, {scaleX: 1, scaleY: 1}, 0.3 , ()=>{
});
}, 180);
}, 4000);
}
const moveLen = this.canvasWidth; }
tweenChange(this.pic1, {x: this.pic1.x - moveLen}, 1); b
tweenChange(this.pic2, {x: this.pic2.x - moveLen}, 1, () => { btnIn1(item){
this.canTouch = true; this.playAudio("sm-in");
this.curPic = this.pic2; tweenChange(item, {y: 200}, .3);
}
btnOut(item){
this.playAudio("sm-out");
let out = this.canvasWidth+200*this.mapScale;
tweenChange(item, {y: out}, 3);
}
//开始游戏
startGame(){
this.canTouch = false;
this.playAudio("start");
//生成随机数组
if(this.count==0){
this.randomtz();
}
//按钮消失
tweenChange(this.Btn, {scaleX: 1.2, scaleY: 1.2}, 0.3 , ()=>{
}); });
setTimeout(() => {
tweenChange(this.Btn, {scaleX: 0, scaleY: 0}, 0.3 , ()=>{
});
}, 180);
//卡片弹出来
setTimeout(() => {
this.initCard();
}, 180);
//骰子掉下来
setTimeout(() => {
this.touzi();
}, 300);
} }
pic1Clicked() { tz
this.playAudio(this.data.audio_url); t;
randomt
touzi(){
//骰子掉下来
this.btnIn1(this.tz);
} }
fancard(){
this.overCard(this.cardArr[this.randomt],()=>{
});
pic2Clicked() {
this.playAudio(this.data.audio_url_2);
} }
tAnimation(){
this.randomt = this.newball[0];
this.playAudio("touzi");
this.canTouch = false;
console.log("this.a"+this.a);
console.log(this.t[this.randomt]+"kongmei22222222");
const animation=new MyAnimation();
for(let j=0;j<6;j++){
for(let i=0;i<6;i++){
const imgobj=this.images.get('touzi'+i);
animation. addFrameByImg(imgobj);
}
}
animation.delayPerUnit=0.08;
//骰子旋转
animation.play();
animation.playEnd=() => {
if(this.data.sideA==1)
{
//默认正面
this.bs[this.randomt]=0;
}
if(this.data.sideB==1){
this.bs[ this.randomt]=1;
}
animation.stop();
console.log("---------"+this.randomt);
let x=3;
// this.t.init(this.images.get("t"+x));
this.t.init(this.images.get("t"+(this.randomt+1)));
this.overCard(this.cardArr[this.randomt],()=>{
this.showParticle(this.cardArr[this.randomt]);
});
console.log("old"+this.newball);
this.newball.splice(0,1);
console.log("new+"+this.newball);
this.a.start();
this.w.start();
};
this.tz.addChild(animation);
}
ss1
ss2
ss3
ss4
showParticle(card){
this.ss1=new MySprite();
this.ss1.init(this.images.get("ss"));
card.addChild(this.ss1);
this.ss1.x=-100;
this.ss1.y=100;
showItem(this.ss1);
this.ss2=new MySprite();
this.ss2.init(this.images.get("ss"));
card.addChild(this.ss2);
this.ss2.x=-120;
this.ss2.y=80;
showItem(this.ss2);
this.ss3=new MySprite();
this.ss3.init(this.images.get("ss"));
card.addChild(this.ss3);
this.ss3.x=130;
this.ss3.y=-60;
showItem(this.ss3);
this.ss4=new MySprite();
this.ss4.init(this.images.get("ss"));
card.addChild(this.ss4);
this.ss4.x=120;
this.ss4.y=-90;
this.ss4.setScaleXY(2*this.mapScale);
showItem(this.ss4);
hideItem(this.ss1);
hideItem(this.ss2);
hideItem(this.ss3);
hideItem(this.ss4);
// showStar(this.ss,0.4);
// showPopParticle(this.images.get('ss'), {x: card.x/6.8,y: card.y-400} ,this.startBorder);
}
oldball
newball
mapDown(event) { randomtz(){
this.oldball=[0,1,2,3,4,5];
if (!this.canTouch) { this.oldball=randomSortByArr(this.oldball);
return; this.newball=this.oldball;
}
endPageArr;
showPetalFlag;
initCard(){
this.randomItemCard();
// this.cardArr = randomSortByArr(this.cardArr); //重新排序卡片组
this.initItemCard();//设定卡片的位置
//卡片恢复之前的状态
for(let i=0;i<this.cardArr.length;i++){
let card = this.cardArr[i];
card.setScaleXY(this.mapScale);
card.alpha = 1;
} }
this.StartAnimation(this.cardArr);
}
initItemCard(){
const picLength = this.cardArr.length;
const top = (120)*this.mapScale;//第一排
const top2 = (212+160)*this.mapScale;//第二排
const allWidth = ((picLength/2)*280+(picLength/2-1)*80)*this.mapScale;
const drawItem = (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){
itemBack.y = top;
}else{
itemBack.y = top2;
}
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);
this.renderArr.push(itemBack);
};
if(picLength==2){
for(let i=0;i<picLength;i++){
drawItem2(i);
}
}else{
for(let i=0;i<picLength;i++){
drawItem(i);
}
if ( this.checkClickTarget(this.btnLeft) ) {
this.btnLeftClicked();
return;
} }
if ( this.checkClickTarget(this.btnRight) ) { }
this.btnRightClicked();
return;
}
if ( this.checkClickTarget(this.pic1) ) { StartAnimation(cardArr){
this.pic1Clicked(); //卡片渐进显示
return; /*for(let i=0;i<cardArr.length;i++){
tweenChange(cardArr[i], {alpha: 1}, 0.3, ()=>{
setTimeout(() => {
this.playAudio("sm-back");
this.overCard(cardArr[i],()=>{
this.canTouch = true;
});
}, 1000);
});
}*/
for(let i=0;i<cardArr.length;i++){
tweenChange(cardArr[i], {scaleX: 0, scaleY: 0}, 0, ()=>{
});
setTimeout(() => {
tweenChange(cardArr[i], {scaleX: 1, scaleY: 1}, 0.3);
}, 1000);
} }
}
overCard(item , callback?: any){
let w = item.scaleX;
this.playAudio("card");
tweenChange(item, {scaleX: 0}, 0.3,()=>{
item.children[2].visible = !item.children[2].visible;
tweenChange(item, {scaleX: w}, 0.3,()=>{
callback&&callback();
});
});
}
front
back=[]
bs=[];
randomItemCard(){
this.cardArr = [];
for(let i=0;i<6;i++){
let item = this.picArr[i];
let pic = new MySprite();
//初始化设置为隐藏
pic.alpha = 1;
pic.childDepandAlpha = true;
//声明正反面的对象
this.back[i] = new MySprite();
this.front = new MySprite();
this.front.init(this.images.get("front"));
//设置索引
pic["index"] = i;
//给正反面添加默认的显示图片
// this.back1.init(this.images.get("cardBg6"));
// this.front1.init(this.images.get("frontBg"));
//内嵌框
let bgRect = new ShapeRect();
bgRect.setSize(180, 180);
bgRect.init();
bgRect.fillColor = '#ff83fa';
this.front.addChild(bgRect, -1);
//把设置好的正反面变量放到卡片组里
if(this.data.sideA==1){
//如果选择默认是正面,bs=0
for(let i=0;i<this.picArr.length;i++){
this.bs[i]=1;
}
pic.addChild(this.back[i]);
pic.addChild(this.front);
}
else if(this.data.sideB==1){
for(let i=0;i<this.picArr.length;i++){
this.bs[i]=0;
}
if ( this.checkClickTarget(this.pic2) ) { pic.addChild(this.front);
this.pic2Clicked();
return;
}
pic.addChild(this.back[i]);
}
//音频路径做属性保存,方便点击卡片播放
if(item.audio_url){
pic["audio_url"] = item.audio_url;
console.log(item.audio_url+"pic-audio");
}
const maxLen = 160;
if(item.pic_url){
let pic = new MySprite();
pic.init(this.images.get(item.pic_url));
//如果是横图设置图片填充卡片正面的比例
if(pic.width>=pic.height){
pic.setScaleXY(getMinScale(pic, maxLen-15));
pic.x=2;
this.front.addChild(pic);
}
//如果是竖图设置图片填充卡片正面的比例
if(pic.width<pic.height&&(pic.width+40)>=pic.height){
pic.setScaleXY(getMinScale(pic, maxLen));
pic.x=0;
pic.y=-3;
}
//如果是正方图设置图片填充卡片正面的比例
if(pic.width<pic.height&&(pic.width+40)<pic.height){
pic.setScaleXY(getMinScale(pic, maxLen-10));
pic.x=-5;
pic.y=-6;
}
this.front.addChild(pic);
}else{
const label = new Label();
label.text = item.title;
label.fontName = 'BRLNSDB';
label.fontColor = '#ed3a33';
label.fontSize = 200;
label.textAlign = 'center';
label.setMaxSize((bgRect.width - 20)+10);
console.log(bgRect.width - 20+"卡片文字位置");
this.front.addChild(label);
}
this.cardArr.push(pic);
this.cardArr[i].alpha=1;
}
this.back[0].init(this.images.get("back0"));
this.back[4].init(this.images.get("back0"));
this.back[1].init(this.images.get("back1"));
this.back[5].init(this.images.get("back1"));
this.back[3].init(this.images.get("back2"));
this.back[2].init(this.images.get("back2"));
} }
mapMove(event) { mapMove(event) {
......
const res = [ const res = [
// ['bg', "assets/play/bg.jpg"], ['BG', "assets/play/bg.jpg"],
['btn_left', "assets/play/btn_left.png"], ['star', "assets/play/star.png"],
['btn_right', "assets/play/btn_right.png"], ['petal_1', "assets/play/star.png"],
// ['text_bg', "assets/play/text_bg.png"], ['petal_2', "assets/play/star.png"],
['petal_3', "assets/play/star.png"],
['petal_4', "assets/play/star.png"],
['ss', "assets/play/ss.png"],
['stn', "assets/play/stn.png"],
['retn', "assets/play/retn.png"],
['t1', "assets/play/t1.png"],
['t2', "assets/play/t2.png"],
['t3', "assets/play/t3.png"],
['t4', "assets/play/t4.png"],
['t5', "assets/play/t5.png"],
['t6', "assets/play/t6.png"],
['touzi0',"assets/play/1.png"],
['touzi1',"assets/play/2.png"],
['touzi2',"assets/play/3.png"],
['touzi3',"assets/play/4.png"],
['touzi4',"assets/play/5.png"],
['touzi5',"assets/play/6.png"],
['front',"assets/play/front.png"],
['back0',"assets/play/back0.png"],
['back1',"assets/play/back1.png"],
['back2',"assets/play/back2.png"],
]; ];
const resAudio = [ const resAudio = [
['click', "assets/play/music/click.mp3"], ['start', "assets/play/music/start.mp3"],
['card', "assets/play/music/card.mp3"],
['touzi', "assets/play/music/touzi.mp3"],
]; ];
......
src/assets/play/bg.jpg

25.8 KB | W: | H:

src/assets/play/bg.jpg

396 KB | W: | H:

src/assets/play/bg.jpg
src/assets/play/bg.jpg
src/assets/play/bg.jpg
src/assets/play/bg.jpg
  • 2-up
  • Swipe
  • Onion skin
This source diff could not be displayed because it is too large. You can view the blob instead.
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