game-frame-template/src/dom.js

// DEBUG: 该文件仅适用于测试调试程序 正式版删除

import { game } from './config';
import { sendMessage } from './frame';

let status = 0

// 设置 等级/模式的默认样式
export function setDefaultStyle() {
  const levelButtons = document.querySelectorAll('div.level button');
  const modeButtons = document.querySelectorAll('div.mode button');
  // 等级
  levelButtons.forEach(item => {
    if(item.dataset.code - 0 === game.level){
      item.classList.add('btn-primary');
    }else{
      item.classList.remove('btn-primary');
    }
  })
  // 模式
  modeButtons.forEach(mode => {
    if(mode.dataset.code - 0 === game.mode){
      mode.classList.add('btn-primary');
    }else{
      mode.classList.remove('btn-primary');
    }
  })
}

// 点击切换等级
export function handleLevelButtons() {
  const levelButtons = document.querySelectorAll('div.level button');
  levelButtons.forEach(item => {
    item.addEventListener('click', function () {
      if (status !== 0) {
        alert('错误: 动作执行错误')
        return
      };
      const { code } = item.dataset;
      game.level = code - 0
      setDefaultStyle()
    })
  })
}

// 点击切换模式
export function handleModeButtons() {
  const modeButtons = document.querySelectorAll('div.mode button');
  modeButtons.forEach(item => {
    item.addEventListener('click', function () {
      if (status !== 0) {
        alert('错误: 动作执行错误')
        return
      };
      const { code } = item.dataset;
      game.mode = code - 0
      setDefaultStyle()
    })
  })
}

// 事件功能按钮 绑定动作 发送消息
export function handleEventButtons() {
  const eventButtons = document.querySelectorAll('div.events button');

  eventButtons.forEach(item => {
    item.addEventListener('click', function () {
      const { event } = item.dataset;
      if(event === 'again') location.reload();

      switch (event) {
        case 'pause':
        case 'continue':
          setPauseButtonStatus(+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 {number} type
 */
export function setPauseButtonStatus(type) {
  const element = $id('pause');
  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 againBox = $id('again-box');
  const score = $id('score');
  const actionContainer = $id('action-container')
  if (eventType === 'start') { // 点了开始
    if(game.mode === 1) return;
    status = 1
    start.classList.add('d-none');
    pause.classList.remove('d-none');
    againBox.classList.add('d-none');
    actionContainer.classList.remove('d-none');
  } else if (eventType === 'finish') {
    status = 2
    // start.classList.remove('d-none');
    againBox.classList.remove('d-none');
    pause.classList.add('d-none');
    score.textContent =  game.totalScore + '分';
    actionContainer.classList.add('d-none');
  } else if ((eventType === 'pause')) {
    status = 3
    actionContainer.classList.add('d-none');
  } else if (eventType === 'continue') {
    status = 1
    actionContainer.classList.remove('d-none');
  }
}

/**
 * 通过id获取元素
 * @param {string} id
 * @returns {HTMLElement}
 */
function $id(id) {
  return document.getElementById(id);
}