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);
}

// 弹出配置表
export function openSettingTable() {
  var myModal = document.getElementById('myModal')
  var myInput = document.getElementById('myInput')

  myModal.addEventListener('click', function () {
    myInput.style.display = "block"
  })
}

// 配置参数
export function submitSetting(){
  var submit = document.getElementById("submit")
  var gameModes = document.getElementsByName("gameMode")
  var difficulties = document.getElementsByName("difficulty")
  gameModes.forEach(mode => {
    mode.addEventListener('click', function () {
      game.mode = mode.value - 0 || game.mode;
    })
  })
  difficulties.forEach(item => {
    item.addEventListener('click', function () {
      game.level = item.value - 0 || game.level;
    })
  })
  var totalTimes = document.getElementById("totalTimes")
  var totalScore = document.getElementById("totalScore")
  var count = document.getElementById("count")
  var gameTime = document.getElementById("gameTime")
  var directionScore = document.getElementById("directionScore")
  var directionTable = document.getElementById("directionTable")
  directionScore.addEventListener("blur", function(){
    directionTable.classList.remove('d-none');
    setDirection(directionScore.value - 0)
    if(!directionScore.value || directionScore.value === '0'){
      directionTable.classList.add('d-none');
    }
  })

  submit.addEventListener('click', function () {
    game.totalTimes = totalTimes.value - 0 || game.totalTimes
    game.totalScore = totalScore.value - 0 || game.totalScore
    game.count = count.value - 0 || game.count
    game.game = gameTime.value - 0 || game.game
    setScores()
    setActionSequences()
    myInput.style.display = "none"
    setDefaultStyle()
  })
}

// 动作分支表
export function setDirection(value){
  let directionDetail = document.getElementById("directionDetail")
  let str = ''
  for (let i = 0; i < value; i++) {
    str += `
      <div class="mb-3 d-flex flex-row align-items-center">
        <div class="form-label text-end" style="width: 180px">动作${ i }：</div>
        <input placeholder="动作分值" type="number" class="form-control directionScores">
      </div>
    `
  }
  directionDetail.innerHTML = str
}

// 设置动作分支表
export function setScores(){
  var directionScores = document.getElementsByClassName("directionScores")
  if(directionScores.length){
    game.scores = []
    for (let i = 0; i < directionScores.length; i++) {
      const score = directionScores[i];
      const item = {
        direction: 0, score: 0
      }
      item.direction = i
      item.score = score.value - 0
      game.scores.push(item)
    }
  }
}

// 设置动作序列表
export function setActionSequences(){
  var actionSequences = document.getElementById("actionSequences")
  const arr = actionSequences.value.split('')
  if(arr.length){
    game.directions = []
    arr.forEach(item => {
      if(isNaN(item)){
        game.directions.push(item - 0)
      }
    })
  }
}

// 判断是不是数字
export function isNaN(value) {
  return parseFloat(value).toString() !== "NaN";
}

// 取消配置
export function cancelSetting(){
  var cancel = document.getElementsByClassName("cancel")
    for (let i = 0; i < cancel.length; i++) {
      const item = cancel[i];
      item.addEventListener('click', function () {
        myInput.style.display = "none"
      })
    }
}