Commit e9b41469 authored by 范雪寒's avatar 范雪寒

feat: 设置单词位置

parent 031ae811
import { Component, ElementRef, ViewChild, OnInit, Input, OnDestroy, HostListener } from '@angular/core';
import {
Label,
MySprite, tweenChange,
} from './Unit';
import { res, resAudio } from './resources';
import { Subject } from 'rxjs';
import { debounceTime } from 'rxjs/operators';
import TWEEN from '@tweenjs/tween.js';
import { MyGame } from "./game/MyGame";
export class PreviewCanvas implements OnInit, OnDestroy {
// 数据
data;
ctx;
wrap;
canvas;
canvasWidth = 1280; // canvas实际宽度
canvasHeight = 720; // canvas实际高度
canvasBaseW = 1280; // canvas 资源预设宽度
canvasBaseH = 720; // canvas 资源预设高度
mx; // 点击x坐标
my; // 点击y坐标
// 资源
rawImages = new Map(res);
rawAudios = new Map(resAudio);
images = new Map();
animationId: any;
winResizeEventStream = new Subject();
audioObj = {};
renderArr;
mapScale = 1;
canvasLeft;
canvasTop;
saveKey = 'ym-2-30';
game;
constructor(wrap, canvas, data) {
this.wrap = wrap;
this.canvas = canvas;
this.data = data;
}
ngOnInit() {
this.game = new MyGame(this);
this.game.initData({
images: this.images,
data: this.data,
});
// 初始化 各事件监听
this.initListener();
// 开始预加载资源
this.load();
}
setSaveFunc(save) {
this.game.setSaveFunc(save);
}
ngOnDestroy() {
window['curCtx'] = null;
window.cancelAnimationFrame(this.animationId);
}
load() {
// 预加载资源
this.loadResources().then(() => {
window["air"].hideAirClassLoading(this.saveKey, this.data);
this.init();
this.update();
});
}
init() {
this.initCtx();
this.initData();
this.initView();
}
initCtx() {
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;
this.ctx = this.canvas.nativeElement.getContext('2d');
this.canvas.nativeElement.width = this.canvasWidth;
this.canvas.nativeElement.height = this.canvasHeight;
window['curCtx'] = this.ctx;
}
updateItem(item) {
if (item) {
item.update();
}
}
updateArr(arr) {
if (!arr) {
return;
}
for (let i = 0; i < arr.length; i++) {
arr[i].update(this);
}
}
initListener() {
this.winResizeEventStream
.pipe(debounceTime(500))
.subscribe(data => {
this.renderAfterResize();
});
// ---------------------------------------------
const setParentOffset = () => {
const rect = this.canvas.nativeElement.getBoundingClientRect();
this.canvasLeft = rect.left;
this.canvasTop = rect.top;
console.log('rect = ' + JSON.stringify(rect));
};
const setMxMyByTouch = (event) => {
if (event.touches.length <= 0) {
return;
}
if (this.canvasLeft == null) {
setParentOffset();
}
this.mx = event.touches[0].pageX - this.canvasLeft;
this.my = event.touches[0].pageY - this.canvasTop;
};
const setMxMyByMouse = (event) => {
this.mx = event.offsetX;
this.my = event.offsetY;
};
// ---------------------------------------------
let firstTouch = true;
const touchDownFunc = (e) => {
if (firstTouch) {
firstTouch = false;
removeMouseListener();
}
setMxMyByTouch(e);
this.mapDown(e);
};
const touchMoveFunc = (e) => {
setMxMyByTouch(e);
this.mapMove(e);
};
const touchUpFunc = (e) => {
setMxMyByTouch(e);
this.mapUp(e);
};
const mouseDownFunc = (e) => {
if (firstTouch) {
firstTouch = false;
removeTouchListener();
}
setMxMyByMouse(e);
this.mapDown(e);
};
const mouseMoveFunc = (e) => {
setMxMyByMouse(e);
this.mapMove(e);
};
const mouseUpFunc = (e) => {
setMxMyByMouse(e);
this.mapUp(e);
};
const element = this.canvas.nativeElement;
const addTouchListener = () => {
element.addEventListener('touchstart', touchDownFunc);
element.addEventListener('touchmove', touchMoveFunc);
element.addEventListener('touchend', touchUpFunc);
element.addEventListener('touchcancel', touchUpFunc);
};
const removeTouchListener = () => {
element.removeEventListener('touchstart', touchDownFunc);
element.removeEventListener('touchmove', touchMoveFunc);
element.removeEventListener('touchend', touchUpFunc);
element.removeEventListener('touchcancel', touchUpFunc);
};
const addMouseListener = () => {
element.addEventListener('mousedown', mouseDownFunc);
element.addEventListener('mousemove', mouseMoveFunc);
element.addEventListener('mouseup', mouseUpFunc);
};
const removeMouseListener = () => {
element.removeEventListener('mousedown', mouseDownFunc);
element.removeEventListener('mousemove', mouseMoveFunc);
element.removeEventListener('mouseup', mouseUpFunc);
};
addMouseListener();
addTouchListener();
}
playAudio(key, now = false, callback = null) {
const audio = this.audioObj[key];
if (audio) {
if (now) {
audio.pause();
audio.currentTime = 0;
}
if (callback) {
audio.onended = () => {
callback();
};
}
audio.play();
}
}
loadResources() {
const pr = [];
this.rawImages.forEach((value, key) => {// 预加载图片
const p = this.preload(value)
.then(img => {
this.images.set(key, img);
})
.catch(err => console.log(err));
pr.push(p);
});
return Promise.all(pr);
}
refresh() {
this.canvasWidth = this.wrap.nativeElement.clientWidth;
this.canvasHeight = this.wrap.nativeElement.clientHeight;
this.init();
this.game.refresh();
}
preload(url) {
return new Promise((resolve, reject) => {
const img = new Image();
// img.crossOrigin = "anonymous";
img.onload = () => resolve(img);
img.onerror = reject;
img.src = url;
});
}
renderAfterResize() {
this.canvasWidth = this.wrap.nativeElement.clientWidth;
this.canvasHeight = this.wrap.nativeElement.clientHeight;
this.init();
}
checkPointInRect(x, y, rect) {
if (x >= rect.x && x <= rect.x + rect.width) {
if (y >= rect.y && y <= rect.y + rect.height) {
return true;
}
}
return false;
}
addUrlToImages(url) {
this.rawImages.set(url, url);
}
/**
* 初始化数据
*/
initData() {
const sx = this.canvasWidth / this.canvasBaseW;
const sy = this.canvasHeight / this.canvasBaseH;
const s = Math.min(sx, sy);
this.mapScale = s;
this.renderArr = [];
}
/**
* 初始化试图
*/
initView() {
this.game.initView();
}
mapDown(event) {
this.game._onTouchBegan({ x: this.mx, y: this.my });
}
mapMove(event) {
this.game._onTouchMove({ x: this.mx, y: this.my });
}
mapUp(event) {
this.game._onTouchEnd({ x: this.mx, y: this.my });
}
update() {
// ----------------------------------------------------------
this.animationId = window.requestAnimationFrame(this.update.bind(this));
// 清除画布内容
this.ctx.clearRect(0, 0, this.canvasWidth, this.canvasHeight);
// tween 更新动画
TWEEN.update();
// ----------------------------------------------------------
this.updateArr(this.renderArr);
}
}
This diff is collapsed.
...@@ -17,4 +17,40 @@ ...@@ -17,4 +17,40 @@
/*//border-radius: 20px;*/ /*//border-radius: 20px;*/
/*//border-width: 2px;*/ /*//border-width: 2px;*/
/*//border-color: #000000;*/ /*//border-color: #000000;*/
}
.border-lite {
border: 2px dashed #ddd;
border-radius: 0.5rem;
padding: 10px;
margin: 10px;
}
.p-image-children-editor {
width: 100%;
height: 95%;
border-radius: 0.5rem;
border: 2px solid #ddd;
.preview-box {
margin: auto;
width: 100%;
height: 100%;
border: 2px dashed #ddd;
border-radius: 0.5rem;
background-color: #fafafa;
text-align: center;
color: #aaa;
.preview-img {
height: 100%;
width: auto;
}
}
} }
\ No newline at end of file
...@@ -49,23 +49,43 @@ ...@@ -49,23 +49,43 @@
</div> </div>
</div> </div>
 <div style="clear:both; height:0; font-size:1px; line-height:0px;"></div>  <div style="clear:both; height:0; font-size:1px; line-height:0px;"></div>
