14 changed files with 164 additions and 1 deletions
@ -0,0 +1,13 @@ |
|||||
|
<?xml version="1.0" encoding="UTF-8"?> |
||||
|
<module type="WEB_MODULE" version="4"> |
||||
|
<component name="NewModuleRootManager"> |
||||
|
<content url="file://$MODULE_DIR$"> |
||||
|
<excludeFolder url="file://$MODULE_DIR$/temp" /> |
||||
|
<excludeFolder url="file://$MODULE_DIR$/.tmp" /> |
||||
|
<excludeFolder url="file://$MODULE_DIR$/tmp" /> |
||||
|
</content> |
||||
|
<orderEntry type="inheritedJdk" /> |
||||
|
<orderEntry type="sourceFolder" forTests="false" /> |
||||
|
<orderEntry type="library" name="bootstrap" level="application" /> |
||||
|
</component> |
||||
|
</module> |
||||
@ -0,0 +1,7 @@ |
|||||
|
<?xml version="1.0" encoding="UTF-8"?> |
||||
|
<project version="4"> |
||||
|
<component name="JavaScriptLibraryMappings"> |
||||
|
<file url="PROJECT" libraries="{bootstrap}" /> |
||||
|
<includedPredefinedLibrary name="Node.js Core" /> |
||||
|
</component> |
||||
|
</project> |
||||
@ -0,0 +1,6 @@ |
|||||
|
<?xml version="1.0" encoding="UTF-8"?> |
||||
|
<project version="4"> |
||||
|
<component name="WebPackConfiguration"> |
||||
|
<option name="mode" value="DISABLED" /> |
||||
|
</component> |
||||
|
</project> |
||||
@ -0,0 +1,8 @@ |
|||||
|
<?xml version="1.0" encoding="UTF-8"?> |
||||
|
<project version="4"> |
||||
|
<component name="ProjectModuleManager"> |
||||
|
<modules> |
||||
|
<module fileurl="file://$PROJECT_DIR$/.idea/game-frame-template.iml" filepath="$PROJECT_DIR$/.idea/game-frame-template.iml" /> |
||||
|
</modules> |
||||
|
</component> |
||||
|
</project> |
||||
@ -0,0 +1,6 @@ |
|||||
|
<?xml version="1.0" encoding="UTF-8"?> |
||||
|
<project version="4"> |
||||
|
<component name="VcsDirectoryMappings"> |
||||
|
<mapping directory="$PROJECT_DIR$" vcs="Git" /> |
||||
|
</component> |
||||
|
</project> |
||||
@ -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" |
||||
|
} |
||||
@ -0,0 +1,30 @@ |
|||||
|
<!doctype html> |
||||
|
<html lang="en"> |
||||
|
<head> |
||||
|
<meta charset="UTF-8"> |
||||
|
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> |
||||
|
<meta http-equiv="X-UA-Compatible" content="ie=edge"> |
||||
|
<title><%= htmlWebpackPlugin.options.title %></title> |
||||
|
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet"> |
||||
|
</head> |
||||
|
<body> |
||||
|
<div class="container p-3 clearfix"> |
||||
|
<div class="float-start events"> |
||||
|
<button type="button" class="btn btn-primary btn-sm" data-event="start">开始</button> |
||||
|
<button type="button" class="btn btn-secondary btn-sm" data-event="pause">暂停</button> |
||||
|
<button type="button" class="btn btn-danger btn-sm" data-event="finish">结束</button> |
||||
|
</div> |
||||
|
<div class="float-end actions"> |
||||
|
动作： |
||||
|
<button type="button" class="btn btn-outline-primary btn-sm" data-action="0">0</button> |
||||
|
<button type="button" class="btn btn-outline-secondary btn-sm" data-action="1">1</button> |
||||
|
<button type="button" class="btn btn-outline-success btn-sm" data-action="2">2</button> |
||||
|
<button type="button" class="btn btn-outline-danger btn-sm" data-action="3">3</button> |
||||
|
<button type="button" class="btn btn-outline-warning btn-sm" data-action="4">4</button> |
||||
|
<button type="button" class="btn btn-outline-info btn-sm" data-action="5">5</button> |
||||
|
</div> |
||||
|
</div> |
||||
|
<hr /> |
||||
|
<iframe id="iframe" src="http://localhost:5500/dist/" frameborder="0" class="d-block"></iframe> |
||||
|
</body> |
||||
|
</html> |
||||
@ -0,0 +1,4 @@ |
|||||
|
export const game = { |
||||
|
width: 1068, |
||||
|
height: 600 |
||||
|
} |
||||
@ -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); |
||||
|
} |
||||
@ -0,0 +1,9 @@ |
|||||
|
import {handleEventButtons, setFrameStyle} from "./frame"; |
||||
|
|
||||
|
window.addEventListener('load', init, false) |
||||
|
window.addEventListener('resize', setFrameStyle, false) |
||||
|
|
||||
|
function init() { |
||||
|
setFrameStyle(); |
||||
|
handleEventButtons(); |
||||
|
} |
||||
@ -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', |
||||
|
}) |
||||
|
], |
||||
|
} |
||||
Loading…
Reference in new issue