diff --git a/public/index.html b/public/index.html index 2c61394..ef170cd 100644 --- a/public/index.html +++ b/public/index.html @@ -11,6 +11,7 @@
+
等级： @@ -36,8 +37,6 @@
- -
动作： @@ -51,6 +50,67 @@
+ + + +
diff --git a/src/dom.js b/src/dom.js index f7965c8..2af67c8 100644 --- a/src/dom.js +++ b/src/dom.js @@ -87,7 +87,6 @@ export function handlePlayCodeButtons() { actionButtons.forEach(item => { item.addEventListener('click', function () { const { code } = item.dataset; - sendMessage('play', code); }) }) @@ -156,3 +155,103 @@ export function changeButtonsDisplay(eventType) { 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; + }) + }) + difficulties.forEach(item => { + item.addEventListener('click', function () { + game.level = item.value - 0; + }) + }) + 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.totalScore = totalScore.value - 0 + game.count = count.value - 0 + game.gameTime = gameTime.value - 0 + setScores() + myInput.style.display = "none" + setDefaultStyle() + }) +} + +// 动作分支表 +export function setDirection(value){ + let directionDetail = document.getElementById("directionDetail") + let str = '' + for (let i = 0; i < value; i++) { + str += ` +
+
动作${ i + 1 }
+ + +
+ ` + } + directionDetail.innerHTML = str +} + +// 设置动作分支表 +export function setScores(){ + game.scores = [] + game.directions = [] + var directionTimes = document.getElementsByClassName("directionTimes") + var directionScores = document.getElementsByClassName("directionScores") + 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) + } + for (let time = 0; time < directionTimes.length; time++) { + const item = directionTimes[time].value - 0 + for (let j = 0; j < item; j++) { + game.directions.push(time) + } + } +} + +// 取消配置 +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" + }) + } +} diff --git a/src/index.js b/src/index.js index 7186fa2..25bb232 100644 --- a/src/index.js +++ b/src/index.js @@ -1,4 +1,4 @@ -import { setDefaultStyle, handleEventButtons, handlePlayCodeButtons,handleLevelButtons,handleModeButtons } from "./dom"; +import { setDefaultStyle, handleEventButtons, handlePlayCodeButtons,handleLevelButtons,handleModeButtons, openSettingTable,submitSetting,cancelSetting } from "./dom"; import { onMessage, setFrameStyle } from "./frame"; window.addEventListener('load', init, false) @@ -14,8 +14,11 @@ function init() { // 初始化dom 正式程序不需要 就删除掉 function initDom() { setDefaultStyle(); // 设置 等级/模式的默认样式 + openSettingTable(); // 配置表 handleLevelButtons(); // 点击切换等级 handleModeButtons(); // 点击切换模式 handleEventButtons(); // 按钮绑定事件 handlePlayCodeButtons(); // 事件play code 绑定事件 + submitSetting(); // 提交配置表 + cancelSetting(); // 取消配置表 }