Commit 6231e9ec authored by 李维's avatar 李维

dev commit

parent fd8e983a
......@@ -186,7 +186,6 @@ export class AudioRecorderComponent implements OnInit, OnChanges, OnDestroy {
return true;
}
beforeUpload = (file: File) => {
this.audioUrl = null;
if (!this.checkSelectFile(file)) {
return false;
......@@ -197,7 +196,11 @@ export class AudioRecorderComponent implements OnInit, OnChanges, OnDestroy {
uploadSuccess = (url) => {
this.nzMessageService.info('Upload Success');
this.isUploading = false;
this.audioUrl = url;
if(typeof url == "string"){
this.audioUrl = url
}else{
this.audioUrl = url.url
}
}
uploadFailure = (err, file) => {
this.isUploading = false;
......
......@@ -498,17 +498,17 @@ export class HotZoneImageItem extends MySprite {
arrow: MySprite;
label: Label;
image: MySprite;
imageSrc: String;
image_url: String;
labelBox: MySprite;
audio_url: String;
scale
text;
arrowTop;
arrowRight;
init(imageSrc = null, initWidth, initHeight, callback?){
this.showImage(imageSrc, initWidth, initHeight, (img)=>{
init(image_url = null, initWidth, initHeight, callback?){
this.showImage(image_url, initWidth, initHeight, (img)=>{
callback && callback(img.width, img.height)
this.setSize(img.width*this.image.scaleX, img.height*this.image.scaleY)
this.lineDashFlag = true;
......@@ -553,8 +553,8 @@ export class HotZoneImageItem extends MySprite {
this.label.visible = false;
}
showImage(imageSrc = null, initWidth, initHeight, callback) {
this.loadImage(imageSrc).then((img)=>{
showImage(image_url = null, initWidth, initHeight, callback) {
this.loadImage(image_url).then((img)=>{
if(this.image){
this.removeChild(this.image)
}
......@@ -563,18 +563,18 @@ export class HotZoneImageItem extends MySprite {
this.image.x = this.image.width/2
this.image.y = this.image.height/2
this.image.alpha = 0.7;
this.imageSrc = imageSrc;
this.image_url = image_url;
this.addChild(this.image,-1);
callback && callback(this.image)
})
}
loadImage(imageSrc = null){
loadImage(image_url = null){
return new Promise((resolve, reject) => {
const img = new Image();
img.onload = () => resolve(img);
img.onerror = reject;
img.src = imageSrc;
img.src = image_url;
})
}
......
......@@ -39,15 +39,15 @@
<div class="img-box-upload">
<app-upload-image-with-preview
[picUrl]="it.imageSrc"
(imageUploaded)="onImgUploadSuccessByImg($event, it, i)">
[picUrl]="it.image_url"
(imageUploaded)="onImgUploadSuccessByImg($event, it)">
</app-upload-image-with-preview>
</div>
<app-audio-recorder>
<!-- [audioUrl]="it.audio_url ? it.audio_url : null "
(audioUploaded)="onAudioUploadSuccessByImg($event, it)" -->
<app-audio-recorder
[audioUrl]="it.audio_url? it.audio_url : null "
(audioUploaded)="onAudioUploadSuccess($event, it)">
</app-audio-recorder>
......
......@@ -150,11 +150,15 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
console.log('hotZoneArr:', this.hotZoneArr);
}
onImgUploadSuccessByImg(e, img, index) {
console.log(img)
img.init(e.url)
img.pic_url = e.url;
this.refreshImage (img);
onImgUploadSuccessByImg(e, item) {
item.init(e.url)
item.pic_url = e.url;
this.refreshImage (item);
}
onAudioUploadSuccess(e, item) {
console.log(e)
item.audio_url = e.url;
}
refreshImage(img) {
......@@ -188,19 +192,21 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
const itemH = 200;
const item = new HotZoneImageItem(this.ctx);
if(saveData){
item.init(saveData.rect.src, saveData.rect.width , saveData.rect.height, (w, h)=>{
item.init(saveData.media.image_url, saveData.rect.width , saveData.rect.height, (w, h)=>{
const saveRect = saveData.rect;
item.scaleX = saveData.rect.width / w;
item.scaleY = saveData.rect.height / h;
item.x = saveRect.x // + saveRect.width / 2 ;
item.y = saveRect.y // + saveRect.height / 2;
if(saveData.rect.src.indexOf("bg_200_200") == -1){
item.imageSrc = saveData.rect.src
if(saveData.media.image_url.indexOf("bg_200_200") == -1){
item.image_url = saveData.media.image_url
}
});
item.audio_url = saveData.media.audio_url
console.log(item)
}else{
item.init("assets/default/bg_200_200.png" , 200 , 200, ()=>{
item.imageSrc = "assets/default/bg_200_200.png"
item.image_url = "assets/default/bg_200_200.png"
});
}
item.anchorX = 0.5;
......@@ -660,11 +666,13 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
index: hotZoneArr[i].index,
};
hotZoneItem['rect'] = hotZoneArr[i].getBoundingBox();
hotZoneItem['media'] = {}
hotZoneItem['rect'].x = Math.round( (hotZoneItem['rect'].x - bgItem['rect'].x) * 100) / 100;
hotZoneItem['rect'].y = Math.round( (hotZoneItem['rect'].y - bgItem['rect'].y) * 100) / 100;
hotZoneItem['rect'].width = Math.round( (hotZoneItem['rect'].width) * 100) / 100;
hotZoneItem['rect'].height = Math.round( (hotZoneItem['rect'].height) * 100) / 100;
hotZoneItem['rect'].src = hotZoneArr[i].imageSrc
hotZoneItem['media'].image_url = hotZoneArr[i].image_url
hotZoneItem['media'].audio_url = hotZoneArr[i].audio_url?hotZoneArr[i].audio_url:""
hotZoneItemArr.push(hotZoneItem);
}
this.save.emit({bgItem, hotZoneItemArr});
......
......@@ -110,9 +110,9 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
addChoice(questionIndex) {
let item = this.cardChoiceData();
this.dataArray[questionIndex].choice.incorrect.push(item);
this.saveItem();
// let item = this.cardChoiceData();
// this.dataArray[questionIndex].choice.incorrect.push(item);
// this.saveItem();
}
onImageUploadSuccessByItem(e, item) {
......
......@@ -13,6 +13,7 @@ import {
} from "./Unit";
import { CartoonAnimation } from './CartoonAnimation'
import { ConsoleReporter } from 'jasmine';
export class Cartoon {
......
......@@ -29,12 +29,16 @@ import { localImages, localAudios } from "./resources";
import { Cartoon } from './Cartoon'
import { Subject } from "rxjs";
import { debounceTime } from "rxjs/operators";
import { debounceTime, map } from "rxjs/operators";
import * as _ from "lodash";
import TWEEN from "@tweenjs/tween.js";
const defauleFormData = {}
const position = {
"4": [{x:640,y:140},{x:920,y:140},{x:640,y:387},{x:920,y:387}],
"6": [{x:604,y:184},{x:791,y:184},{x:983,y:184},{x:604,y:364},{x:791,y:364},{x:983,y:364}],
"9": [{x:616,y:144},{x:808,y:144},{x:987,y:144},{x:616,y:298},{x:808,y:298},{x:987,y:298},{x:616,y:447},{x:808,y:447},{x:987,y:447}]
}
@Component({
selector: "app-play",
templateUrl: "./play.component.html",
......@@ -82,6 +86,10 @@ export class PlayComponent implements OnInit, OnDestroy {
// ------------------------------------
// ------------ 游戏逻辑数据 ------------
m_puzzleCards_id = []
m_currentQuestionIndex = 0;
m_currentMovedCardIndex = -1;
m_totalQusetion = 0;
// ------------------------------------
......@@ -98,7 +106,6 @@ export class PlayComponent implements OnInit, OnDestroy {
// 当数据加载完毕后,执行
systemReady(){
console.log(this.g_formData)
this.initGame()
}
......@@ -107,7 +114,36 @@ export class PlayComponent implements OnInit, OnDestroy {
}
// 映射预加载图片[网路]资源 返回包含图片路径的数组
mapToImageArray(contentObj){
let array = []
array.push(this.g_data.contentObj.bgItem.url)
let hotZoneItemArr = contentObj.hotZoneItemArr;
if(hotZoneItemArr){
hotZoneItemArr.forEach(item => {
array.push(item.media.image_url)
});
}
return array
}
// 映射预加载音频[网路]资源 返回包含音频路径的数组
mapToAduioArray(contentObj){
let array = []
let hotZoneItemArr = contentObj.hotZoneItemArr;
if(hotZoneItemArr){
hotZoneItemArr.forEach(item => {
if(item.media.audio_url){
array.push(item.media.audio_url)
}
});
}
return array
}
restartGame() {
this.cleanGameVar()
this.initGame()
}
......@@ -126,14 +162,38 @@ export class PlayComponent implements OnInit, OnDestroy {
this.initAnswerSheet()
this.showAnswer()
this.initPuzzles()
setTimeout(()=>{
this.startGame()
}, 1000)
}
startGame(){
this.g_cartoon.getCartoonElement("AnswerSheet").moveLeft(()=>{
this.showPuzzleCards();
})
}
nextQusetion(){
this.m_currentQuestionIndex++;
if(this.m_currentQuestionIndex==this.m_totalQusetion){
this.finisedAll()
}
}
finisedAll(){
this.g_cartoon.getCartoonElement("AnswerSheet").moveMiddle()
}
initAnswerSheet(){
let element = this.g_cartoon.createCartoonElement("AnswerSheet", "MySprite")
element.ref.init(this.g_cartoon.images.get("answer-sheet"))
element.ref.x = this.g_canvasWidth / 2
element.ref.y = this.g_canvasHeight / 2
let element = this.g_cartoon.createCartoonElement("AnswerSheet", "MySprite");
element.ref.init(this.g_cartoon.images.get("answer-sheet"));
let leftX = this.g_cartoon.getOrigin().x + 155*this.g_mapScale + (element.ref.width*this.g_mapScale)/2;
let rightX = this.g_cartoon.getOrigin().y + 75*this.g_mapScale + (element.ref.height*this.g_mapScale)/2;
let middleX = this.g_canvasWidth / 2;
let middleY = this.g_canvasHeight / 2;
element.ref.x = middleX;
element.ref.y = middleY;
element.ref.setScaleXY(this.g_mapScale)
let element_t = this.g_cartoon.createCartoonElement("quertion-image-container", "MySprite")
......@@ -141,14 +201,19 @@ export class PlayComponent implements OnInit, OnDestroy {
element_t.contentScale = Math.min((200 / element_t.ref.width), (300 / element_t.ref.height))
element_t.originX = -(element_t.ref.width)/2
element_t.originY = -(element_t.ref.height)/2
element_t.ref.x = 0 //this.g_canvasWidth / 2
element_t.ref.y = 0 //this.g_canvasHeight / 2
element_t.ref.x = 0
element_t.ref.y = 0
element_t.ref.setScaleXY( element_t.contentScale )
// this.subscribeMapDownEvent("quertion-image-container", ()=>{
// this.checkHotArray(this.g_clickX, this.g_clickY)
// this.g_enableMapDown = true;
// })
element.moveLeft = (callback)=>{
tweenChange(element.ref, {x:leftX , y:rightX}, 0.5, ()=>{
callback && callback()
})
}
element.moveMiddle = ()=>{
tweenChange(element.ref, {x:middleX , y:middleY}, 0.5)
}
element.ref.addChild(element_t.ref)
this.render(element.ref)
......@@ -159,15 +224,14 @@ export class PlayComponent implements OnInit, OnDestroy {
let hotZoneItemArr = this.g_formData.hotZoneItemArr
let parent = this.g_cartoon.getCartoonElement("quertion-image-container")
hotZoneItemArr.forEach( (item,index) => {
console.log(item)
let element = this.g_cartoon.createCartoonElement("quertion-image-puzzle-"+index, "MySprite")
element.ref.init(this.g_cartoon.images.get(item.rect.src))
element.ref.init(this.g_cartoon.images.get(item.media.image_url))
element.ref.scaleX = item.rect.width / (element.ref.width*parent.contentScale)
element.ref.scaleY = item.rect.height / (element.ref.height*parent.contentScale)
element.ref.x = parent.originX + item.rect.x/parent.contentScale + (element.ref.width*element.ref.scaleX)/2
element.ref.y = parent.originY + item.rect.y/parent.contentScale + (element.ref.height*element.ref.scaleY/2)
this.g_cartoon.getCartoonElement("quertion-image-container").ref.addChild(element.ref)
element.cardIndex = index;
element.ref.alpha = 0;
element.show = ()=>{
......@@ -175,86 +239,180 @@ export class PlayComponent implements OnInit, OnDestroy {
}
this.subscribeMapUpEvent("quertion-image-puzzle-"+index, ()=>{
if(this.m_currentMovedCardIndex == -1){
return;
}
if(this.checkSelectedZone(index)){
let rect = element.ref.getBoundingBox()
element.show()
this.g_cartoon.getCartoonElement("puzzle-card-"+0).enableMove = false;
this.g_cartoon.getCartoonElement("puzzle-card-"+0).moveTo(rect.x + rect.width/2, rect.y + rect.height/2)
this.g_cartoon.getCartoonElement("puzzle-card-"+0).hide()
this.g_cartoon.getCartoonElement(`puzzle-card-${index}-container`).enableMove = false;
this.g_cartoon.getCartoonElement(`puzzle-card-${index}-container`).isPlaced = true;
this.g_cartoon.getCartoonElement(`puzzle-card-${index}-container`).moveTo(rect.x + rect.width/2, rect.y + rect.height/2)
this.g_cartoon.getCartoonElement(`puzzle-card-${index}-container`).hide()
this.g_enableMapUp = true;
}else{
this.g_cartoon.getCartoonElement(`puzzle-card-${this.m_currentMovedCardIndex}-container`).back()
}
})
});
}
initPuzzles(){
let hotZoneItemArr = this.g_formData.hotZoneItemArr
let parent = this.g_cartoon.getCartoonElement("quertion-image-container")
// hotZoneItemArr.forEach( (item,index) => {
// console.log(item)
// let element = this.g_cartoon.createCartoonElement("quertion-image-puzzle-"+index, "MySprite")
// element.ref.init(this.g_cartoon.images.get(item.rect.src))
// element.ref.scaleX = item.rect.width / (element.ref.width*parent.contentScale)
// element.ref.scaleY = item.rect.height / (element.ref.height*parent.contentScale)
// element.ref.x = parent.originX + item.rect.x/parent.contentScale + (element.ref.width*element.ref.scaleX)/2
// element.ref.y = parent.originY + item.rect.y/parent.contentScale + (element.ref.height*element.ref.scaleY/2)
// this.g_cartoon.getCartoonElement("quertion-image-container").ref.addChild(element.ref)
// element.ref.alpha = 0;
// element.show = ()=>{
// tweenChange(element.ref, { alpha:1 } , 0.1)
// }
// this.subscribeMapUpEvent("quertion-image-puzzle-"+index, ()=>{
// console.log("Up")
// element.show()
// this.g_enableMapUp = true;
// })
// });
let element = this.g_cartoon.createCartoonElement("puzzle-card-"+0, "MySprite")
element.ref.init(this.g_cartoon.images.get(hotZoneItemArr[0].rect.src))
element.ref.scaleX = 100 / element.ref.width
element.ref.scaleY = 100 / element.ref.height
element.ref.x = this.g_cartoon.getOrigin().x + 200
element.ref.y = this.g_cartoon.getOrigin().y + 200
element.enableMove = false;
element.ref.alpha = 1;
let maxNum = "9"
let size = "small"
if(hotZoneItemArr.length<=4){
maxNum = "4"
size = "large"
}else if(hotZoneItemArr.length<=6){
maxNum = "6"
size = "middle"
}else if(hotZoneItemArr.length<=9){
maxNum = "9"
size = "small"
}
this.m_totalQusetion = hotZoneItemArr.length;
hotZoneItemArr.forEach( (item,index) => {
this.render(this.createPuzzleCard(index, position[maxNum][index].x, position[maxNum][index].y, size, item).ref)
this.addToCardList(`puzzle-card-${index}-container`)
});
}
element.show = ()=>{
createPuzzleCard(index:number, x:number, y:number, size:string, content={media:{image_url:""}}){
let containerSize_Width = 0;
let containerSize_Height = 0;
let cardSize_Width = 0;
let cardSize_Height = 0;
switch(size){
case "large":
containerSize_Width = 193;
containerSize_Height = 193;
cardSize_Width = 140;
cardSize_Height = 140;
break;
case "middle":
containerSize_Width = 148;
containerSize_Height = 148;
cardSize_Width = 125;
cardSize_Height = 125;
break;
case "small":
containerSize_Width = 133;
containerSize_Height = 133;
cardSize_Width = 120;
cardSize_Height = 120;
break;
default:
containerSize_Width = 193;
containerSize_Height = 193;
cardSize_Width = 110;
cardSize_Height = 110;
break;
}
let container = this.g_cartoon.createCartoonElement(`puzzle-card-${index}-container`, "MySprite")
container.ref.init(this.g_cartoon.images.get("baiquan"))
let container_sx = (containerSize_Width / container.ref.width)*this.g_mapScale
let container_sy = (containerSize_Height / container.ref.height)*this.g_mapScale
container.ref.scaleX = 0
container.ref.scaleY = 0
let container_x = this.g_cartoon.getOrigin().x + x*this.g_mapScale + (containerSize_Width*this.g_mapScale)/2
let container_y = this.g_cartoon.getOrigin().y + y*this.g_mapScale + (containerSize_Height*this.g_mapScale)/2
container.ref.x = container_x
container.ref.y = container_y
container.cardIndex = index;
container.isPlaced = false;
let element = this.g_cartoon.createCartoonElement(`puzzle-card-${index}`, "MySprite")
element.ref.init(this.g_cartoon.images.get(content.media.image_url))
let element_sx = cardSize_Width / element.ref.width
let element_sy = cardSize_Height / element.ref.height
element.ref.setScaleXY(Math.min(element_sx,element_sy))
element.ref.x = 0;
element.ref.y = 0;
container.ref.addChild(element.ref);
container.enableMove = false;
container.ref.alpha = 1;
container.show = (delay:number)=>{
setTimeout(() => {
tweenChange(container.ref, { alpha:1 } , 0.1)
tweenChange(element.ref, { alpha:1 } , 0.1)
tweenChange(container.ref, { scaleX:container_sx, scaleY:container_sy } , 0.1)
}, delay);
}
element.hide = ()=>{
tweenChange(element.ref, { alpha:0 } , 0.1)
container.back = ()=>{
tweenChange(container.ref, { x:container_x, y:container_y } , 0.1)
}
element.moveTo = (x, y)=>{
tweenChange(element.ref, { x:x, y:y } , 0.1)
container.hide = ()=>{
tweenChange(container.ref, { alpha:0 } , 0.1)
tweenChange(element.ref, { alpha:0 } , 0.1)
}
container.moveTo = (x, y)=>{
tweenChange(container.ref, { x:x, y:y } , 0.1)
}
this.subscribeMapDownEvent("puzzle-card-"+0, ()=>{
element.enableMove= true;
this.subscribeMapDownEvent(`puzzle-card-${index}-container`, ()=>{
this.m_currentMovedCardIndex = container.cardIndex
container.enableMove= true;
this.g_enableMapDown = true;
})
this.subscribeMapMoveEvent("puzzle-card-"+0, ()=>{
if(element.enableMove){
element.ref.x = this.g_clickX
element.ref.y = this.g_clickY
this.subscribeMapMoveEvent(`puzzle-card-${index}-container`, ()=>{
if(container.enableMove){
container.ref.x = this.g_clickX
container.ref.y = this.g_clickY
}
this.g_enableMapMove = true;
})
this.subscribeMapUpEvent("puzzle-card-"+0, ()=>{
element.enableMove= false;
this.subscribeMapUpEvent(`puzzle-card-${index}-container`, ()=>{
this.m_currentMovedCardIndex = -1;
container.enableMove= false;
this.g_enableMapUp = true;
if(!container.isPlaced){
container.back();
}
})
this.render(element.ref)
return container;
}
checkSelectedZone(zoneIndex){
// console.log("currentQuestionIndex:" + this.m_currentQuestionIndex + " zoneIndex:" + zoneIndex + " currentMovedCardIndex: " + this.m_currentMovedCardIndex)
if(this.m_currentQuestionIndex == zoneIndex){
if(zoneIndex == this.m_currentMovedCardIndex){
this.nextQusetion()
return true;
}
}
return false;
}
showPuzzleCards(){
this.m_puzzleCards_id.forEach( (id,index) => {
this.g_cartoon.getCartoonElement(id).show(index*100)
});
}
addToCardList(id){
this.m_puzzleCards_id.push(id)
}
cleanCardList(){
this.m_puzzleCards_id.length = 0;
}
cleanGameVar(){
this.m_puzzleCards_id.forEach(card => {
this.g_cartoon.getCartoonElement(card).isPlaced = false;
});
this.cleanCardList()
this.m_totalQusetion = 0;
this.m_currentQuestionIndex = 0;
}
......@@ -363,20 +521,17 @@ export class PlayComponent implements OnInit, OnDestroy {
}
const arr = contentObj.dataArray;
// 添加用户上传音效
// if (arr) {
// for (let i = 0; i < arr.length; i++) {
// if(arr[i].question.audio_url){
// this.g_cartoon.addAudio(arr[i].question.audio_url, arr[i].question.audio_url);
// }
// }
// }
let images:Array<string> = this.mapToAduioArray(contentObj)
images.forEach(image => {
this.g_cartoon.addAudio( image, image );
});
// 添加本地音效
for( var key in localAudios ){
this.g_cartoon.addAudio( key, localAudios[key] );
}
}
// ----------------------------------
// 初始化图片
// ----------------------------------
......@@ -388,14 +543,11 @@ export class PlayComponent implements OnInit, OnDestroy {
this.g_cartoon.addImage(url, url);
}
};
addPicUrl(this.g_data.contentObj.bgItem.url)
const hotZoneItemArr = this.g_data.contentObj.hotZoneItemArr;
if(hotZoneItemArr){
hotZoneItemArr.forEach(item => {
addPicUrl(item.rect.src)
let images:Array<string> = this.mapToImageArray(contentObj)
images.forEach(image => {
addPicUrl(image)
});
}
}
// 添加本地图片
for( var key in localImages ){
this.g_cartoon.addImage( key, localImages[key] );
......
......@@ -5,7 +5,8 @@ const localImages = {
'bg_500_600': "assets/play/bg_500_600.png",
'bg_1280_222': "assets/play/bg_1280_222.png",
'answer-sheet': "assets/play/AnswerSheet.png"
'answer-sheet': "assets/play/AnswerSheet.png",
'baiquan': "assets/play/baiquan.png"
};
......
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