KANGFU_GAME
/
game-frame-template
7
0
Fork 0
Code Pull Requests Releases Activity
Browse Source

处理接受消息

master
wally 4 years ago
parent
de3b3ba7d6
commit
943e8afe36
4 changed files with 117 additions and 31 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 14
      public/index.html
  2. 76
      src/frame.js
  3. 3
      src/index.js
  4. 55
      src/message.js

14
public/index.html
View File

@ -8,19 +8,19 @@
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet"> <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet">
</head> </head>
<body> <body>
<div class="container p-3 clearfix"> <div class="container p-3 clearfix">
<div class="float-start events"> <div class="float-start events">
<button type="button" class="btn btn-primary btn-sm" data-event="start">开始</button> <button type="button" class="btn btn-primary btn-sm" data-event="start" id="start">开始</button>
<button type="button" class="btn btn-warning btn-sm" data-event="pause" data-status="0">暂停</button> <button type="button" class="btn btn-warning btn-sm d-none" id="pause" data-event="pause" data-status="0">暂停</button>
<button type="button" class="btn btn-danger btn-sm" data-event="finish">结束</button> <button type="button" class="btn btn-danger btn-sm d-none" id="finish" data-event="finish">结束</button>
</div> </div>
<div class="float-end actions"> <div class="float-end actions d-none" id="action-container">
动作： 动作：
<button type="button" class="btn btn-outline-primary btn-sm" data-code="0">0</button> <button type="button" class="btn btn-outline-primary btn-sm" data-code="0">0</button>
<button type="button" class="btn btn-outline-secondary btn-sm" data-code="1">1</button> <button type="button" class="btn btn-outline-secondary btn-sm" data-code="1">1</button>
<button type="button" class="btn btn-outline-success btn-sm" data-code="2">2</button> <button type="button" class="btn btn-outline-success btn-sm" data-code="2">2</button>
<button type="button" class="btn btn-outline-danger btn-sm" data-code="3">3</button> <button type="button" class="btn btn-outline-danger btn-sm" data-code="3">3</button>
<button type="button" class="btn btn-outline-warning btn-sm" data-code="4">4</button> <button type="button" class="btn btn-outline-warning btn-sm" data-code="4">4</button>
<button type="button" class="btn btn-outline-info btn-sm" data-code="5">5</button> <button type="button" class="btn btn-outline-info btn-sm" data-code="5">5</button>
</div> </div>
</div> </div>

76
src/frame.js
View File

