Commit 56648c24 authored by Chen Jiping's avatar Chen Jiping

完善

parent 4244b24f
...@@ -52,10 +52,14 @@ export class Player { ...@@ -52,10 +52,14 @@ export class Player {
playerPic.x = playerPic.getBoundingBox().width / 2; playerPic.x = playerPic.getBoundingBox().width / 2;
playerPic.y = playerPic.getBoundingBox().height / 2; playerPic.y = playerPic.getBoundingBox().height / 2;
this.playerPic = playerPic; this.playerPic = playerPic;
let width = playerPic.getBoundingBox().width; let width = playerPic.getBoundingBox().width;
let height = playerPic.getBoundingBox().height; let height = playerPic.getBoundingBox().height;
let rect = {x:0, y:0, width: width, height:height};
playerPic.setShowRect(rect);
const bg = new ShapeRect(); const bg = new ShapeRect();
bg.setSize(width, height); bg.setSize(width, height);
bg.alpha = 0; bg.alpha = 0;
...@@ -155,7 +159,7 @@ export class Player { ...@@ -155,7 +159,7 @@ export class Player {
} }
let startY = Math.floor(length / 4) * 15 * this.scaleY; let startY = Math.floor(length / 4) * 20 * this.scaleY;
let c = Math.random() * this.car.height; let c = Math.random() * this.car.height;
......
...@@ -23,7 +23,10 @@ export class Stage { ...@@ -23,7 +23,10 @@ export class Stage {
leftDoor; leftDoor;
leftDoorInitX;
rightDoor; rightDoor;
rightDorrInitX;
constructor(images){ constructor(images){
this.images = images; this.images = images;
...@@ -111,22 +114,21 @@ export class Stage { ...@@ -111,22 +114,21 @@ export class Stage {
leftDoor.init(this.images.get('doorleft'), 0); leftDoor.init(this.images.get('doorleft'), 0);
leftDoor.scaleX = this.scaleX; leftDoor.scaleX = this.scaleX;
leftDoor.scaleY = this.scaleY; leftDoor.scaleY = this.scaleY;
leftDoor.x = 75 * this.scaleX; leftDoor.x = 75 * this.scaleX - leftDoor.getBoundingBox().width;
leftDoor.y = 51 * this.scaleY + leftDoor.getBoundingBox().height / 2; leftDoor.y = 51 * this.scaleY + leftDoor.getBoundingBox().height / 2;
this.bg.addChild(leftDoor); this.bg.addChild(leftDoor);
this.leftDoor = leftDoor; this.leftDoor = leftDoor;
this.leftDoorInitX = leftDoor.x;
const rightDoor = new MySprite(); const rightDoor = new MySprite();
rightDoor.init(this.images.get('doorright'), 1); rightDoor.init(this.images.get('doorright'), 1);
rightDoor.scaleX = this.scaleX; rightDoor.scaleX = this.scaleX;
rightDoor.scaleY = this.scaleY; rightDoor.scaleY = this.scaleY;
rightDoor.x = leftDoor.x + leftDoor.getBoundingBox().width * 2; rightDoor.x = leftDoor.x + leftDoor.getBoundingBox().width * 4;
rightDoor.y = leftDoor.y; rightDoor.y = leftDoor.y;
this.bg.addChild(rightDoor); this.bg.addChild(rightDoor);
this.rightDoor = rightDoor; this.rightDoor = rightDoor;
this.rightDorrInitX = rightDoor.x;
leftDoor.scaleX = 0;
rightDoor.scaleX = 0;
} }
setPromptText(text){ setPromptText(text){
...@@ -135,14 +137,15 @@ export class Stage { ...@@ -135,14 +137,15 @@ export class Stage {
closeDoor(callback = null){ closeDoor(callback = null){
tweenChange(this.leftDoor, {scaleX : this.scaleX}, 2, callback); tweenChange(this.leftDoor, {x : 75 * this.scaleX}, 2, callback);
tweenChange(this.rightDoor, {scaleX : this.scaleX}, 2); let toX = this.rightDorrInitX - this.rightDoor.getBoundingBox().width;
tweenChange(this.rightDoor, {x : toX}, 2);
} }
openDoor(callback = null){ openDoor(callback = null){
tweenChange(this.leftDoor, {scaleX : 0}, 2, callback); tweenChange(this.leftDoor, {x : this.leftDoorInitX}, 2, callback);
tweenChange(this.rightDoor, {scaleX : 0}, 2); tweenChange(this.rightDoor, {x : this.rightDorrInitX}, 2);
} }
} }
\ No newline at end of file
...@@ -69,6 +69,13 @@ export class MySprite extends Sprite { ...@@ -69,6 +69,13 @@ export class MySprite extends Sprite {
img; img;
_z = 0; _z = 0;
_showRect;
_bitmapFlag = false;
_offCanvas;
_offCtx;
init(imgObj = null, anchorX: number = 0.5, anchorY: number = 0.5) { init(imgObj = null, anchorX: number = 0.5, anchorY: number = 0.5) {
...@@ -87,6 +94,10 @@ export class MySprite extends Sprite { ...@@ -87,6 +94,10 @@ export class MySprite extends Sprite {
} }
setShowRect(rect) {
this._showRect = rect;
}
setShadow(offX, offY, blur, color = 'rgba(0, 0, 0, 0.3)') { setShadow(offX, offY, blur, color = 'rgba(0, 0, 0, 0.3)') {
...@@ -103,6 +114,8 @@ export class MySprite extends Sprite { ...@@ -103,6 +114,8 @@ export class MySprite extends Sprite {
} }
update($event = null) { update($event = null) {
if (!this.visible && this.childDepandVisible) { if (!this.visible && this.childDepandVisible) {
return; return;
...@@ -139,21 +152,21 @@ export class MySprite extends Sprite { ...@@ -139,21 +152,21 @@ export class MySprite extends Sprite {
//
if (this._radius) { // if (this._radius) {
//
const r = this._radius; // const r = this._radius;
const w = this.width; // const w = this.width;
const h = this.height; // const h = this.height;
//
this.ctx.lineTo(-w / 2, h / 2); // 创建水平线 // this.ctx.lineTo(-w / 2, h / 2); // 创建水平线
this.ctx.arcTo(-w / 2, -h / 2, -w / 2 + r, -h / 2, r); // this.ctx.arcTo(-w / 2, -h / 2, -w / 2 + r, -h / 2, r);
this.ctx.arcTo(w / 2, -h / 2, w / 2, -h / 2 + r, r); // this.ctx.arcTo(w / 2, -h / 2, w / 2, -h / 2 + r, r);
this.ctx.arcTo(w / 2, h / 2, w / 2 - r, h / 2, r); // this.ctx.arcTo(w / 2, h / 2, w / 2 - r, h / 2, r);
this.ctx.arcTo(-w / 2, h / 2, -w / 2, h / 2 - r, r); // this.ctx.arcTo(-w / 2, h / 2, -w / 2, h / 2 - r, r);
//
this.ctx.clip(); // this.ctx.clip();
} // }
} }
...@@ -176,7 +189,13 @@ export class MySprite extends Sprite { ...@@ -176,7 +189,13 @@ export class MySprite extends Sprite {
if (this.img) { if (this.img) {
this.ctx.drawImage(this.img, this._offX, this._offY);
if (this._showRect) {
const rect = this._showRect;
this.ctx.drawImage(this.img, rect.x, rect.y, rect.width, rect.height, this._offX, this._offY + rect.y, this.width, rect.height);
} else {
this.ctx.drawImage(this.img, this._offX, this._offY);
}
} }
...@@ -257,6 +276,13 @@ export class MySprite extends Sprite { ...@@ -257,6 +276,13 @@ export class MySprite extends Sprite {
} }
} }
set btimapFlag(v) {
this._bitmapFlag = v;
}
get btimapFlag() {
return this._bitmapFlag;
}
set alpha(v) { set alpha(v) {
this._alpha = v; this._alpha = v;
if (this.childDepandAlpha) { if (this.childDepandAlpha) {
...@@ -354,6 +380,87 @@ export class MySprite extends Sprite { ...@@ -354,6 +380,87 @@ export class MySprite extends Sprite {
} }
export class RoundSprite extends MySprite {
_newCtx;
init(imgObj = null, anchorX: number = 0.5, anchorY: number = 0.5) {
if (imgObj) {
this.img = imgObj;
this.width = this.img.width;
this.height = this.img.height;
}
this.anchorX = anchorX;
this.anchorY = anchorY;
const canvas = window['curCanvas'];
const w = canvas.nativeElement.width;
const h = canvas.nativeElement.height;
this._offCanvas = document.createElement('canvas');
this._offCanvas.width = w;
this._offCanvas.height = h;
this._offCtx = this._offCanvas.getContext('2d');
// this._newCtx = this.ctx;
// this.ctx = this._offCtx;
}
drawSelf() {
//
// if (this._shadowFlag) {
//
// this.ctx.shadowOffsetX = this._shadowOffsetX;
// this.ctx.shadowOffsetY = this._shadowOffsetY;
// this.ctx.shadowBlur = this._shadowBlur;
// this.ctx.shadowColor = this._shadowColor;
// } else {
// this.ctx.shadowOffsetX = 0;
// this.ctx.shadowOffsetY = 0;
// this.ctx.shadowBlur = null;
// this.ctx.shadowColor = null;
// }
if (this._radius) {
const r = this._radius;
const w = this.width;
const h = this.height;
const x = -this._offX;
const y = -this._offY;
this._offCtx.lineTo(x - w / 2, y + h / 2); // 创建水平线
this._offCtx.arcTo(x - w / 2, y - h / 2, x - w / 2 + r, y - h / 2, r);
this._offCtx.arcTo(x + w / 2, y - h / 2, x + w / 2, y - h / 2 + r, r);
this._offCtx.arcTo(x + w / 2, y + h / 2, x + w / 2 - r, y + h / 2, r);
this._offCtx.arcTo(x - w / 2, y + h / 2, x - w / 2, y + h / 2 - r, r);
this._offCtx.clip();
}
if (this.img) {
this._offCtx.drawImage(this.img, 0, 0);
this.ctx.drawImage(this._offCanvas,this._offX, this._offX);
}
}
}
...@@ -530,7 +637,7 @@ export class Label extends MySprite { ...@@ -530,7 +637,7 @@ export class Label extends MySprite {
this.ctx.save(); this.ctx.save();
this.ctx.font = `${this.fontSize}px ${this.fontName}`; this.ctx.font = `${this.fontSize * this.scaleX}px ${this.fontName}`;
this.ctx.textAlign = this.textAlign; this.ctx.textAlign = this.textAlign;
this.ctx.textBaseline = 'middle'; this.ctx.textBaseline = 'middle';
this.ctx.fontWeight = this.fontWeight; this.ctx.fontWeight = this.fontWeight;
...@@ -903,6 +1010,181 @@ export class ShapeRect extends MySprite { ...@@ -903,6 +1010,181 @@ export class ShapeRect extends MySprite {
export class Line extends MySprite {
lineWidth = 5;
lineColor = '#000000';
_pointArr = [];
roundFlag = true;
_pointS = 1;
imgObj;
bitMap;
_offCtx;
_offCanvas;
lastPointIndex = 0;
init() {
const canvas = window['curCanvas'];
const w = canvas.nativeElement.width;
const h = canvas.nativeElement.height;
console.log('w: ', w);
console.log('h: ', h);
this._offCanvas = document.createElement('canvas');
this._offCanvas.width = w;
this._offCanvas.height = h;
// this._offCanvas = _offCanvas;
// this._offCtx = this._offCanvas.getContext('2d');
// this._offCanvas = new OffscreenCanvas(w, h);
this._offCtx = this._offCanvas.getContext('2d');
}
addPoint(x, y) {
this._pointArr.push([x, y]);
if (this._pointArr.length < 2) {
return;
}
//
// const lastP = this._pointArr[this._pointArr.length - 1];
//
//
// const context = this._offCtx;
// context.moveTo (lastP[0], lastP[1]); // 设置起点状态
// context.lineTo (x, y); // 设置末端状态
//
// context.lineWidth = this.lineWidth; //设置线宽状态
// context.strokeStyle = this.lineColor;
// context.stroke();
//
//
// this.bitMap = this._offCanvas.transferToImageBitmap();
// const tmpLine = new MySprite(this._offCtx);
// tmpLine.init(this.imgObj);
// tmpLine.anchorY = 1;
// tmpLine.anchorX = 0.5;
// tmpLine.x = lastP[0];
// tmpLine.y = lastP[1];
//
// const disH = getPosDistance(lastP[0], lastP[1], x, y);
// tmpLine.scaleX = this.lineWidth / tmpLine.width;
// tmpLine.scaleY = disH / tmpLine.height * 1.1;
//
// const angle = getAngleByPos(lastP[0], lastP[1], x, y);
// tmpLine.rotation = angle;
//
// this.addChild(tmpLine);
}
setPointArr(arr, imgObj) {
this.removeChildren();
if (arr.length < 2) {
return;
}
let p1 = arr[0];
let p2;
for (let i = 1; i < arr.length; i++) {
p2 = arr[i];
const tmpLine = new MySprite();
tmpLine.init(imgObj);
tmpLine.anchorY = 1;
tmpLine.anchorX = 0.5;
tmpLine.x = p1[0];
tmpLine.y = p1[1];
const disH = getPosDistance(p1[0], p1[1], p2[0], p2[1]);
tmpLine.scaleX = this.lineWidth / tmpLine.width;
tmpLine.scaleY = disH / tmpLine.height * 1.1;
const angle = getAngleByPos(p1[0], p1[1], p2[0], p2[1]);
tmpLine.rotation = angle;
this.addChild(tmpLine);
p1 = p2;
}
}
drawLine() {
if (this._pointArr.length < 2) {
return;
}
const curMaxPointIndex = this._pointArr.length - 1;
if (curMaxPointIndex > this.lastPointIndex) {
const arr = this._pointArr;
const context = this._offCtx;
context.moveTo (arr[this.lastPointIndex][0] * this._pointS, arr[this.lastPointIndex][1] * this._pointS); // 设置起点状态
for (let i = this.lastPointIndex + 1; i < arr.length; i++) {
context.lineTo (arr[i][0] * this._pointS, arr[i][1] * this._pointS); // 设置末端状态
}
if (this.roundFlag) {
context.lineCap = "round";
}
context.lineWidth = this.lineWidth; //设置线宽状态
context.strokeStyle = this.lineColor;
context.stroke();
this.lastPointIndex = curMaxPointIndex;
// this.bitMap = this._offCanvas.transferToImageBitmap();
}
// this.ctx.drawImage(this.bitMap, this._offX, this._offY);
this.ctx.drawImage(this._offCanvas, this._offX, this._offY);
}
drawSelf() {
super.drawSelf();
this.drawLine();
// if (this.img) {
// this.ctx.drawImage(this._offCanvas, 0, 0, this.width, this.height);
// }
// if (this.bitMap) {
// this.bitMap = this._offCanvas.transferToImageBitmap();
// this.ctx.drawImage(this.bitMap, 0, 0, this.width, this.height);
// }
}
}
export class ShapeCircle extends MySprite { export class ShapeCircle extends MySprite {
fillColor = '#FF0000'; fillColor = '#FF0000';
...@@ -931,6 +1213,9 @@ export class ShapeCircle extends MySprite { ...@@ -931,6 +1213,9 @@ export class ShapeCircle extends MySprite {
} }
} }
export class ShapeRectNew extends MySprite { export class ShapeRectNew extends MySprite {
...@@ -1365,6 +1650,9 @@ export function showStar(item, time = 0.8, callBack = null, easing = null) { ...@@ -1365,6 +1650,9 @@ export function showStar(item, time = 0.8, callBack = null, easing = null) {
export function randomSortByArr(arr) { export function randomSortByArr(arr) {
if (!arr) {
return;
}
const newArr = []; const newArr = [];
const tmpArr = arr.concat(); const tmpArr = arr.concat();
while (tmpArr.length > 0) { while (tmpArr.length > 0) {
......
...@@ -967,7 +967,7 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -967,7 +967,7 @@ export class PlayComponent implements OnInit, OnDestroy {
this.canTouch = false; this.canTouch = false;
box.click(() => { box.click(() => {
let answers = this.curExercise.answers; let answers = this.curExercise.answers;
let selectAll = true; let selectAll = true;
...@@ -1002,30 +1002,30 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -1002,30 +1002,30 @@ export class PlayComponent implements OnInit, OnDestroy {
this.player.loading(lemon); this.player.loading(lemon);
//如果到达坡顶,练习题未结束,则小车从坡顶划出,从坡底划入 //如果到达坡顶,练习题未结束,则小车从坡顶划出,从坡底划入
if(this.curIndex == 6 && this.tempExerciseArr.length > 0){ if (this.curIndex % 6 == 0 && this.tempExerciseArr.length > 0) {
let toX = this.stage.stage.width + this.player.bg.width; let toX = this.stage.stage.width + this.player.bg.width;
let toY = this.getPlayerY(toX); let toY = this.getPlayerY(toX);
this.player.pullCar(toX, toY, ()=>{ this.player.pullCar(toX, toY, () => {
let sX = -this.player.bg.width; let sX = -this.player.bg.width;
let sY = this.getPlayerY(sX); let sY = this.getPlayerY(sX);
this.player.bg.x = sX; this.player.bg.x = sX;
this.player.bg.y = sY; this.player.bg.y = sY;
this.initLemon(); this.initLemon();
this.player.pullCar(this.player.initX, this.player.initY, () => {
//显示下一个练习题
this.showNextExercise();
}, 1);
}, 1.5);
}
else {
//显示下一个练习题
this.showNextExercise();
}
this.player.pullCar(this.player.initX, this.player.initY, ()=>{
//显示下一个练习题
this.showNextExercise();
}, 1);
}, 1.5);
}
else{
//显示下一个练习题
this.showNextExercise();
}
}); });
} }
...@@ -1033,8 +1033,10 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -1033,8 +1033,10 @@ export class PlayComponent implements OnInit, OnDestroy {
this.canTouch = true; this.canTouch = true;
} }
}, () => { }, () => {
this.canTouch = true;
this.player.flowSweat(); this.player.flowSweat(() => {
this.canTouch = true;
});
}); });
} }
...@@ -1109,15 +1111,13 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -1109,15 +1111,13 @@ export class PlayComponent implements OnInit, OnDestroy {
//关闭大门 //关闭大门
this.stage.closeDoor(() => { this.stage.closeDoor(() => {
//将答案滑出屏幕 showCelebrate();
this.leftBox.moveOut(() => {
showCelebrate();
});
this.midBox.moveOut();
this.rightBox.moveOut();
}); });
//将答案滑出屏幕
this.leftBox.moveOut();
this.midBox.moveOut();
this.rightBox.moveOut();
} }
} }
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