diff --git a/public/index.html b/public/index.html index 5c6b5f5..30e3ced 100644 --- a/public/index.html +++ b/public/index.html @@ -11,17 +11,17 @@
- +
动作： - - - - - - + + + + + +
diff --git a/src/config.js b/src/config.js index c6d8915..8c851a4 100644 --- a/src/config.js +++ b/src/config.js @@ -1,4 +1,24 @@ +// 生成单一的动作构成数组 +const directions = (eventCode = 0) => { + const results = []; + for (let i = 0; i < 20; i++) { + results.push(eventCode) + } + return results; +} + export const game = { - width: 1068, - height: 600 + frame: { + width: 1068, + height: 600 + }, + count: 5, // 倒计时时长 + game: 60, // 游戏时长 + level: 0, + totalScore: 100, + totalTimes: 20, + scores: [ + { direction: 0, score: 5 }, + ], + directions: directions(), } diff --git a/src/frame.js b/src/frame.js index b9302d8..9d8b2f8 100644 --- a/src/frame.js +++ b/src/frame.js @@ -1,4 +1,5 @@ import { game } from './config'; +import { creatData } from './message'; let frame = document.getElementById('iframe'); let contentWindow = frame.contentWindow; @@ -7,15 +8,33 @@ let contentWindow = frame.contentWindow; export function setFrameStyle() { const html = document.documentElement; frame.style.width = html.clientWidth + 'px'; - frame.style.height = Math.round(html.clientWidth * game.height / game.width) + '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 () { - sendMessage(item.dataset.event); + 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); }) }) } @@ -24,6 +43,29 @@ export function handleEventButtons() { * 发送消息 * @param {string} type 消息类型 */ -function sendMessage(type) { - contentWindow.postMessage({ event: 'start' }, frame.src); +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'); + } } diff --git a/src/index.js b/src/index.js index e9857f5..d12fe4d 100644 --- a/src/index.js +++ b/src/index.js @@ -1,4 +1,4 @@ -import {handleEventButtons, setFrameStyle} from "./frame"; +import {handleEventButtons, handlePlayCodeButtons, setFrameStyle} from "./frame"; window.addEventListener('load', init, false) window.addEventListener('resize', setFrameStyle, false) @@ -6,4 +6,5 @@ window.addEventListener('resize', setFrameStyle, false) function init() { setFrameStyle(); handleEventButtons(); + handlePlayCodeButtons(); } diff --git a/src/message.js b/src/message.js index e69de29..def0289 100644 --- a/src/message.js +++ b/src/message.js @@ -0,0 +1,114 @@ +import { game } from './config'; +const { count, game: gameDuration, level, scores, directions, totalScore, totalTimes } = game; + +let currentScore = 0; // 当前得分 +let currentTimes = 10; // 当前次数 + +// 生成开始游戏消息需要的data数据 +const createStartData = () => { + const now = Date.now(); + const countFinishTime = now + count * 1000; // 倒计时结束时间 + const gameFinishTime = countFinishTime + gameDuration * 1000; // 游戏结束时间 + const data = { + event: "start", + data: { + count: { + finishTime: countFinishTime, // 倒计时结束的ms数 + duration: count, // 倒计时时长 + }, + game: { + finishTime: gameFinishTime, // 游戏结束的ms数 + duration: gameDuration, // 游戏时长 + totalScore, // 总分 + totalTimes, // 总次数 + level, // 等级 0->入门 1->简单 2->普通 3->困难 + config: { + scores, + directions // 游戏的动作构成队列 + } + }, + status: 1, // 游戏状态 0 1 2 + param: {}, // 额外个性化参数 + } + } + return data; +} + +/** + * 生成 暂停/继续 消息data数据 + * @param {number} code 0->暂停 1->继续 + * @returns {{}} + */ +const createPauseData = (code) => { + return { + event: code === 0 ? 'pause' : 'continue', + data: { status: code ===0 ? 3 : 1 } + } +} + +/** + * 生成暂停/继续消息data数据 + * @param {number} score 总得分 客户端传来的 + * @param {number} times 总次数 客户端传来的 + * @returns {{data: {score, times, param: {}, status: number}, event: string}} + */ +const createFinishData = (score=currentScore, times=currentTimes) => { + return { + event: 'finish', + data: { + score, // 得分 + times, // 次数 + status: 2, // 游戏状态 0 1 2 + param: {}, // 额外个性化参数 + } + } +} + +/** + * 生成 play消息 发送的data数据 + * @param {number} score 当前得分 + * @param {number} times 当前次数 + * @param {number} direction 事件code 0默认 共6个事件参数 0 1 2 3 4 5 + * @returns {{data: {score: number, times: number, param: {direction: number}, status: number}, event: string}} + */ +const createPlayData = ({ score=currentScore, times=currentTimes , direction=0 }) => { + return { + event: "play", + data: { + score, // 得分 + times, // 次数 + status: 1, // 游戏状态 0 1 2 + param: { + direction, // 0 1 2 3 4 5 共6中事件参数 + } + } + } +} + +// 生成提交的数据 +export const creatData = (eventType, ...args) => { + let data = null; + switch (eventType) { + case 'start': + data = createStartData() + break; + case 'pause': + data = createPauseData(0); + break; + case 'continue': + data = createPauseData(1); + break; + case 'finish': + data = createFinishData(); // TODO: + break; + case 'play': + data = createPlayData({direction: +args[0]}); + break; + default: + break; + } + if (!data) { + alert('时间类型参数有误，消息数据为空'); + } + return data; +}