测试模块

index.html

@@ -95,10 +95,7 @@
 		canvas.width = document.body.clientWidth * (window.devicePixelRatio || 1)
 		canvas.height = document.body.clientHeight * (window.devicePixelRatio || 1)
 		var main = new output.Game(canvas);
-		var mouseEvent = main.stage.onMouseEvent.bind(main.stage);
-		canvas.addEventListener("touchstart", mouseEvent, false);
-		canvas.addEventListener('touchmove', mouseEvent, false);
-		canvas.addEventListener('touchend', mouseEvent, false);
+		main.initWebEvent();
 		window.stage = main.stage
 	})
 </script>

package.json

 {
-  "name": "game_template",
-  "version": "0.0.1",
-  "description": "game_template",
+  "name": "receive_game",
+  "version": "1.0.0",
+  "description": "接红包基础模版",
   "main": "released/output.js",
   "module": "released/output.module.js",
   "scripts": {
@@ -22,7 +22,6 @@
     "@rollup/plugin-json": "^4.1.0",
     "@rollup/plugin-node-resolve": "^13.1.1",
     "@rollup/plugin-typescript": "^8.3.0",
-    "address": "^1.2.0",
     "ali-oss": "^4.11.4",
     "chalk": "^2.3.0",
     "co": "^4.6.0",
@@ -47,8 +46,9 @@
     "rollup-plugin-serve": "^1.1.0",
     "rollup-plugin-terser": "^7.0.2",
     "tslint": "^5.9.1",
-    "typescript": "^4.5.4"
+    "typescript": "^4.5.4",
+    "address": "^1.2.0"
   },
-  "author": "MrKwon",
+  "author": "haiyoucuv",
   "license": "ISC"
 }

scripts/flushRes.js

@@ -8,38 +8,45 @@ const files = fs.readdirSync(readPath);
 const obj = { groups: [] };//每项包括keys合name
 
 files.forEach(function (file) {
-    //路径
-    let fPath = path.join(readPath, file);
-    //只处理文件夹
-    if (fs.statSync(fPath).isDirectory()) {
-        //继续读每个子文件夹，json和png名字有相同的，只留json，
-	    let sonFiles = fs.readdirSync(fPath);
-	    //没有文件
-        if (!sonFiles.length) return
-        //取出所有json
-	    const jsons = sonFiles.filter((f) => {
-		    return f.substr(-5) === ".json"
-	    });
-	    //去掉json所带png的图片
-        sonFiles = sonFiles.filter((f) => { return jsons.indexOf(f.substring(0, f.length - 4) + ".json") === -1 })
-        //去掉mac上的缓存文件
-        sonFiles = sonFiles.filter((f) => { return f !== '.DS_Store' })
-	    const group = {
-		    keys: "",
-		    name: file
-	    };
-	    for (let i = 0; i < sonFiles.length; i++) {
-            if (i !== 0) group.keys += ",";
-            group.keys += sonFiles[i]
-        }
-        obj.groups.push(group)
-    }
+	//路径
+	let fPath = path.join(readPath, file);
+	//只处理文件夹
+	if (fs.statSync(fPath).isDirectory()) {
+		//继续读每个子文件夹，json和png名字有相同的，只留json，
+		let sonFiles = fs.readdirSync(fPath);
+		//没有文件
+		if (!sonFiles.length) return;
+		//取出所有json
+		const jsons = sonFiles.filter((f) => {
+			return f.substr(-5) === ".json";
+		});
+		//去掉json所带png的图片
+		sonFiles = sonFiles.filter((f) => { return jsons.indexOf(f.substring(0, f.length - 4) + ".json") === -1 });
+		//去掉mac上的缓存文件
+		sonFiles = sonFiles.filter((f) => { return f !== '.DS_Store' });
+		const group = {
+			keys: "",
+			name: file,
+		};
+		for (let i = 0; i < sonFiles.length; i++) {
+			if (i !== 0) group.keys += ",";
+			group.keys += sonFiles[i];
+		}
+		obj.groups.push(group);
+	}
 })
-obj.path="./resource/"
-console.log("资源更新完成")
+
+obj.path="./resource/";
+
+const writeStr = JSON.stringify(obj, "", "\t");
 //生成json
