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