diff --git a/public/index.html b/public/index.html index 78e0f17..2c61394 100644 --- a/public/index.html +++ b/public/index.html @@ -8,23 +8,49 @@ -
-
- - - -
-
- 动作： - - - - - - +
+
+
+
+ 等级： + + + + +
+
+ 模式： + + +
+
+ +
+ + + + +
+ +
最终得分:
+
+
+ + + +
+ 动作： + + + + + + +
+
+ +
-
- diff --git a/src/config.js b/src/config.js index caca57a..6ac836c 100644 --- a/src/config.js +++ b/src/config.js @@ -17,9 +17,11 @@ export const game = { }, count: 5, // 倒计时时长 game: 60, // 游戏时长 - level: 0, + level: 1, // 等级 1->入门 2->简单 3->普通 4->困难 totalScore: 100, totalTimes: 20, + mode: 0, // 模式 0-> 正常模式 1-> 演示模式 + scores: [ { direction: 0, score: 5 }, ], diff --git a/src/dom.js b/src/dom.js index eb1dfe0..f7965c8 100644 --- a/src/dom.js +++ b/src/dom.js @@ -1,7 +1,64 @@ // 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'); @@ -9,6 +66,7 @@ export function handleEventButtons() { eventButtons.forEach(item => { item.addEventListener('click', function () { const { event } = item.dataset; + if(event === 'again') location.reload(); switch (event) { case 'pause': @@ -64,18 +122,28 @@ export function setPauseButtonStatus(type) { 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') { - start.classList.remove('d-none'); + 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'); } } diff --git a/src/frame.js b/src/frame.js index 3fd696b..b1f58cc 100644 --- a/src/frame.js +++ b/src/frame.js @@ -19,8 +19,10 @@ export function onMessage() { console.log('父-接受：', e.data); // if (e.source !== frame.src) return; // 来源 const { event } = e.data; - if (event === 'pause' || event === 'continue' || event === 'finish') { // 暂停 + if(event === 'finish'){ + game.totalScore = e.data.data.score + } sendMessage(event); changeButtonsDisplay(event); // DEBUG: 改变按钮状态 正式使用不需要的话 就删除掉 } @@ -30,7 +32,9 @@ export function onMessage() { if (event === 'play') { onPlayMessage(e.data.data); } - + if (event === 'again') { + location.reload(); + } }, false); } @@ -40,6 +44,7 @@ export function onMessage() { */ export function sendMessage(type, ...args) { const data = creatData(type, ...args); + if(data.event === 'again') return if (!data) { return console.error('错误: 发送消息数据为空'); // DEBUG: } diff --git a/src/index.js b/src/index.js index 4ac69f6..7186fa2 100644 --- a/src/index.js +++ b/src/index.js @@ -1,4 +1,4 @@ -import { handleEventButtons, handlePlayCodeButtons } from "./dom"; +import { setDefaultStyle, handleEventButtons, handlePlayCodeButtons,handleLevelButtons,handleModeButtons } from "./dom"; import { onMessage, setFrameStyle } from "./frame"; window.addEventListener('load', init, false) @@ -6,13 +6,16 @@ window.addEventListener('resize', setFrameStyle, false) function init() { onMessage(); // 监听处理接受到的message - setFrameStyle(); // 设置frame宽高 + // setFrameStyle(); // 设置frame宽高 initDom(); } // 初始化dom 正式程序不需要 就删除掉 function initDom() { + setDefaultStyle(); // 设置 等级/模式的默认样式 + handleLevelButtons(); // 点击切换等级 + handleModeButtons(); // 点击切换模式 handleEventButtons(); // 按钮绑定事件 handlePlayCodeButtons(); // 事件play code 绑定事件 } diff --git a/src/message.js b/src/message.js index c6d3b10..4f6ac92 100644 --- a/src/message.js +++ b/src/message.js @@ -1,6 +1,6 @@ import { game } from './config'; -const { count, game: gameDuration, level, scores, directions, totalScore, totalTimes } = game; +const { count, game: gameDuration, scores, directions, totalScore, totalTimes } = game; let currentScore = 0; // 当前得分 let currentTimes = 0; // 当前次数 @@ -9,7 +9,6 @@ let currentTimes = 0; // 当前次数 const createStartData = () => { currentScore = 0; currentTimes = 0; - const now = Date.now(); const countFinishTime = now + count * 1000; // 倒计时结束时间 const gameFinishTime = countFinishTime + gameDuration * 1000; // 游戏结束时间 @@ -25,7 +24,8 @@ const createStartData = () => { duration: gameDuration, // 游戏时长 totalScore, // 总分 totalTimes, // 总次数 - level, // 等级 0->入门 1->简单 2->普通 3->困难 + level: game.level, // 等级 0->入门 1->简单 2->普通 3->困难 + mode: game.mode, // 模式 0-> 正常模式 1-> 演示模式 config: { scores, directions // 游戏的动作构成队列 @@ -98,6 +98,18 @@ const createPlayData = (direction= 0) => { return data; } +/** + * 生成 再来一次 消息data数据 + * @param {number} code 0->暂停 1->继续 + * @returns {{}} + */ +const createAgainData = () => { + return { + event: 'again', + data: {} + } +} + // 生成提交的数据 export const creatData = (eventType, ...args) => { let data = null; @@ -117,6 +129,9 @@ export const creatData = (eventType, ...args) => { case 'play': data = createPlayData(+args[0]); break; + case 'again': + data = createAgainData(); + break; default: break; }