diff --git a/.gitignore b/.gitignore index e450344..9b0008c 100644 --- a/.gitignore +++ b/.gitignore @@ -114,7 +114,8 @@ dist .LSOverride # Icon must end with two \r -Icon +Icon + # Thumbnails ._* @@ -208,3 +209,7 @@ fabric.properties # Android studio 3.1+ serialized cache file .idea/caches/build_file_checksums.ser +package-lock.json +yarn.lock +dist + diff --git a/.idea/.gitignore b/.idea/.gitignore new file mode 100644 index 0000000..e69de29 diff --git a/.idea/game-frame-template.iml b/.idea/game-frame-template.iml new file mode 100644 index 0000000..45ff042 --- /dev/null +++ b/.idea/game-frame-template.iml @@ -0,0 +1,13 @@ + + + + + + + + + + + + + \ No newline at end of file diff --git a/.idea/jsLibraryMappings.xml b/.idea/jsLibraryMappings.xml new file mode 100644 index 0000000..75737db --- /dev/null +++ b/.idea/jsLibraryMappings.xml @@ -0,0 +1,7 @@ + + + + + + + \ No newline at end of file diff --git a/.idea/misc.xml b/.idea/misc.xml new file mode 100644 index 0000000..ef6b0e2 --- /dev/null +++ b/.idea/misc.xml @@ -0,0 +1,6 @@ + + + + + \ No newline at end of file diff --git a/.idea/modules.xml b/.idea/modules.xml new file mode 100644 index 0000000..0e53da1 --- /dev/null +++ b/.idea/modules.xml @@ -0,0 +1,8 @@ + + + + + + + + \ No newline at end of file diff --git a/.idea/vcs.xml b/.idea/vcs.xml new file mode 100644 index 0000000..9661ac7 --- /dev/null +++ b/.idea/vcs.xml @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/package.json b/package.json new file mode 100644 index 0000000..0b78fed --- /dev/null +++ b/package.json @@ -0,0 +1,24 @@ +{ + "name": "game-frame-template", + "version": "1.0.0", + "description": "游戏父窗口模板", + "main": "webpack.config.js", + "dependencies": {}, + "devDependencies": { + "html-webpack-plugin": "^5.3.2", + "webpack": "^5.54.0", + "webpack-cli": "^4.8.0", + "webpack-dev-server": "^4.3.0" + }, + "scripts": { + "build": "webpack", + "dev": "webpack serve --mode development" + }, + "repository": { + "type": "git", + "url": "gitea@dd.tall.wiki:ccsens_fe/game-frame-template.git" + }, + "keywords": [], + "author": "", + "license": "ISC" +} diff --git a/public/index.html b/public/index.html new file mode 100644 index 0000000..5c6b5f5 --- /dev/null +++ b/public/index.html @@ -0,0 +1,30 @@ + + + + + + + <%= htmlWebpackPlugin.options.title %> + + + +
+
+ + + +
+
+ 动作： + + + + + + +
+
+
+ + + diff --git a/src/config.js b/src/config.js new file mode 100644 index 0000000..c6d8915 --- /dev/null +++ b/src/config.js @@ -0,0 +1,4 @@ +export const game = { + width: 1068, + height: 600 +} diff --git a/src/frame.js b/src/frame.js new file mode 100644 index 0000000..b9302d8 --- /dev/null +++ b/src/frame.js @@ -0,0 +1,29 @@ +import { game } from './config'; + +let frame = document.getElementById('iframe'); +let contentWindow = frame.contentWindow; + +// 设置iframe框架的样式 +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'; +} + +export function handleEventButtons() { + const eventButtons = document.querySelectorAll('div.events button'); + + eventButtons.forEach(item => { + item.addEventListener('click', function () { + sendMessage(item.dataset.event); + }) + }) +} + +/** + * 发送消息 + * @param {string} type 消息类型 + */ +function sendMessage(type) { + contentWindow.postMessage({ event: 'start' }, frame.src); +} diff --git a/src/index.js b/src/index.js new file mode 100644 index 0000000..e9857f5 --- /dev/null +++ b/src/index.js @@ -0,0 +1,9 @@ +import {handleEventButtons, setFrameStyle} from "./frame"; + +window.addEventListener('load', init, false) +window.addEventListener('resize', setFrameStyle, false) + +function init() { + setFrameStyle(); + handleEventButtons(); +} diff --git a/src/message.js b/src/message.js new file mode 100644 index 0000000..e69de29 diff --git a/webpack.config.js b/webpack.config.js new file mode 100644 index 0000000..be57123 --- /dev/null +++ b/webpack.config.js @@ -0,0 +1,22 @@ +const path = require('path'); +const HtmlWebpackPlugin = require('html-webpack-plugin'); + +module.exports = { + entry: './src/index.js', + output: { + filename: 'main.js', + path: path.resolve(__dirname, 'dist') + }, + + devServer: { + port: 6001, + hot: true + }, + plugins: [ + new HtmlWebpackPlugin({ + title: '游戏窗体模板', + template: 'public/index.html', + inject: 'body', + }) + ], +}