<div style="float: left; width: 100%">
<app-custom-hot-zone
[bgItem]="{}"
[isHasRect]="false"
[isHasText]="false"
[item]="item"
[hotZoneItemArr]="item.targets"
[refreshCaller]="caller"
(save)="saveData($event)"
>
</app-custom-hot-zone>
<!-- <app-preview <div class="border">
<span style="height: 30px; font-size: 18px;">单词:</span>
></app-preview> --> <br>
<div *ngFor="let it of item.targets; let i = index" style="float: left; width: 350px;">
<div class="border-lite" style="width: 300px; float: left;">
<app-upload-image-with-preview
[picUrl]="it.targetImg"
(imageUploaded)="onTargetImgUploadSuccess($event, i)"
></app-upload-image-with-preview>
<span style="height: 30px; font-size: 18px;">发音:</span>
<app-audio-recorder
[audioUrl]="it.targetAudio"
(audioUploaded)="onTargetAudioUploadSuccess($event, i)"
></app-audio-recorder>
<div style="float: none; padding-top: 30px;">
<button style="width: 100%; height: 45px; float: none;" nz-button nzType="dashed" class="add-btn" (click)="deleteTarget(i)">
删除
</button>
</div>
</div>
</div>
<div style="width: 300px; float: left; height: 280px; padding: 20px;" nz-col nzSpan="8" class="add-btn-box" >
<button style=" margin: auto; width: 100%; height: 100%;" nz-button nzType="dashed" class="add-btn" (click)="addTarget()">
<i nz-icon nzType="plus-circle" nzTheme="outline"></i>
Add
</button>
</div>
 <div style="clear:both; height:0; font-size:1px; line-height:0px;"></div>