@ -18,9 +18,14 @@ export function handleEventButtons() {
eventButtons.forEach(item => { eventButtons.forEach(item => {
item.addEventListener('click', function () { item.addEventListener('click', function () {
const { event } = item.dataset; const { event } = item.dataset;
if (event === 'pause' || event === 'continue') {
setPauseButtonStatus(item); switch (event) {
case 'pause':
case 'continue':
setPauseButtonStatus(item, +item.dataset.status);
break;
} }
changeButtonsDisplay(event);
sendMessage(event); sendMessage(event);
}) })
}) })
@ -39,22 +44,48 @@ export function handlePlayCodeButtons() {
}) })
} }
// 收到消息
export function onMessage() {
window.addEventListener('message', function(e) {
console.log(e);
if (e.source !== frame.src) return; // 来源
const { event } = e.data;
if (event === 'pause') { // 暂停
changeButtonsDisplay('pause');
sendMessage('pause');
} else if (event === 'continue') { // 继续
changeButtonsDisplay('continue');
sendMessage('continue');
} else if (event === 'finish') {
// 结束
// 回传finish信息
// 切换按钮状态
sendMessage('finish');
changeButtonsDisplay('finish');
}
}, false);
}
/** /**
* 发送消息 * 发送消息
* @param {string} type 消息类型 * @param {string} type 消息类型
*/ */
function sendMessage(type, ...args) { function sendMessage(type, ...args) {
const data = creatData(type, ...args); const data = creatData(type, ...args);
if (!data) {
return alert('错误: 发送消息数据为空');
}
contentWindow.postMessage(data, frame.src); contentWindow.postMessage(data, frame.src);
} }
/** /**
* 设置 暂停/继续 按钮的状态样式等 * 设置 暂停/继续 按钮的状态样式等
* @param {HTMLElement} element * @param {HTMLElement} element
* @param {number} type
*/ */
function setPauseButtonStatus(element) { function setPauseButtonStatus(element, type) {
const type = element.dataset.status; if (type === 0) { // 点击的是暂停
if (+type === 0) { // 点击的是暂停
element.dataset.status = '1'; element.dataset.status = '1';
element.dataset.event = 'continue'; element.dataset.event = 'continue';
element.textContent = '继续'; element.textContent = '继续';
@ -69,3 +100,38 @@ function setPauseButtonStatus(element) {
element.classList.add('btn-warning'); element.classList.add('btn-warning');
} }
} }
/**
* 切换按钮的显示状态
* @param eventType
*/
function changeButtonsDisplay(eventType) {
const start = $id('start');
const pause = $id('pause');
const finish = $id('finish');
const actionContainer = $id('action-container')
if (eventType === 'start') { // 点了开始
start.classList.add('d-none');
pause.classList.remove('d-none');
finish.classList.remove('d-none');
actionContainer.classList.remove('d-none');
} else if (eventType === 'finish') {
start.classList.remove('d-none');
pause.classList.add('d-none');
finish.classList.add('d-none');
actionContainer.classList.add('d-none');
} else if ((eventType === 'pause')) {
actionContainer.classList.add('d-none');
} else if (eventType === 'continue') {
actionContainer.classList.remove('d-none');
}
}
/**
* 通过id获取元素
* @param {string} id
* @returns {HTMLElement}
*/
function $id(id) {
return document.getElementById(id);
}

3
src/index.js
View File

@ -1,9 +1,10 @@
import {handleEventButtons, handlePlayCodeButtons, setFrameStyle} from "./frame"; import {handleEventButtons, handlePlayCodeButtons, onMessage, setFrameStyle} from "./frame";
window.addEventListener('load', init, false) window.addEventListener('load', init, false)
window.addEventListener('resize', setFrameStyle, false) window.addEventListener('resize', setFrameStyle, false)
function init() { function init() {
onMessage();
setFrameStyle(); setFrameStyle();
handleEventButtons(); handleEventButtons();
handlePlayCodeButtons(); handlePlayCodeButtons();

55
src/message.js
View File

@ -2,10 +2,13 @@ import { game } from './config';
const { count, game: gameDuration, level, scores, directions, totalScore, totalTimes } = game; const { count, game: gameDuration, level, scores, directions, totalScore, totalTimes } = game;
let currentScore = 0; // 当前得分 let currentScore = 0; // 当前得分
let currentTimes = 10; // 当前次数 let currentTimes = 0; // 当前次数
// 生成开始游戏消息需要的data数据 // 生成开始游戏消息需要的data数据
const createStartData = () => { const createStartData = () => {
currentScore = 0;
currentTimes = 0;
const now = Date.now(); const now = Date.now();
const countFinishTime = now + count * 1000; // 倒计时结束时间 const countFinishTime = now + count * 1000; // 倒计时结束时间
const gameFinishTime = countFinishTime + gameDuration * 1000; // 游戏结束时间 const gameFinishTime = countFinishTime + gameDuration * 1000; // 游戏结束时间
@ -66,23 +69,32 @@ const createFinishData = (score=currentScore, times=currentTimes) => {
/** /**
* 生成 play消息 发送的data数据 * 生成 play消息 发送的data数据
* @param {number} score 当前得分
* @param {number} times 当前次数
* @param {number} direction 事件code 0默认 共6个事件参数 0 1 2 3 4 5 * @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 }) => { const createPlayData = (direction= 0) => {
return { let data = null;
event: "play", if (validatePlayCode(direction, currentTimes)) { // 动作正确
data: { currentTimes += 1;
score, // 得分 const directionTarget = scores.find(item => item.direction === direction);
times, // 次数 if (!directionTarget) {
status: 1, // 游戏状态 0 1 2 alert('配置信息有误, 未找到事件分值')
param: { }
direction, // 0 1 2 3 4 5 共6中事件参数 currentScore += directionTarget.score
data = {
event: "play",
data: {
score: currentScore, // 得分
times: currentTimes, // 次数
status: 1, // 游戏状态 0 1 2
param: {
direction, // 0 1 2 3 4 5 共6中事件参数
}
} }
} }
} else {
alert('错误: 动作执行错误');
} }
return data;
} }
// 生成提交的数据 // 生成提交的数据
@ -99,16 +111,23 @@ export const creatData = (eventType, ...args) => {
data = createPauseData(1); data = createPauseData(1);
break; break;
case 'finish': case 'finish':
data = createFinishData(); // TODO: data = createFinishData();
break; break;
case 'play': case 'play':
data = createPlayData({direction: +args[0]}); data = createPlayData(+args[0]);
break; break;
default: default:
break; break;
} }
if (!data) {
alert('时间类型参数有误，消息数据为空');
}
return data; return data;
} }
/**
* 验证code是否是当前应该执行的动作代码
* @param code
* @returns {boolean}
*/
function validatePlayCode(code, currentTimes) {
return code === directions[currentTimes];
}

Write Preview
Loading…
Cancel
Save