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

完善

parent 4244b24f
......@@ -53,9 +53,13 @@ export class Player {
playerPic.y = playerPic.getBoundingBox().height / 2;
this.playerPic = playerPic;
let width = playerPic.getBoundingBox().width;
let height = playerPic.getBoundingBox().height;
let rect = {x:0, y:0, width: width, height:height};
playerPic.setShowRect(rect);
const bg = new ShapeRect();
bg.setSize(width, height);
bg.alpha = 0;
......@@ -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;
......
......@@ -23,7 +23,10 @@ export class Stage {
leftDoor;
leftDoorInitX;
rightDoor;
rightDorrInitX;
constructor(images){
this.images = images;
......@@ -111,22 +114,21 @@ export class Stage {
leftDoor.init(this.images.get('doorleft'), 0);
leftDoor.scaleX = this.scaleX;
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;
this.bg.addChild(leftDoor);
this.leftDoor = leftDoor;
this.leftDoorInitX = leftDoor.x;
const rightDoor = new MySprite();
rightDoor.init(this.images.get('doorright'), 1);
rightDoor.scaleX = this.scaleX;
rightDoor.scaleY = this.scaleY;
rightDoor.x = leftDoor.x + leftDoor.getBoundingBox().width * 2;
rightDoor.x = leftDoor.x + leftDoor.getBoundingBox().width * 4;
rightDoor.y = leftDoor.y;
this.bg.addChild(rightDoor);
this.rightDoor = rightDoor;
leftDoor.scaleX = 0;
rightDoor.scaleX = 0;
this.rightDorrInitX = rightDoor.x;
}
setPromptText(text){
......@@ -135,14 +137,15 @@ export class Stage {
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){
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 {
img;
_z = 0;
_showRect;
_bitmapFlag = false;
_offCanvas;
_offCtx;
init(imgObj = null, anchorX: number = 0.5, anchorY: number = 0.5) {
......@@ -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)') {
......@@ -103,6 +114,8 @@ export class MySprite extends Sprite {
}
update($event = null) {
if (!this.visible && this.childDepandVisible) {
return;
......@@ -139,21 +152,21 @@ export class MySprite extends Sprite {
if (this._radius) {
const r = this._radius;
const w = this.width;
const h = this.height;
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, -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, h / 2 - r, r);
this.ctx.clip();
}
//
// if (this._radius) {
//
// const r = this._radius;
// const w = this.width;
// const h = this.height;
//
// 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, -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, h / 2 - r, r);
//
// this.ctx.clip();
// }
}
......@@ -176,8 +189,14 @@ export class MySprite extends Sprite {
if (this.img) {
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 {
}
}
set btimapFlag(v) {
this._bitmapFlag = v;
}
get btimapFlag() {
return this._bitmapFlag;
}
set alpha(v) {
this._alpha = v;
if (this.childDepandAlpha) {
......@@ -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 {
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.textBaseline = 'middle';
this.ctx.fontWeight = this.fontWeight;
......@@ -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 {
fillColor = '#FF0000';
......@@ -931,6 +1213,9 @@ export class ShapeCircle extends MySprite {
}
}
export class ShapeRectNew extends MySprite {
......@@ -1365,6 +1650,9 @@ export function showStar(item, time = 0.8, callBack = null, easing = null) {
export function randomSortByArr(arr) {
if (!arr) {
return;
}
const newArr = [];
const tmpArr = arr.concat();
while (tmpArr.length > 0) {
......
......@@ -1002,11 +1002,11 @@ export class PlayComponent implements OnInit, OnDestroy {
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 toY = this.getPlayerY(toX);
this.player.pullCar(toX, toY, ()=>{
this.player.pullCar(toX, toY, () => {
let sX = -this.player.bg.width;
let sY = this.getPlayerY(sX);
......@@ -1015,13 +1015,13 @@ export class PlayComponent implements OnInit, OnDestroy {
this.initLemon();
this.player.pullCar(this.player.initX, this.player.initY, ()=>{
this.player.pullCar(this.player.initX, this.player.initY, () => {
//显示下一个练习题
this.showNextExercise();
}, 1);
}, 1.5);
}
else{
else {
//显示下一个练习题
this.showNextExercise();
}
......@@ -1033,8 +1033,10 @@ export class PlayComponent implements OnInit, OnDestroy {
this.canTouch = true;
}
}, () => {
this.player.flowSweat(() => {
this.canTouch = true;
this.player.flowSweat();
});
});
}
......@@ -1109,15 +1111,13 @@ export class PlayComponent implements OnInit, OnDestroy {
//关闭大门
this.stage.closeDoor(() => {
//将答案滑出屏幕
this.leftBox.moveOut(() => {
showCelebrate();
});
//将答案滑出屏幕
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