</div>
<div class="border" style="height: 80vh">
<span style="height: 30px; font-size: 18px;">单词位置:</span>
<br>
<div class="p-image-children-editor" #wrap>
<canvas class="preview-box" id="canvas" #canvas></canvas>
</div>
</div> </div>
<!-- <!--
<div style="position: absolute; left: 200px; top: 100px; width: 800px;"> <div style="position: absolute; left: 200px; top: 100px; width: 800px;">
......
import { Component, EventEmitter, Input, OnDestroy, OnChanges, OnInit, Output, ApplicationRef, ChangeDetectorRef } from '@angular/core'; import { Component, EventEmitter, ElementRef, Input, ViewChild, OnDestroy, OnChanges, OnInit, Output, ApplicationRef, ChangeDetectorRef } from '@angular/core';
import { PreviewCanvas } from "./PreviewCanvas";
@Component({ @Component({
selector: 'app-form', selector: 'app-form',
...@@ -11,11 +11,7 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy { ...@@ -11,11 +11,7 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
// 储存数据用 // 储存数据用
saveKey = 'ym-2-30'; saveKey = 'ym-2-30';
// 储存对象 item = null;
item;
caller: any = {};
constructor(private appRef: ApplicationRef, private changeDetectorRef: ChangeDetectorRef) { constructor(private appRef: ApplicationRef, private changeDetectorRef: ChangeDetectorRef) {
...@@ -24,7 +20,6 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy { ...@@ -24,7 +20,6 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
deleteCarrot(idx) { deleteCarrot(idx) {
this.item.carrots.splice(idx, 1); this.item.carrots.splice(idx, 1);
this.refreshBackground();
this.save(); this.save();
} }
...@@ -33,7 +28,6 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy { ...@@ -33,7 +28,6 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
carrotImg: '', carrotImg: '',
holeImg: '', holeImg: '',
}); });
this.refreshBackground();
this.save(); this.save();
} }
...@@ -79,21 +73,33 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy { ...@@ -79,21 +73,33 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
} }
addTarget() {
this.item.targets.push({
targetImg: '',
x: 0,
y: -300
});
}
deleteTarget(idx) {
this.item.targets.splice(idx, 1);
this.save();
}
ngOnChanges() { ngOnChanges() {
} }
ngOnDestroy() { ngOnDestroy() {
this.previewCanvas.ngOnDestroy();
} }
previewCanvas;
@ViewChild('wrap', { static: true }) wrap: ElementRef;
@ViewChild('canvas', { static: true }) canvas: ElementRef;
init() { init() {
this.previewCanvas = new PreviewCanvas(this.wrap, this.canvas, this.item);
} this.previewCanvas.ngOnInit();
this.previewCanvas.setSaveFunc(this.save.bind(this));
refreshBackground() {
this.caller.refreshBackground();
} }
...@@ -104,7 +110,11 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy { ...@@ -104,7 +110,11 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
onImageUploadSuccess(e, key, idx) { onImageUploadSuccess(e, key, idx) {
// this.item[key] = e.url; // this.item[key] = e.url;
this.item.carrots[idx][key + 'Img'] = e.url; this.item.carrots[idx][key + 'Img'] = e.url;
this.refreshBackground(); this.save();
}
onTargetImgUploadSuccess(e, idx) {
this.item.targets[idx].targetImg = e.url;
this.save(); this.save();
} }
...@@ -118,20 +128,15 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy { ...@@ -118,20 +128,15 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
this.save(); this.save();
} }
saveData(e) {
this.item.targets = [];
e.hotZoneItemArr.forEach((target) => {
console.log('target.rect = ' + JSON.stringify(target.rect));
this.item.targets.push(target);
});
this.save();
}
// 标题音频 // 标题音频
onTittleAudioUploadSuccess(e, key) { onTittleAudioUploadSuccess(e, key) {
this.item.tittle.audio = e.url; this.item.tittle.audio = e.url;
this.save(); this.save();
} }
onTargetAudioUploadSuccess(e, idx) {
this.item.targets[idx].targetAudio = e.url;
this.save();
}
/** /**
* 储存数据 * 储存数据
...@@ -139,6 +144,7 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy { ...@@ -139,6 +144,7 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
save() { save() {
(<any>window).courseware.setData(this.item, null, this.saveKey); (<any>window).courseware.setData(this.item, null, this.saveKey);
this.refresh(); this.refresh();
this.previewCanvas.refresh();
} }
/** /**
......
export let defaultData = {
tittle: {
word: "C",
text: "listen and select the right word you just heard.",
audio: "tittle"
},
carrots: [{
carrotImg: 'carrot',
holeImg: 'hole',
}, {
carrotImg: 'carrot',
holeImg: 'hole',
}, {
carrotImg: 'carrot',
holeImg: 'hole',
}, {
carrotImg: 'carrot',
holeImg: 'hole',
}, {
carrotImg: 'carrot',
holeImg: 'hole',
}, {
carrotImg: 'carrot',
holeImg: 'hole',
}, {
carrotImg: 'carrot',
holeImg: 'hole',
}, {
carrotImg: 'carrot',
holeImg: 'hole',
}],
targets: []
};
\ No newline at end of file
This diff is collapsed.
import {
Game,
TouchSprite,
RandomInt,
MyLabel,
blinkItem,
stopBlinkItem,
asyncDelayTime,
asyncTweenChange,
} from './Game';
import {
Label,
jelly,
showPopParticle,
tweenChange,
rotateItem,
scaleItem,
delayCall,
hideItem,
showItem,
moveItem,
shake,
ShapeRect,
} from './../Unit';
import TWEEN from '@tweenjs/tween.js';
import { defaultData } from './DefaultData';
export class MyGame extends Game {
images = null;
data = null;
status = null;
initData(data) {
this.images = data.images;
this.status = {};
if (!data.data || Object.is(data.data, {}) || !data.data.tittle) {
this.data = defaultData;
} else {
this.data = data.data;
let imgUrlList = [];
let audioUrlList = [];
this.data.carrots.forEach((carrot) => {
imgUrlList.push(carrot.carrotImg);
imgUrlList.push(carrot.holeImg);
});
this.data.targets.forEach((target) => {
imgUrlList.push(target.targetImg);
});
// audioUrlList.push(this.data.wholeAuido);
// audioUrlList.push(this.data.tittle.audio);
this.preLoadData(imgUrlList, audioUrlList);
}
}
preLoadData(imgUrlList, audioUrlList) {
for (var i = 0; i < imgUrlList.length; ++i) {
this._parent.addUrlToImages(imgUrlList[i]);
}
for (var i = 0; i < audioUrlList.length; ++i) {
this._parent.addUrlToAudioObj(audioUrlList[i]);
}
}
initView() {
// 初始化背景
this.initBg();
// 初始化标题
this.initTittle();
// 初始化中间部分
this.initMiddle();
// 游戏开始
this.gameStart();
}
bg = null;
initBg() {
this.removeChild(this.getChildByName('bg'));
let screenSize = this.getScreenSize();
let defaultSize = this.getDefaultScreenSize();
let bgSized1 = new TouchSprite();
bgSized1.init(this.images.get('Img_bg'));
bgSized1.anchorX = 0.5;
bgSized1.anchorY = 1;
bgSized1.setPosition(screenSize.width / 2, screenSize.height);
bgSized1.setScaleXY(this.getFullScaleXY());
this.addChild(bgSized1);
// 背景
let bg = new TouchSprite();
bg.init(this.images.get('Img_bg2'))
bg.setScaleXY(this._parent.mapScale);
bg.alpha = 0;
bg.anchorX = 0.5;
bg.anchorY = 1;
bg.setPosition(screenSize.width / 2, screenSize.height);
bg.setName('bg');
this.addChild(bg);
this.bg = bg;
let bgSized2 = new TouchSprite();
bgSized2.init(this.images.get('Img_bg_ground'));
bgSized2.anchorX = 0.5;
bgSized2.anchorY = 1;
bgSized2.scaleX = (screenSize.width / defaultSize.width) / this._parent.mapScale;
bgSized2.setPosition(0, 0);
this.bg.addChild(bgSized2);
const bgRect = new ShapeRect();
bgRect.setSize(57, 65);
bgRect.fillColor = '#f8c224';
const sx = screenSize.width / this._parent.canvasBaseW;
bgRect.setScaleXY(sx);
bgRect.x = 65 * sx;
bgRect.alpha = 0;
this._parent.renderArr.push(bgRect);
this.bgRect = bgRect;
}
bgRect = null;
getTittleBlockPositionX() {
return this.bgRect.x + 28.5 * this.bgRect.scaleX;
}
initTittle() {
// 标题字母背景
let tittleWordBg = new TouchSprite();
tittleWordBg.init(this.images.get('Img_tittleBg'));
tittleWordBg.setScaleXY(this._parent.mapScale);
tittleWordBg.setPosition(this.getTittleBlockPositionX(), 31 * this._parent.mapScale);
this.addChild(tittleWordBg);
// 标题字母
let tittleWord = new MyLabel();
tittleWord.fontSize = 48;
tittleWord.fontName = 'BerlinSansFBDemi-Bold';
tittleWord.fontColor = '#ab5b22';
tittleWord.text = this.data.tittle.word;
tittleWord.anchorX = 0.5;
tittleWord.anchorY = 0.5;
tittleWord.setPosition(0, 0);
tittleWordBg.addChild(tittleWord);
tittleWord.refreshSize();
// 标题文字
let questionLabel = new MyLabel();
questionLabel.fontSize = 36;
questionLabel.fontName = 'FuturaBT-Bold';
questionLabel.fontColor = '#000000';
questionLabel.text = this.data.tittle.text;
questionLabel.anchorX = 0;
questionLabel.anchorY = 0.5;
questionLabel.setPosition(50, 0);
questionLabel.addTouchBeganListener(() => {
this.onClickTittle();
});
tittleWordBg.addChild(questionLabel);
questionLabel.refreshSize();
}
initMiddle() {
// 创建洞
this.createHoles();
// 创建胡萝卜
this.createCarrots();
// 创建可选的单词
this.createWords();
}
createCarrots() {
let screenSize = this.getScreenSize();
let defaultSize = this.getDefaultScreenSize();
const length = this.data.carrots.length;
this.data.carrots.forEach((carrot, idx) => {
let carrotSp = new TouchSprite();
carrotSp.init(this.images.get(carrot.carrotImg));
carrotSp.setPositionX(this.bg.width / length * (idx - (length - 1) / 2));
carrotSp.setPositionY(-550);
this.bg.addChild(carrotSp);
});
}
createHoles() {
let screenSize = this.getScreenSize();
let defaultSize = this.getDefaultScreenSize();
const length = this.data.carrots.length;
this.data.carrots.forEach((carrot, idx) => {
let hole = new TouchSprite();
hole.init(this.images.get(carrot.holeImg));
hole.anchorX = 0.5;
hole.anchorY = 0;
hole.setPositionX(this.bg.width / length * (idx - (length - 1) / 2));
hole.setPositionY(-520);
this.bg.addChild(hole);
});
}
createWords() {
let screenSize = this.getScreenSize();
let defaultSize = this.getDefaultScreenSize();
const length = this.data.carrots.length;
this.data.targets.forEach((targetData, idx) => {
let targetSp = new TouchSprite();
targetSp.init(this.images.get(targetData.targetImg));
targetSp.setPositionX(targetData.x);
targetSp.setPositionY(targetData.y);
targetSp.addTouchBeganListener(({ x, y }) => {
this.onTargetSpTouchBengan({ x, y }, targetSp, idx);
});
targetSp.addTouchMoveListener(({ x, y }) => {
this.onTargetSpTouchMoved({ x, y }, targetSp, idx);
});
targetSp.addTouchEndListener(()=>{
this.onTargetSpTouchEnded();
});
this.bg.addChild(targetSp);
});
}
onTargetSpTouchBengan({ x, y }, targetSp, idx) {
targetSp.set('touchStartPos', { x, y });
targetSp.set('startPos', { x: targetSp.x, y: targetSp.y });
}
onTargetSpTouchMoved({ x, y }, targetSp, idx) {
if (this._editMode) {
let screenSize = this.getScreenSize();
let defaultSize = this.getDefaultScreenSize();
let spritePosX = targetSp.get('startPos').x + (x - targetSp.get('touchStartPos').x) / this._parent.mapScale;
let spritePosY = targetSp.get('startPos').y + (y - targetSp.get('touchStartPos').y) / this._parent.mapScale;
targetSp.setPositionX(spritePosX);
targetSp.setPositionY(spritePosY);
this.data.targets[idx].x = spritePosX;
this.data.targets[idx].y = spritePosY;
}
}
onTargetSpTouchEnded() {
if (this._editMode) {
this._save();
}
}
printCurrentStatus() {
console.log(JSON.stringify(this.status));
}
onClickTittle() {
this._parent.playAudio(this.data.tittle.audio);
}
gameStart() {
this.playIncomeAudio();
}
playIncomeAudio() {
this._parent.playAudio('audio_new_page');
}
}
const res = [
['Img_bg', "assets/play/Img_bg.png"],
['Img_bg2', "assets/play/Img_bg2.png"],
['Img_bg_ground', "assets/play/Img_bg_ground.png"],
['Img_tittleBg', "assets/play/Img_tittleBg.png"],
];
const resAudio = [
// ['click', "assets/play/music/click.mp3"],
];
export {res, resAudio};
...@@ -27,6 +27,22 @@ export class Game { ...@@ -27,6 +27,22 @@ export class Game {
} }
playAudio(key, now = false, callback = null) {
this._parent.playAudio(key, now, callback);
}
_editMode = false;
setEditMode(flg) {
this._editMode = flg;
}
isEditMode() {
return this._editMode;
}
_save;
setSaveFunc(save) {
this._save = save;
}
addChild(node, z = 1) { addChild(node, z = 1) {
this._parent.renderArr.push(node); this._parent.renderArr.push(node);
......
...@@ -54,7 +54,7 @@ export class MyGame extends Game { ...@@ -54,7 +54,7 @@ export class MyGame extends Game {
imgUrlList.push(carrot.holeImg); imgUrlList.push(carrot.holeImg);
}); });
this.data.targets.forEach((target) => { this.data.targets.forEach((target) => {
imgUrlList.push(target.pic_url); imgUrlList.push(target.targetImg);
}); });
// audioUrlList.push(this.data.wholeAuido); // audioUrlList.push(this.data.wholeAuido);
// audioUrlList.push(this.data.tittle.audio); // audioUrlList.push(this.data.tittle.audio);
...@@ -101,16 +101,6 @@ export class MyGame extends Game { ...@@ -101,16 +101,6 @@ export class MyGame extends Game {
bgSized1.setScaleXY(this.getFullScaleXY()); bgSized1.setScaleXY(this.getFullScaleXY());
this.addChild(bgSized1); this.addChild(bgSized1);
let bgSized2 = new TouchSprite();
bgSized2.init(this.images.get('Img_bg_ground'));
bgSized2.anchorX = 0.5;
bgSized2.anchorY = 1;
bgSized2.setPosition(screenSize.width / 2, screenSize.height);
bgSized2.scaleX = screenSize.width / defaultSize.width;
bgSized2.scaleY = screenSize.height / defaultSize.height;
this.addChild(bgSized2);
// 背景 // 背景
let bg = new TouchSprite(); let bg = new TouchSprite();
bg.init(this.images.get('Img_bg2')) bg.init(this.images.get('Img_bg2'))
...@@ -124,6 +114,15 @@ export class MyGame extends Game { ...@@ -124,6 +114,15 @@ export class MyGame extends Game {
this.bg = bg; this.bg = bg;
let bgSized2 = new TouchSprite();
bgSized2.init(this.images.get('Img_bg_ground'));
bgSized2.anchorX = 0.5;
bgSized2.anchorY = 1;
bgSized2.scaleX = (screenSize.width / defaultSize.width) / this._parent.mapScale;
bgSized2.setPosition(0, 0);
this.bg.addChild(bgSized2);
const bgRect = new ShapeRect(); const bgRect = new ShapeRect();
bgRect.setSize(57, 65); bgRect.setSize(57, 65);
bgRect.fillColor = '#f8c224'; bgRect.fillColor = '#f8c224';
...@@ -197,7 +196,7 @@ export class MyGame extends Game { ...@@ -197,7 +196,7 @@ export class MyGame extends Game {
let carrotSp = new TouchSprite(); let carrotSp = new TouchSprite();
carrotSp.init(this.images.get(carrot.carrotImg)); carrotSp.init(this.images.get(carrot.carrotImg));
carrotSp.setPositionX(this.bg.width / length * (idx - (length - 1) / 2)); carrotSp.setPositionX(this.bg.width / length * (idx - (length - 1) / 2));
carrotSp.setPositionY(-550 * (screenSize.height / defaultSize.height) / this._parent.mapScale); carrotSp.setPositionY(-550);
this.bg.addChild(carrotSp); this.bg.addChild(carrotSp);
}); });
} }
...@@ -212,7 +211,7 @@ export class MyGame extends Game { ...@@ -212,7 +211,7 @@ export class MyGame extends Game {
hole.anchorX = 0.5; hole.anchorX = 0.5;
hole.anchorY = 0; hole.anchorY = 0;
hole.setPositionX(this.bg.width / length * (idx - (length - 1) / 2)); hole.setPositionX(this.bg.width / length * (idx - (length - 1) / 2));
hole.setPositionY(-520 * (screenSize.height / defaultSize.height) / this._parent.mapScale); hole.setPositionY(-520);
this.bg.addChild(hole); this.bg.addChild(hole);
}); });
} }
...@@ -222,12 +221,14 @@ export class MyGame extends Game { ...@@ -222,12 +221,14 @@ export class MyGame extends Game {
let defaultSize = this.getDefaultScreenSize(); let defaultSize = this.getDefaultScreenSize();
const length = this.data.carrots.length; const length = this.data.carrots.length;
this.data.targets.forEach((targetData, idx) => { this.data.targets.forEach((targetData, idx) => {
console.log('targetData.rect = ' + JSON.stringify(targetData.rect));
let targetSp = new TouchSprite(); let targetSp = new TouchSprite();
targetSp.init(this.images.get(targetData.pic_url)); targetSp.init(this.images.get(targetData.targetImg));
targetSp.setPositionX(targetData.x); targetSp.setPositionX(targetData.x);
// 一通复杂的计算之后得到一个实际的Y坐标 targetSp.setPositionY(targetData.y);
targetSp.setPositionY((targetData.y - defaultSize.height / 2) * (screenSize.height / defaultSize.height) / this._parent.mapScale);
if (!this.isEditMode()) {
targetSp.alpha = 0.001;
}
targetSp.addTouchBeganListener(({ x, y }) => { targetSp.addTouchBeganListener(({ x, y }) => {
this.onTargetSpTouchBengan({ x, y }, targetSp, idx); this.onTargetSpTouchBengan({ x, y }, targetSp, idx);
...@@ -236,29 +237,45 @@ export class MyGame extends Game { ...@@ -236,29 +237,45 @@ export class MyGame extends Game {
this.onTargetSpTouchMoved({ x, y }, targetSp, idx); this.onTargetSpTouchMoved({ x, y }, targetSp, idx);
}); });
targetSp.addTouchEndListener(() => {
this.onTargetSpTouchEnded();
});
this.bg.addChild(targetSp); this.bg.addChild(targetSp);
}); });
} }
editMode = true;
onTargetSpTouchBengan({ x, y }, targetSp, idx) { onTargetSpTouchBengan({ x, y }, targetSp, idx) {
targetSp.set('touchStartPos', { x, y }); if (this.isEditMode()) {
targetSp.set('startPos', { x: targetSp.x, y: targetSp.y }); targetSp.set('touchStartPos', { x, y });
targetSp.set('startPos', { x: targetSp.x, y: targetSp.y });
} else {
tweenChange(targetSp, { alpha: 1 }, 0.2);
this.playAudio('click', true, () => {
this.playAudio(this.data.targets[idx].targetAudio);
});
}
} }
onTargetSpTouchMoved({ x, y }, targetSp, idx) { onTargetSpTouchMoved({ x, y }, targetSp, idx) {
if (this.editMode) { if (!this.isEditMode()) {
let screenSize = this.getScreenSize(); return;
let defaultSize = this.getDefaultScreenSize(); }
let screenSize = this.getScreenSize();
let spritePosX = targetSp.get('startPos').x + (x - targetSp.get('touchStartPos').x) / this._parent.mapScale; let defaultSize = this.getDefaultScreenSize();
let spritePosY = targetSp.get('startPos').y + (y - targetSp.get('touchStartPos').y) / this._parent.mapScale;
targetSp.setPositionX(spritePosX); let spritePosX = targetSp.get('startPos').x + (x - targetSp.get('touchStartPos').x) / this._parent.mapScale;
targetSp.setPositionY(spritePosY); let spritePosY = targetSp.get('startPos').y + (y - targetSp.get('touchStartPos').y) / this._parent.mapScale;
targetSp.setPositionX(spritePosX);
this.data.targets[idx].x = spritePosX; targetSp.setPositionY(spritePosY);
// 一通复杂的计算之后得到一个不随分辨率改变的虚拟Y坐标
this.data.targets[idx].y = spritePosY * this._parent.mapScale / (screenSize.height / defaultSize.height) + defaultSize.height / 2; this.data.targets[idx].x = spritePosX;
this.data.targets[idx].y = spritePosY;
}
onTargetSpTouchEnded() {
if (this.isEditMode()) {
this._save();
} }
} }
......
...@@ -3,8 +3,6 @@ const res = [ ...@@ -3,8 +3,6 @@ const res = [
['Img_bg2', "assets/play/Img_bg2.png"], ['Img_bg2', "assets/play/Img_bg2.png"],
['Img_bg_ground', "assets/play/Img_bg_ground.png"], ['Img_bg_ground', "assets/play/Img_bg_ground.png"],
['Img_tittleBg', "assets/play/Img_tittleBg.png"], ['Img_tittleBg', "assets/play/Img_tittleBg.png"],
['carrot', "assets/play/carrot.png"],
['hole', "assets/play/hole.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