给game发消息

public/index.html

@@ -11,17 +11,17 @@
 <div class="container p-3 clearfix">
 	<div class="float-start events">
 		<button type="button" class="btn btn-primary btn-sm" data-event="start">开始</button>
-		<button type="button" class="btn btn-secondary btn-sm" data-event="pause">暂停</button>
+		<button type="button" class="btn btn-warning btn-sm" data-event="pause" data-status="0">暂停</button>
 		<button type="button" class="btn btn-danger btn-sm" data-event="finish">结束</button>
 	</div>
 	<div class="float-end actions">
 		动作：
-		<button type="button" class="btn btn-outline-primary btn-sm" data-action="0">0</button>
-		<button type="button" class="btn btn-outline-secondary btn-sm" data-action="1">1</button>
-		<button type="button" class="btn btn-outline-success btn-sm"  data-action="2">2</button>
-		<button type="button" class="btn btn-outline-danger btn-sm"  data-action="3">3</button>
-		<button type="button" class="btn btn-outline-warning btn-sm"  data-action="4">4</button>
-		<button type="button" class="btn btn-outline-info btn-sm" data-action="5">5</button>
+		<button type="button" class="btn btn-outline-primary btn-sm" data-code="0">0</button>
+		<button type="button" class="btn btn-outline-secondary btn-sm" data-code="1">1</button>
+		<button type="button" class="btn btn-outline-success btn-sm"  data-code="2">2</button>
+		<button type="button" class="btn btn-outline-danger btn-sm"  data-code="3">3</button>
+		<button type="button" class="btn btn-outline-warning btn-sm"  data-code="4">4</button>
+		<button type="button" class="btn btn-outline-info btn-sm" data-code="5">5</button>
 	</div>
 </div>
 <hr />

src/config.js

@@ -1,4 +1,24 @@
+// 生成单一的动作构成数组
+const directions = (eventCode = 0) => {
+  const results = [];
+  for (let i = 0; i < 20; i++) {
+    results.push(eventCode)
+  }
+  return results;
+}
+
 export const game = {
-  width: 1068,
-  height: 600
+  frame: {
+    width: 1068,
+    height: 600
+  },
+  count: 5, // 倒计时时长
+  game: 60, // 游戏时长
+  level: 0,
+  totalScore: 100,
+  totalTimes: 20,
+  scores: [
+    { direction: 0, score: 5 },
+  ],
+  directions: directions(),
 }

src/frame.js

@@ -1,4 +1,5 @@
 import { game } from './config';
+import { creatData } from './message';
 
 let frame = document.getElementById('iframe');
 let contentWindow = frame.contentWindow;
@@ -7,15 +8,33 @@ let contentWindow = frame.contentWindow;
 export function setFrameStyle() {
   const html = document.documentElement;
   frame.style.width = html.clientWidth + 'px';
-  frame.style.height = Math.round(html.clientWidth * game.height / game.width) + 'px';
+  frame.style.height = Math.round(html.clientWidth * game.frame.height / game.frame.width) + 'px';
 }
 
+// 事件功能按钮 绑定动作 发送消息
 export function handleEventButtons() {
   const eventButtons = document.querySelectorAll('div.events button');
 
   eventButtons.forEach(item => {
     item.addEventListener('click', function () {
-      sendMessage(item.dataset.event);
+      const { event } = item.dataset;
+      if (event === 'pause' || event === 'continue') {
+        setPauseButtonStatus(item);
+      }
+      sendMessage(event);
+    })
+  })
+}
+
+// play code按钮 绑定动作 发送消息
+export function handlePlayCodeButtons() {
+  const actionButtons = document.querySelectorAll('div.actions button');
+
+  actionButtons.forEach(item => {
+    item.addEventListener('click', function () {
+      const { code } = item.dataset;
+
+      sendMessage('play', code);
     })
   })
 }
