game-frame-template/src/frame.js

import { game } from './config';
import { creatData } from './message';

let frame = document.getElementById('iframe');
let contentWindow = frame.contentWindow;

// 设置iframe框架的样式
export function setFrameStyle() {
  const html = document.documentElement;
  frame.style.width = html.clientWidth + '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 () {
      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);
    })
  })
}

/**
 * 发送消息
 * @param {string} type 消息类型
 */
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');
  }
}