-fs.writeFileSync(readPath + "res.json", JSON.stringify(obj, "", "\t"));
+fs.writeFileSync(readPath + "res.json", writeStr);
 //TS也更新
 const endPath = './src/';
-const endFile = `export const ResJson = ${JSON.stringify(obj, "", "\t")}`;
+const endFile = `export const ResJson = ${writeStr.replace(
+	`"path": "./resource/"`,
+	`"path": location.origin + "/resource/"`
+)}`;
 fs.writeFileSync(endPath + "ResJson.ts", endFile);
+
+console.log("资源更新完成");

src/Game.ts

@@ -138,6 +138,13 @@ export class Game {
 		changeScene(IndexScene, { from: "main" });
 	}
 
+	initWebEvent(){
+		const mouseEvent = this.stage.onMouseEvent.bind(this.stage);
+		this.canvas.addEventListener("touchstart", mouseEvent, false);
+		this.canvas.addEventListener('touchmove', mouseEvent, false);
+		this.canvas.addEventListener('touchend', mouseEvent, false);
+	}
+
 	run() {
 		this._pause = false;
 		// @ts-ignore Tween计时清零

test/index.html

+<!DOCTYPE html>
+<html lang="zh">
+
+<head>
+    <meta charset="UTF-8">
+    <title>new_game_template</title>
+    <meta name="viewport"
+          content="width=device-width,initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no"/>
+    <meta name="apple-mobile-web-app-capable" content="yes"/>
+    <meta name="full-screen" content="true"/>
+    <meta name="screen-orientation" content="portrait"/>
+    <meta name="x5-fullscreen" content="true"/>
+    <meta name="360-fullscreen" content="true"/>
+
+    <script src="//yun.duiba.com.cn/js-libs/rem/1.1.3/rem.min.js"></script>
+
+    <!--<script crossorigin src="//yun.duiba.com.cn/db_games/libs220606/react/react.development.js"></script>-->
+    <script crossorigin src="//yun.duiba.com.cn/db_games/libs220606/react/react.production.min.js"></script>
+
+    <!--<script crossorigin src="//yun.duiba.com.cn/db_games/libs220606/react/react-dom.development.js"></script>-->
+    <script crossorigin src="//yun.duiba.com.cn/db_games/libs220606/react/react-dom.production.min.js"></script>
+
+    <!-- polyfill -->
+    <script src="//yun.duiba.com.cn/db_games/libs0924/polyfill_220525.js" crossorigin="anonymous"></script>
+
+    <!-- 渲染引擎 -->
+    <script src="//yun.duiba.com.cn/db_games/libs0924/fyge2044.min.js" crossorigin="anonymous"></script>
+    <!--<script src="libs/fyge.min.js" crossorigin="anonymous"></script>-->
+
+    <!-- svga解析库 -->
+    <script src="//yun.duiba.com.cn/db_games/libs0924/svgaParser.minWeb.js" crossorigin="anonymous"></script>
+
+    <!-- 放声音的 -->
+    <script src="//yun.duiba.com.cn/db_games/libs0924/howler.min.js" crossorigin="anonymous"></script>
+
+</head>
+
+<body>
+<noscript>
+    You need to enable JavaScript to run this app.
+</noscript>
+<div id="root"></div>
+<!--
+    This HTML file is a template.
+    If you open it directly in the browser, you will see an empty page.
+
+    You can add webfonts, meta tags, or analytics to this file.
+    The build step will place the bundled scripts into the <body> tag.
+
+    To begin the development, run `npm start` or `yarn start`.
+    To create a production bundle, use `npm run build` or `yarn build`.
+  -->
+<script src="./build/output.js" crossorigin="anonymous"></script>
+</body>
+
+</html>

test/package.json

+{
+  "name": "test",
+  "version": "1.0.0",
+  "description": "test",
+  "scripts": {
+    "testDev": "rollup -c rollup.test.mjs -w"
+  },
+  "peerDependencies": {
+    "react": "^17.0.2",
+    "react-dom": "17.0.2"
+  },
+  "devDependencies": {
+    "@babel/preset-env": "^7.18.2",
+    "@babel/preset-react": "^7.17.12",
+    "@rollup/plugin-json": "^4.1.0",
+    "@rollup/plugin-node-resolve": "^13.1.1",
+    "less-loader": "^11.0.0",
+    "rollup": "^2.61.1",
+    "rollup-plugin-commonjs": "^10.1.0",
+    "rollup-plugin-livereload": "^2.0.5",
+    "rollup-plugin-progress": "^1.1.2",
+    "rollup-plugin-serve": "^1.1.0",
+    "less": "^4.1.2",
+    "rollup-plugin-styles": "^4.0.0",
+    "@rollup/plugin-babel": "^5.3.1",
+    "rollup-plugin-peer-deps-external": "^2.2.4"
+  },
+  "author": "haiyoucuv",
+  "license": "ISC"
+}

test/rollup.test.mjs

+/*
+ * rollup.test.mjs
+ * Created by 还有醋v on 2022/6/6.
+ * Copyright © 2021 haiyoucuv. All rights reserved.
+ */
+
+import json from "@rollup/plugin-json";
+import resolve from "@rollup/plugin-node-resolve";
+import commonjs from "rollup-plugin-commonjs";
+import livereload from "rollup-plugin-livereload";
+import progress from "rollup-plugin-progress";
+import serve from "rollup-plugin-serve";
+import babel from "@rollup/plugin-babel";
+import peerDepsExternal from "rollup-plugin-peer-deps-external";
+import styles from "rollup-plugin-styles";
+
+export default {
+	input: "src/app.jsx",
+	cache: true,
+	output: {
+		file: "build/output.js",
+		format: "umd",
+		sourcemap: true,
+	},
+	external: [
+		'react',
+		'react-dom',
+		'classname',
+		'**/node_modules/**'
+	],
+	plugins: [
+		peerDepsExternal(),
+		progress(),
+		styles(),
+		babel.babel({
+			presets: [
+				"@babel/preset-env",
+				"@babel/preset-react"
+			],
+			babelHelpers: "bundled"
+		}),
+		resolve({
+			jsnext: true,
+			preferBuiltins: true,
+			browser: true,
+			extensions: [".js", ".jsx"],
+		}),
+		commonjs({
+			extensions: [".js", ".jsx"],
+		}),
+		json(),
+		livereload(),
+	],
+};

test/src/GamePage/GamePage.jsx

+/*
+ * GamePage.jsx
+ * Created by 还有醋v on 2022/6/6.
+ * Copyright © 2022 haiyoucuv. All rights reserved.
+ */
+
+
+import React, { Component } from 'react';
+
+import { Game } from "../../../build/output.module";
+
+import './GamePage.less';
+
+export default class GamePage extends Component {
+	
+	div = null;
+	game = null;
+	
+	constructor(props) {
+		super(props);
+		this.state = {};
+	}
+	
+	componentDidMount() {
+		const canvas = document.createElement("canvas");
+		canvas.style = "width:100%;height:100%";
+		this.div.appendChild(canvas);
+		this.game = new Game(canvas);
+		this.game.initWebEvent();
+	}
+	
+	componentWillUnmount() {
+		this.game.destroy()
+	}
+	
+	render() {
+		return <div
+			className="game-page"
+			ref={(div) => this.div = div}
+		/>;
+	}
+}

test/src/GamePage/GamePage.less

+/*
+ * Game.less
+ * Created by 还有醋v on 2022/6/6.
+ * Copyright © 2022 haiyoucuv. All rights reserved.
+ */
+
+.game-page{
+  width: 100%;
+  height: 100%;
+
+}

test/src/app.jsx

+import GamePage from "./GamePage/GamePage";
+import React, { Component } from "react";
+import ReactDOM from "react-dom";
+import "./app.less";
+
+class App extends Component {
+	
+	componentDidMount() {
+	
+	}
+	
+	render() {
+		return <GamePage/>;
+	}
+}
+
+ReactDOM.render(<App/>, document.getElementById("root"));

test/src/app.less

+
+* {
+  margin: 0;
+  padding: 0;
+}
+html,
+body {
+  font-size: 24px;
+  width: 100%;
+  height: 100%;
+  -webkit-text-size-adjust: 100% !important;
+  text-size-adjust: 100% !important;
+  -moz-text-size-adjust: 100% !important;
+
+  overflow: hidden;
+}