细节调整

src/config.js

@@ -1,3 +1,6 @@
+// 各个类型的游戏有差异 需要修改 并验证
+// https://ccsensp.yuque.com/docs/share/f8296710-f2fe-4912-ba95-13e005ff7b1a?# 《黄金样品（鸟妈妈回家）v2.0改版》
+
 // 生成单一的动作构成数组
 const directions = (eventCode = 0) => {
   const results = [];

src/dom.js

@@ -0,0 +1,92 @@
+// DEBUG: 该文件仅适用于测试调试程序 正式版删除
+import { sendMessage } from './frame';
+
+// 事件功能按钮 绑定动作 发送消息
+export function handleEventButtons() {
+  const eventButtons = document.querySelectorAll('div.events button');
+
+  eventButtons.forEach(item => {
+    item.addEventListener('click', function () {
+      const { event } = item.dataset;
+
+      switch (event) {
+        case 'pause':
+        case 'continue':
+          setPauseButtonStatus(item, +item.dataset.status);
+          break;
+      }
+      changeButtonsDisplay(event);
+      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);
+    })
+  })
+}
+
+/**
+ * 设置 暂停/继续 按钮的状态样式等
+ * @param {HTMLElement} element
+ * @param {number} type
+ */
+function setPauseButtonStatus(element, type) {
+  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');
+  }
+}
+
+/**
+ * 切换按钮的显示状态
+ * @param eventType
+ */
+export 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);
+}

src/frame.js

@@ -1,5 +1,6 @@
 import { game } from './config';
 import { creatData } from './message';
+import { changeButtonsDisplay } from './dom';
 
 let frame = document.getElementById('iframe');
 let contentWindow = frame.contentWindow;
@@ -11,39 +12,6 @@ export function setFrameStyle() {
   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 () {
-      const { event } = item.dataset;
-
-      switch (event) {
-        case 'pause':
-        case 'continue':
-          setPauseButtonStatus(item, +item.dataset.status);
-          break;
-      }
-      changeButtonsDisplay(event);
-      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);
-    })
-  })
-}
-
 // 收到消息
 export function onMessage() {
   window.addEventListener('message', function(e) {
@@ -51,19 +19,11 @@ export function onMessage() {
     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');
+    if (event === 'pause' || event === 'continue' || event === 'finish') { // 暂停
+      sendMessage(event);
+      changeButtonsDisplay(event); // DEBUG: 改变按钮状态 正式使用不需要的话 就删除掉
     }
+
   }, false);
 }
 
@@ -71,67 +31,10 @@ export function onMessage() {
  * 发送消息
  * @param {string} type 消息类型
  */
-function sendMessage(type, ...args) {
+export function sendMessage(type, ...args) {
   const data = creatData(type, ...args);
   if (!data) {
-    return alert('错误: 发送消息数据为空');
+    return alert('错误: 发送消息数据为空'); // DEBUG:
   }
   contentWindow.postMessage(data, frame.src);
 }
-
-/**
- * 设置 暂停/继续 按钮的状态样式等
- * @param {HTMLElement} element
- * @param {number} type
- */
-function setPauseButtonStatus(element, type) {
-  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');
-  }
-}
-
-/**
- * 切换按钮的显示状态
- * @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);
-}

src/index.js

@@ -1,11 +1,18 @@
-import {handleEventButtons, handlePlayCodeButtons, onMessage, setFrameStyle} from "./frame";
+import { handleEventButtons, handlePlayCodeButtons } from "./dom";
+import { onMessage, setFrameStyle } from "./frame";
 
 window.addEventListener('load', init, false)
 window.addEventListener('resize', setFrameStyle, false)
 
 function init() {
-  onMessage();
-  setFrameStyle();
-  handleEventButtons();
-  handlePlayCodeButtons();
+  onMessage(); // 监听处理接受到的message
+  setFrameStyle(); // 设置frame宽高
+
+  initDom();
+}
+
+// 初始化dom 正式程序不需要 就删除掉
+function initDom() {
+  handleEventButtons(); // 按钮绑定事件
+  handlePlayCodeButtons(); // 事件play code 绑定事件
 }