Commit 652562c0 authored by Li MingZhe's avatar Li MingZhe

feat: 断线重连

parent 973809d7
No preview for this file type
......@@ -77,11 +77,17 @@ cc.Class({
if (window && window.courseware) {
getData = window.courseware.getData;
}
getData((data) => {
getData((data, aspect) => {
if (window['air']?.airClassInfo?.user?.classRole == 'tea') {
this.isTeacher = true;
}
if (aspect) {
console.log('aspect : ', aspect);
this.serverAllUser = aspect.all_user;
}
this.initHistoryData(aspect.user_aspect);
console.log('data:', data);
this.data = data || this.getDefaultData();
......@@ -165,6 +171,10 @@ cc.Class({
const c = window.courseware;
if (c) {
data.historyData = this.getHistoryData();
console.log('sendServerData: ', data);
c.sendEvent(key, data);
}
},
......@@ -185,6 +195,7 @@ cc.Class({
c.onEvent('show_cap', (data, next) => {
console.log('in show_cap event', data);
this.historyData = data.historyData;
this.showCapAnima(data.index);
next();
});
......@@ -192,29 +203,31 @@ cc.Class({
} else {
c.onEvent('show_question', (data, next) => {
this.historyData = data.historyData;
this.showTeacherPanelLabel();
next();
});
c.onEvent('show_answer', (data, next) => {
console.log('in show_answer event', data);
this.historyData = data.historyData;
this.showStudentPanelLabel(data.isRight);
next();
});
c.onEvent('show_speak', (data, next) => {
this.historyData = data.historyData;
this.showSpeakIcon();
next();
});
c.onEvent('back_layer', (data, next) => {
this.historyData = data.historyData;
this.backLayer1();
next();
});
// c.onEvent('hw-gameStart', (data, next) => {
// console.log('data');
......@@ -228,6 +241,78 @@ cc.Class({
},
historyData: null,
initHistoryData(user_aspect) {
if (user_aspect) {
let data = JSON.parse(user_aspect).historyData;
for (let i=0; i<this.serverAllUser.length; i++) {
const userHistoryData = JSON.parse(this.serverAllUser[i].aspect).historyData
if (userHistoryData.dateTime > data.dateTime) {
data = userHistoryData;
}
}
this.historyData = data;
console.log('this.historyData: ', this.historyData);
}
if (!this.historyData) {
this.historyData = {};
}
},
setHistoryData(key, value) {
this.historyData[key] = value
},
getHistoryData() {
const date = new Date().getTime();
this.historyData.dateTime = date;
return this.historyData;
},
reconnect() {
if (!this.historyData.arrData) {
return;
}
this.data.groupArr = this.historyData.arrData;
this.groupIndex = this.historyData.index;
this.curBottle = this.bottleArr[this.historyData.index];
this.reconnectBottleState();
this.reconnectLayerState();
this.recoonectTeacherPanelState();
this.recoonectStudentPanelState();
},
reconnectBottleState() {
const arrData = this.historyData.arrData
for (let i=0; i<this.bottleArr.length; i++) {
if (arrData[i]?.isEnd) {
this.bottleArr[i].scroll.active = false;
this.bottleArr[i].cap.active = false;
}
}
},
reconnectLayerState() {
if (this.historyData.isShowLayer2) {
this.setLayer2ByData();
this.layer1.active = false;
this.layer2.active = true;
}
},
recoonectTeacherPanelState() {
if (this.historyData.isShowQuestion) {
const labelNode = this.teacherPanel.label.node;
labelNode.active = true;
}
},
recoonectStudentPanelState() {
if (this.historyData.isShowAnswer) {
const labelNode = this.studentPanel.label.node;
labelNode.active = true;
}
},
......@@ -301,6 +386,8 @@ cc.Class({
this.initLayer1();
this.initLayer2();
this.reconnect();
// this.initHole();
// this.initStar();
// this.initBtn();
......@@ -436,11 +523,17 @@ cc.Class({
for (let i = 0; i < this.bottleArr.length; i++) {
const bottle = this.bottleArr[i];
if (!bottle.isEnd) {
if (!bottle.data.isEnd) {
const worldPos = this._curShowItem.parent.convertToWorldSpaceAR(cc.v2(this._curShowItem.x, this._curShowItem.y));
const worldRect = bottle.getBoundingBoxToWorld();
if (worldRect.contains(worldPos)) {
this.showCapAnima(i);
this.setHistoryData("isShowLayer2", true)
this.setHistoryData("index", i)
this.setHistoryData("arrData", this.data.groupArr)
this.sendServerEvent('show_cap', {index: i})
return;
}
......@@ -528,6 +621,10 @@ cc.Class({
dragonDisplay.playAnimation('newAnimation', -1);
role.on(cc.Node.EventType.TOUCH_START, () => {
if (!this.role.hand.active) {
return;
}
this._curShowItem = role;
this.role.hand.active = false;
playAudio(this.clickClip);
......@@ -648,6 +745,9 @@ cc.Class({
})
this.curBottle = bottle;
this.groupIndex = this.data.groupArr.indexOf( bottle.data );
this.curBottle.data.isEnd = true;
playAudio(this.capClip);
},
......@@ -733,7 +833,6 @@ cc.Class({
cleanScroll() {
this.curBottle.scroll.active = false;
this.curBottle.isEnd = true;
},
......@@ -1091,6 +1190,9 @@ cc.Class({
this.addBtnClickFunc(show, () => {
this.showBtnAnima(show);
this.showTeacherPanelLabel();
this.setHistoryData('isShowQuestion', true)
this.sendServerEvent('show_question', {})
})
......@@ -1101,6 +1203,7 @@ cc.Class({
this.addBtnClickFunc(speak, () => {
this.showBtnAnima(speak);
this.showSpeakIcon();
this.sendServerEvent('show_speak', {})
})
......@@ -1114,6 +1217,8 @@ cc.Class({
this.addBtnClickFunc(right, () => {
this.showBtnAnima(right);
this.showStudentPanelLabel(true);
this.setHistoryData('isShowAnswer', true)
this.sendServerEvent('show_answer', {isRight: true})
})
......@@ -1125,6 +1230,8 @@ cc.Class({
this.addBtnClickFunc(wrong, () => {
this.showBtnAnima(wrong);
this.showStudentPanelLabel(false);
this.setHistoryData('isShowAnswer', true)
this.sendServerEvent('show_answer', {isRight: false})
})
......@@ -1134,9 +1241,22 @@ cc.Class({
next.x = wrong.x;
next.y = wrong.y - 170 * this._mapScaleMin;
this.addBtnClickFunc(next, () => {
if (next.disableTouch) {
return;
}
this.showBtnAnima(next);
this.backLayer1();
this.setHistoryData('isShowQuestion', false);
this.setHistoryData('isShowAnswer', false);
this.setHistoryData('isShowLayer2', false);
this.sendServerEvent('back_layer', {});
next.disableTouch = true;
this.delayCall(1, () => {
next.disableTouch = false;
})
})
},
......@@ -1235,689 +1355,6 @@ cc.Class({
holeArr: null,
initHole() {
this.holeArr = [];
const edge = 100 * this._mapScaleMin;
const itemW = 260 * this._mapScaleMin;
const disW = (this.canvas.width - edge * 2 - itemW * 4) / 3;
const baseX = -this.canvas.width / 2 + edge + itemW / 2;
const disH = 200 * this._mapScaleMin;
const baseY = -this.canvas.height / 2 + 260 * this._mapScaleMin;
let j = 0;
for (let i = 0; i < 8; i++) {
const hole = this.getHole();
this.canvas.addChild(hole);
this.holeArr.push(hole);
hole.x = baseX + i % 4 * (itemW + disW);
hole.y = baseY - j * disH;
if (i == 3) {
j ++;
}
}
},
bigStarArr: null,
initStar() {
const gArr = this.data.groupArr;
if (gArr.length <= 1) {
return;
}
this.bigStarArr = [];
let baseX = this.canvas.width / 2 - 50 * this._mapScaleMin;
let baseY = this.canvas.height / 2 - 80 * this._mapScaleMin;
let disH = 80 * this._mapScaleMin;
for (let i=0; i<gArr.length; i++) {
const starBg = getSprNode('star_bg');
this.canvas.addChild(starBg, 2);
starBg.x = baseX;
starBg.y = baseY - i * disH;
const starTop = getSprNode('star');
starBg.addChild(starTop);
starTop.active = false;
starBg.star = starTop;
this.bigStarArr.push(starBg);
}
},
startBtn: null,
restartBtn: null,
initBtn() {
const btn = cc.find('Canvas/btn_start')
btn.scale = this._mapScaleMin;
btn.active = true;
btn.zIndex = 50;
btn.on(cc.Node.EventType.TOUCH_START, () => {
console.log(' in click');
cc.tween(btn)
.to(0.05, {scale: 0.9 * this._mapScaleMin})
.to(0.05, {scale: 1 * this._mapScaleMin})
.call(() => {
btn.active = false;
this.startBtnClicked();
this.addSoundBtnListner();
})
.start();
})
this.startBtn = btn;
const restartBtn = cc.find('Canvas/btn_restart');
restartBtn.zIndex = 50;
restartBtn.on(cc.Node.EventType.TOUCH_START, () => {
console.log(' in click');
cc.tween(restartBtn)
.to(0.05, {scale: 0.9 * this._mapScaleMin})
.to(0.05, {scale: 1 * this._mapScaleMin})
.call(() => {
restartBtn.active = false;
this.restartBtnClicked();
})
.start();
})
this.restartBtn = btn;
},
showSoundBtn() {
const btn = cc.find('Canvas/btn_laba')
btn.scale = this._mapScaleMin;
},
startBtnClicked() {
cc.tween(this)
.delay(0.3)
.call(() => {
this.showPenguin();
})
.start();
this.showQuestion();
playAudio(this.btnClip);
},
restartBtnClicked() {
this.groupIndex = 0;
this.initCurGroup();
this.hideBigStar();
this.startBtnClicked();
},
hideBigStar() {
for (let i=0; i<this.bigStarArr.length; i++) {
cc.tween(this.bigStarArr[i].star)
.to(0.5, {scale: 0}, {easing: 'cubicOut'})
.start();
}
},
soundAnima: null,
addSoundBtnListner() {
const btn = cc.find('Canvas/btn_laba')
btn.addComponent(cc.Button);
btn.on('click', () => {
this.showQuestion();
playAudio(this.btnClip);
})
},
showQuestion() {
var anim = cc.find('Canvas/btn_laba').getComponent(cc.Animation);
anim.play();
playAudioByUrl(this.curGroup.audio_url, () => {
anim.stop();
});
// // 指定播放 test 动画
// anim.play('test');
// // 指定从 1s 开始播放 test 动画
// anim.play('test', 1);
// // 使用 play 接口播放一个动画时,如果还有其他的动画正在播放,则会先停止其他动画
// anim.play('test2');
},
getHole() {
const hole = new cc.Node();
hole.scale = this._mapScaleMin;
const holeBg = getSprNode('hole_1');
hole.addChild(holeBg, 1);
const holeTop = getSprNode('hole_2');
hole.addChild(holeTop, 10);
return hole;
},
showPenguin() {
this.showOnePenguin();
},
showOnePenguin() {
const hole = this.getFreeHole();
if (hole) {
const penguin = this.getPenguin();
const optionData = this.getOptionData();
this.addPenguin(hole, penguin, optionData);
} else {
cc.tween(this)
.delay(0.3)
.call(() => {
this.showOnePenguin();
})
.start();
}
},
getOptionData() {
const arr = randomSortByArr( this.curGroup.optionArr );
return arr[0];
},
getPenguin() {
// console.log('this.penguinPool.length: ', this.penguinPool.length);
if (this.penguinPool.length > 0) {
return this.penguinPool.shift();
}
const node = new cc.Node();
const id = RandomInt(1, 2)
const penguin = getSprNode('penguin_' + id);
node.penguin = penguin;
this.addPenguinWrong(node, id);
this.addTextPanel(node);
this.addPicPanel(node);
this.addClickNode(node);
node.textPanel.y = penguin.height / 2 + node.textPanel.height / 2 - 25;
node.picPanel.y = penguin.height / 2 + node.picPanel.height / 2 - 25;
node.addChild(node.picPanel);
node.addChild(node.textPanel);
node.addChild(penguin);
node.addChild(node.wrong);
return node;
},
addClickNode(node) {
const rectNode = new cc.Node();
rectNode.addComponent(cc.Button);
rectNode.width = 270;
rectNode.height = 180;
rectNode.anchorX = 0;
rectNode.anchorY = 0;
// const ctx = rectNode.addComponent(cc.Graphics);
// ctx.fillColor = '#f9bd03';
// ctx.fillRect(0, 0, 270, 180);
// ctx.stroke();
rectNode.on('click', () => {
this.checkPenguinIsRight(node)
})
node.addChild(rectNode, 10);
rectNode.x = -130;
rectNode.y = 40;
rectNode.opacity = 50;
},
checkPenguinIsRight(node) {
if (!node.data) {
return;
}
if (this.isRightDuration) {
return;
}
if (node.data.end) {
return;
}
if (node.data.isRight == '1') {
this.showPenguinRight(node);
node.data.end = true;
} else {
this.showPenguinWrong(node);
}
},
isRightDuration: null,
showPenguinRight(node) {
this.isRightDuration = true;
this.showAnimaStar(node);
this.stopPenguin(node);
this.showRightSound(node);
},
showPenguinWrong(node) {
node.penguin.active = false;
node.wrong.active = true;
playAudio(this.wrongClip);
},
showAnimaStar(node) {
const resDragonBone = cc.find("Canvas/res/anima/star")
const d = cc.instantiate(resDragonBone)
node.addChild(d, 20);
d.x = 0;
d.y = node.penguin.height / 2;
},
checkNextStar(node) {
const data = node.data;
console.log('this.curGroup: ', this.curGroup);
const optionArr = this.curGroup.optionArr
const index = optionArr.indexOf(data);
if (index != -1) {
optionArr.splice(index, 1);
}
const isEnd = this.checkIsGroupEnd();
if (isEnd) {
this.showBigStar();
} else {
cc.tween(this)
.delay(1)
.call(() => {
this.showOnePenguin();
})
.start();
}
this.hideCurPenguin(node);
this.isRightDuration = false;
},
hideCurPenguin(penguin) {
const { downY, moveTime, panel, hole} = penguin.hideData;
cc.tween(penguin)
.call(() => {
hidePanel();
})
.to(moveTime, {y: downY}, {easing: 'quadInOut' })
.call(() => {
penguin.active = false;
penguin.penguin.active = true;
penguin.wrong.active = false;
hole.penguin = null;
this.penguinPool.push(penguin);
penguin.moveTween = null;
})
.start();
const hidePanel = () => {
cc.tween(panel)
.to(moveTime * 0.3, {opacity: 0})
.call(() => {
panel.active = false;
})
.start();
}
},
showBigStar() {
const bigStarBg = this.bigStarArr[this.groupIndex];
const star = bigStarBg.star;
star.active = true;
star.opacity = 0;
star.scale = 3 * this._mapScaleMin;
star.angle = 0;
const time = 1;
cc.tween(star)
.to(time, {scale: 1, opacity: 255, angle: -360}, {easing: 'quadOut'})
.call(() => {
this.checkGameEnd();
})
.start();
playAudio(this.bigStarClip);
},
checkGameEnd() {
this.groupIndex ++;
if (!this.data.groupArr[this.groupIndex] ) {
this.gameEnd();
return;
}
this.initCurGroup();
this.showOnePenguin();
this.showQuestion();
},
gameEnd() {
this.playEndEffect();
cc.tween(this)
.delay(0.2)
.call(() => {
this.showRestartBtn();
})
.start();
},
showRestartBtn() {
const restartBtn = cc.find('Canvas/btn_restart');
restartBtn.zIndex = 20;
restartBtn.active = true;
restartBtn.scale = 0;
cc.tween(restartBtn)
.to(1, {scale: this._mapScaleMin}, {easing: 'elasticOut'})
.start();
},
playEndEffect() {
playAudio(this.endClip);
const camera = cc.find('Canvas/Main Camera');
camera.zIndex = 100;
showTrebleFirework(camera, cc.find('RibbonNodeBase').children);
},
checkIsGroupEnd() {
const optionArr = this.curGroup.optionArr
for (let i=0; i<optionArr.length; i++) {
if (optionArr[i].isRight == '1') {
return false;
}
}
return true;
},
stopPenguin(node) {
if (node.moveTween) {
console.log('node.moveTween: ', node.moveTween);
node.moveTween.stop();
}
},
showRightSound(node) {
playAudio(this.rightClip, () => {
if (!node.data.audio_url) {
this.checkNextStar(node);
return;
}
playAudioByUrl(node.data.audio_url, () => {
this.checkNextStar(node)
})
});
},
addPenguinWrong(node, id) {
const penguinWrong = getSprNode('penguin_' + id + '_wrong');
penguinWrong.active = false;
node.wrong = penguinWrong;
},
addTextPanel(node) {
const textPanel = getSprNode('panel_text');
textPanel.active = false;
node.textPanel = textPanel;
const labelNode = new cc.Node();
const label = labelNode.addComponent(cc.Label)
textPanel.addChild(labelNode, 5);
label.fontSize = 54;
label.font = cc.find('Canvas/res/font/Berlin Sans FB').getComponent(cc.Label).font;
const color = new cc.Color();
cc.Color.fromHEX(color, 'c1431d');
labelNode.color = color;
labelNode.y = 5;
textPanel.label = label;
textPanel.addComponent(cc.Button)
textPanel.on('click', () => {
this.checkPenguinIsRight(node);
})
},
addPicPanel(node) {
const picPanel = getSprNode('panel_pic');
picPanel.active = false;
node.picPanel = picPanel;
const picNode = new cc.Node();
const spr = picNode.addComponent(cc.Sprite);
picPanel.addChild(picNode);
picNode.y = 0;
picPanel.spr = spr;
picPanel.addComponent(cc.Button)
picPanel.on('click', () => {
this.checkPenguinIsRight(node);
})
},
getFreeHole() {
const holeArr = randomSortByArr(this.holeArr)
for (let i=0; i<holeArr.length; i++) {
if (!holeArr[i].penguin) {
return holeArr[i]
}
}
return null;
},
addPenguin(hole, penguin, optionData) {
penguin.active = true;
penguin.parent = hole;
// penguin.zIndex = 5;
hole.penguin = penguin;
const downY = -180;
penguin.y = downY;
let panel;
if (optionData.type == 'text') {
panel = penguin.textPanel;
} else {
panel = penguin.picPanel;
}
this.setPanelData(panel, optionData);
const moveTime = 0.2 + Math.random() * 0.1;
const standTime = 1 + Math.random() * 2;
penguin.hideData = {
downY, moveTime, panel, hole
}
penguin.moveTween = cc.tween(penguin)
.to(moveTime, {y: 0}, {easing: 'quadInOut' })
.delay(standTime)
.call(() => {
hidePanel();
})
.to(moveTime, {y: downY}, {easing: 'quadInOut' })
.call(() => {
penguin.active = false;
penguin.penguin.active = true;
penguin.wrong.active = false;
hole.penguin = null;
this.penguinPool.push(penguin);
penguin.moveTween = null;
})
.start();
const nextTime = 0.3 + Math.random() * 2 ;
cc.tween(this)
.delay(nextTime)
.call(() => {
if (!this.isRightDuration) {
this.showOnePenguin();
}
})
.start();
const showPanel = () => {
panel.active = true;
panel.opacity = 0;
cc.tween(panel)
.to(moveTime * 0.3, {opacity: 255})
.start();
}
const hidePanel = () => {
cc.tween(panel)
.to(moveTime * 0.3, {opacity: 0})
.call(() => {
panel.active = false;
})
.start();
}
showPanel();
playAudio(this.appearClip);
},
setPanelData(panel, optionData) {
panel.data = optionData;
panel.parent.data = optionData;
if (optionData.type == 'text') {
this.setTextPanelData(panel, optionData);
} else {
this.setPicPanelData(panel, optionData);
}
},
setTextPanelData(panel, optionData) {
const panelW = 255 ;
panel.label.string = optionData.text;
panel.label["_forceUpdateRenderData"](true);
if (panel.label.node.width > panelW) {
panel.label.node.scale = panelW / panel.label.node.width
} else {
panel.label.node.scale = 1;
}
},
setPicPanelData(panel, optionData) {
cc.loader.load({url: optionData.pic_url}, (err, img) => {
const spriteFrame = new cc.SpriteFrame(img)
panel.spr.spriteFrame = spriteFrame
const panelW = 215;
const panelH = 135;
const sx = panelW / img.width;
const sy = panelH / img.height;
const s = Math.min(sx, sy);
panel.spr.node.scale = s;
})
},
......
No preview for this file type
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Cocos Creator | hello_world</title>
<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1, minimum-scale=1,maximum-scale=1"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="full-screen" content="yes"/>
<meta name="screen-orientation" content="portrait"/>
<meta name="x5-fullscreen" content="true"/>
<meta name="360-fullscreen" content="true"/>
<meta name="renderer" content="webkit"/>
<meta name="force-rendering" content="webkit"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<link rel="stylesheet" type="text/css" href="style-desktop.css"/>
<link rel="icon" href="favicon.ico"/>
</head>
<body>
<!-- <h1 class="header">hello_world</h1> -->
<!-- <div id="GameDiv" style="width:1280px; height: 720px;"> -->
<canvas id="GameCanvas" width="100%" height="100%"></canvas>
<div id="splash">
<div class="progress-bar stripes">
<span style="width: 0%"></span>
</div>
</div>
<!-- </div> -->
<!-- <p class="footer">Made with <a href="https://www.cocos.com/products#CocosCreator" title="cocos creator">Cocos Creator</a></p> -->
<script src="src/settings.js" charset="utf-8"></script>
<script src="main.js" charset="utf-8"></script>
<script type="text/javascript" src="https://staging-teach.cdn.ireadabc.com/h5template/h5-static-lib/js/air_online.js"></script>
<script type="text/javascript">
(function () {
// open web debugger console
if (typeof VConsole !== 'undefined') {
window.vConsole = new VConsole();
}
var debug = window._CCSettings.debug;
var splash = document.getElementById('splash');
splash.style.display = 'block';
function loadScript (moduleName, cb) {
function scriptLoaded () {
document.body.removeChild(domScript);
domScript.removeEventListener('load', scriptLoaded, false);
cb && cb();
};
var domScript = document.createElement('script');
domScript.async = true;
domScript.src = moduleName;
domScript.addEventListener('load', scriptLoaded, false);
document.body.appendChild(domScript);
}
loadScript(debug ? 'cocos2d-js.js' : 'cocos2d-js-min.js', function () {
if (CC_PHYSICS_BUILTIN || CC_PHYSICS_CANNON) {
loadScript(debug ? 'physics.js' : 'physics-min.js', window.boot);
}
else {
window.boot();
}
});
})();
</script>
</body>
</html>
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