@@ -24,6 +43,29 @@ export function handleEventButtons() {
  * 发送消息
  * @param {string} type 消息类型
  */
-function sendMessage(type) {
-  contentWindow.postMessage({ event: 'start' }, frame.src);
+function sendMessage(type, ...args) {
+  const data = creatData(type, ...args);
+  contentWindow.postMessage(data, frame.src);
+}
+
+/**
+ * 设置 暂停/继续 按钮的状态样式等
+ * @param {HTMLElement} element
+ */
+function setPauseButtonStatus(element) {
+  const type = element.dataset.status;
+  if (+type === 0) { // 点击的是暂停
+    element.dataset.status = '1';
+    element.dataset.event = 'continue';
+    element.textContent = '继续';
+    element.classList.remove('btn-warning');
+    element.classList.add('btn-success');
+  } else {
+    // 点击的是继续 游戏
+    element.dataset.status = '0';
+    element.dataset.event = 'pause';
+    element.textContent = '暂停';
+    element.classList.remove('btn-success');
+    element.classList.add('btn-warning');
+  }
 }

src/index.js

@@ -1,4 +1,4 @@
-import {handleEventButtons, setFrameStyle} from "./frame";
+import {handleEventButtons, handlePlayCodeButtons, setFrameStyle} from "./frame";
 
 window.addEventListener('load', init, false)
 window.addEventListener('resize', setFrameStyle, false)
@@ -6,4 +6,5 @@ window.addEventListener('resize', setFrameStyle, false)
 function init() {
   setFrameStyle();
   handleEventButtons();
+  handlePlayCodeButtons();
 }

src/message.js

@@ -0,0 +1,114 @@
+import { game } from './config';
+const { count, game: gameDuration, level, scores, directions, totalScore, totalTimes } = game;
+
+let currentScore = 0; // 当前得分
+let currentTimes = 10; // 当前次数
+
+// 生成开始游戏消息需要的data数据
+const createStartData = () => {
+  const now = Date.now();
+  const countFinishTime = now + count * 1000; // 倒计时结束时间
+  const gameFinishTime = countFinishTime + gameDuration * 1000; // 游戏结束时间
+  const data = {
+    event: "start",
+    data: {
+      count: {
+        finishTime: countFinishTime, // 倒计时结束的ms数
+        duration: count, // 倒计时时长
+      },
+      game: {
+        finishTime: gameFinishTime, // 游戏结束的ms数
+        duration: gameDuration, // 游戏时长
+        totalScore, // 总分
+        totalTimes, // 总次数
+        level, // 等级 0->入门 1->简单 2->普通 3->困难
+        config: {
+          scores,
+          directions // 游戏的动作构成队列
+        }
+      },
+      status: 1, // 游戏状态 0 1 2
+      param: {}, // 额外个性化参数
+    }
+  }
+  return data;
+}
+
+/**
+ * 生成 暂停/继续 消息data数据
+ * @param {number} code 0->暂停 1->继续
+ * @returns {{}}
+ */
+const createPauseData = (code) => {
+  return {
+    event: code === 0 ? 'pause' : 'continue',
+    data: { status: code ===0 ? 3 : 1 }
+  }
+}
+
+/**
+ * 生成暂停/继续消息data数据
+ * @param {number} score 总得分 客户端传来的
+ * @param {number} times 总次数 客户端传来的
+ * @returns {{data: {score, times, param: {}, status: number}, event: string}}
+ */
+const createFinishData = (score=currentScore, times=currentTimes) => {
+  return {
+    event: 'finish',
+    data: {
+      score, // 得分
+      times, // 次数
+      status: 2, // 游戏状态 0 1 2
+      param: {}, // 额外个性化参数
+    }
+  }
+}
+
+/**
+ * 生成 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中事件参数
+      }
+    }
+  }
+}
+
+// 生成提交的数据
+export const creatData = (eventType, ...args) => {
+  let data = null;
+  switch (eventType) {
+    case 'start':
+      data = createStartData()
+      break;
+    case 'pause':
+      data = createPauseData(0);
+      break;
+    case 'continue':
+      data = createPauseData(1);
+      break;
+    case 'finish':
+      data = createFinishData(); // TODO:
+      break;
+    case 'play':
+      data = createPlayData({direction: +args[0]});
+      break;
+    default:
+      break;
+  }
+  if (!data) {
+    alert('时间类型参数有误，消息数据为空');
+  }
+  return data;
+}