-
-
-
+
+
+
-
+
动作：
-
+
-
+
diff --git a/src/frame.js b/src/frame.js
index 9d8b2f8..3945a84 100644
--- a/src/frame.js
+++ b/src/frame.js
@@ -18,9 +18,14 @@ export function handleEventButtons() {
eventButtons.forEach(item => {
item.addEventListener('click', function () {
const { event } = item.dataset;
- if (event === 'pause' || event === 'continue') {
- setPauseButtonStatus(item);
+
+ switch (event) {
+ case 'pause':
+ case 'continue':
+ setPauseButtonStatus(item, +item.dataset.status);
+ break;
}
+ changeButtonsDisplay(event);
sendMessage(event);
})
})
@@ -39,22 +44,48 @@ export function handlePlayCodeButtons() {
})
}
+// 收到消息
+export function onMessage() {
+ window.addEventListener('message', function(e) {
+ console.log(e);
+ if (e.source !== frame.src) return; // 来源
+ const { event } = e.data;
+
+ if (event === 'pause') { // 暂停
+ changeButtonsDisplay('pause');
+ sendMessage('pause');
+ } else if (event === 'continue') { // 继续
+ changeButtonsDisplay('continue');
+ sendMessage('continue');
+ } else if (event === 'finish') {
+ // 结束
+ // 回传finish信息
+ // 切换按钮状态
+ sendMessage('finish');
+ changeButtonsDisplay('finish');
+ }
+ }, false);
+}
+
/**
* 发送消息
* @param {string} type 消息类型
*/
function sendMessage(type, ...args) {
const data = creatData(type, ...args);
+ if (!data) {
+ return alert('错误: 发送消息数据为空');
+ }
contentWindow.postMessage(data, frame.src);
}
/**
* 设置 暂停/继续 按钮的状态样式等
* @param {HTMLElement} element
+ * @param {number} type
*/
-function setPauseButtonStatus(element) {
- const type = element.dataset.status;
- if (+type === 0) { // 点击的是暂停
+function setPauseButtonStatus(element, type) {
+ if (type === 0) { // 点击的是暂停
element.dataset.status = '1';
element.dataset.event = 'continue';
element.textContent = '继续';
@@ -69,3 +100,38 @@ function setPauseButtonStatus(element) {
element.classList.add('btn-warning');
}
}
+
+/**
+ * 切换按钮的显示状态
+ * @param eventType
+ */
+function changeButtonsDisplay(eventType) {
+ const start = $id('start');
+ const pause = $id('pause');
+ const finish = $id('finish');
+ const actionContainer = $id('action-container')
+ if (eventType === 'start') { // 点了开始
+ start.classList.add('d-none');
+ pause.classList.remove('d-none');
+ finish.classList.remove('d-none');
+ actionContainer.classList.remove('d-none');
+ } else if (eventType === 'finish') {
+ start.classList.remove('d-none');
+ pause.classList.add('d-none');
+ finish.classList.add('d-none');
+ actionContainer.classList.add('d-none');
+ } else if ((eventType === 'pause')) {
+ actionContainer.classList.add('d-none');
+ } else if (eventType === 'continue') {
+ actionContainer.classList.remove('d-none');
+ }
+}
+
+/**
+ * 通过id获取元素
+ * @param {string} id
+ * @returns {HTMLElement}
+ */
+function $id(id) {
+ return document.getElementById(id);
+}
diff --git a/src/index.js b/src/index.js
index d12fe4d..69da1e0 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,9 +1,10 @@
-import {handleEventButtons, handlePlayCodeButtons, setFrameStyle} from "./frame";
+import {handleEventButtons, handlePlayCodeButtons, onMessage, setFrameStyle} from "./frame";
window.addEventListener('load', init, false)
window.addEventListener('resize', setFrameStyle, false)
function init() {
+ onMessage();
setFrameStyle();
handleEventButtons();
handlePlayCodeButtons();
diff --git a/src/message.js b/src/message.js
index def0289..c228d1d 100644
--- a/src/message.js
+++ b/src/message.js
@@ -2,10 +2,13 @@ import { game } from './config';
const { count, game: gameDuration, level, scores, directions, totalScore, totalTimes } = game;
let currentScore = 0; // 当前得分
-let currentTimes = 10; // 当前次数
+let currentTimes = 0; // 当前次数
// 生成开始游戏消息需要的data数据
const createStartData = () => {
+ currentScore = 0;
+ currentTimes = 0;
+
const now = Date.now();
const countFinishTime = now + count * 1000; // 倒计时结束时间
const gameFinishTime = countFinishTime + gameDuration * 1000; // 游戏结束时间
@@ -66,23 +69,32 @@ const createFinishData = (score=currentScore, times=currentTimes) => {
/**
* 生成 play消息 发送的data数据
- * @param {number} score 当前得分
- * @param {number} times 当前次数
* @param {number} direction 事件code 0默认 共6个事件参数 0 1 2 3 4 5
- * @returns {{data: {score: number, times: number, param: {direction: number}, status: number}, event: string}}
*/
-const createPlayData = ({ score=currentScore, times=currentTimes , direction=0 }) => {
- return {
- event: "play",
- data: {
- score, // 得分
- times, // 次数
- status: 1, // 游戏状态 0 1 2
- param: {
- direction, // 0 1 2 3 4 5 共6中事件参数
+const createPlayData = (direction= 0) => {
+ let data = null;
+ if (validatePlayCode(direction, currentTimes)) { // 动作正确
+ currentTimes += 1;
+ const directionTarget = scores.find(item => item.direction === direction);
+ if (!directionTarget) {
+ alert('配置信息有误, 未找到事件分值')
+ }
+ currentScore += directionTarget.score
+ data = {
+ event: "play",
+ data: {
+ score: currentScore, // 得分
+ times: currentTimes, // 次数
+ status: 1, // 游戏状态 0 1 2
+ param: {
+ direction, // 0 1 2 3 4 5 共6中事件参数
+ }
}
}
+ } else {
+ alert('错误: 动作执行错误');
}
+ return data;
}
// 生成提交的数据
@@ -99,16 +111,23 @@ export const creatData = (eventType, ...args) => {
data = createPauseData(1);
break;
case 'finish':
- data = createFinishData(); // TODO:
+ data = createFinishData();
break;
case 'play':
- data = createPlayData({direction: +args[0]});
+ data = createPlayData(+args[0]);
break;
default:
break;
}
- if (!data) {
- alert('时间类型参数有误，消息数据为空');
- }
+
return data;
}
+
+/**
+ * 验证code是否是当前应该执行的动作代码
+ * @param code
+ * @returns {boolean}
+ */
+function validatePlayCode(code, currentTimes) {
+ return code === directions[currentTimes];
+}