1 ano atrás · a78277b9bf
--- a/game_test1/.prettierrc
+++ b/game_test1/.prettierrc
@@ -0,0 +1,9 @@
 
				+{
			
 
				+    "printWidth": 2000,
			
 
				+    "tabWidth": 2,
			
 
				+    "useTabs": true,
			
 
				+    "singleQuote": false,
			
 
				+    "semi": true,
			
 
				+    "trailingComma": "none",
			
 
				+    "bracketSpacing": true
			
 
				+}
			
--- a/game_test1/index.html
+++ b/game_test1/index.html
@@ -1,20 +1,24 @@
 
				 <!DOCTYPE html>
			
 
				 <html>
			
 
				-  <head>
			
 
				-    <meta charset="UTF-8" />
			
 
				-    <script>
			
 
				-      var coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') ||
			
 
				-        CSS.supports('top: constant(a)'))
			
 
				-      document.write(
			
 
				-        '<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' +
			
 
				-        (coverSupport ? ', viewport-fit=cover' : '') + '" />')
			
 
				-    </script>
			
 
				-    <title></title>
			
 
				-    <!--preload-links-->
			
 
				-    <!--app-context-->
			
 
				-  </head>
			
 
				-  <body>
			
 
				-    <div id="app"><!--app-html--></div>
			
 
				-    <script type="module" src="/src/main.ts"></script>
			
 
				-  </body>
			
 
				-</html>
			
 
				+
			
 
				+<head>
			
 
				+  <meta charset="UTF-8" />
			
 
				+  <script>
			
 
				+    var coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') ||
			
 
				+      CSS.supports('top: constant(a)'))
			
 
				+    document.write(
			
 
				+      '<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' +
			
 
				+      (coverSupport ? ', viewport-fit=cover' : '') + '" />')
			
 
				+  </script>
			
 
				+  <title></title>
			
 
				+  <!--preload-links-->
			
 
				+  <!--app-context-->
			
 
				+</head>
			
 
				+
			
 
				+<body>
			
 
				+  <div id="app"><!--app-html-hilo--></div>
			
 
				+  <script type="module" src="/src/libs/hilo/hilo-standalone.min.js"></script>
			
 
				+  <script type="module" src="/src/main.ts"></script>
			
 
				+</body>
			
 
				+
			
 
				+</html>
			
--- a/game_test1/src/libs/hilo/hilo-standalone.min.js
+++ b/game_test1/src/libs/hilo/hilo-standalone.min.js
--- a/game_test1/src/main.ts
+++ b/game_test1/src/main.ts
@@ -1,5 +1,6 @@
 
				 import { createSSRApp } from "vue";
			
 
				 import App from "./App.vue";
			
 
				+
			
 
				 export function createApp() {
			
 
				   const app = createSSRApp(App);
			
 
				   return {
			
--- a/game_test1/src/pages/hilo/index.vue
+++ b/game_test1/src/pages/hilo/index.vue
@@ -1,28 +1,64 @@
 
				 <template>
			
 
				-  <view class="page">
			
 
				-   <view class="canvas_box">
			
 
				-    <view class="tc p20">canvas演示</view>
			
 
				-    <canvas canvas-id="canvasId" class="canvas" />
			
 
				-   </view>
			
 
				-  </view>
			
 
				+	<view class="page">
			
 
				+		<view class="canvas_box">
			
 
				+			<view class="tc p20">canvas演示</view>
			
 
				+			<!-- <canvas id="canvasId" class="canvas" /> -->
			
 
				+			<div id="game-container"></div>
			
 
				+		</view>
			
 
				+	</view>
			
 
				 </template>
			
 
				 
			
 
				 <script setup lang="ts">
			
 
				-import { ref } from 'vue'
			
 
				-const title = ref('Hello')
			
 
				+import { onMounted, ref } from "vue";
			
 
				+import { onLoad } from "@dcloudio/uni-app";
			
 
				+import Page from "../../libs/pages/Page";
			
 
				+
			
 
				+const title = ref("Hello");
			
 
				+let stage;
			
 
				+let gameContainer = document.getElementById("game-container");
			
 
				+const init = () => {
			
 
				+	console.log("#debug#🚀 ~ file: index.vue:17 ~ init ~ init:开始啊", Hilo);
			
 
				+	stage = new Hilo.Stage({
			
 
				+		renderType: "canvas",
			
 
				+		container: gameContainer,
			
 
				+		width: 320,
			
 
				+		height: 480
			
 
				+	});
			
 
				+	console.log("#debug#🚀 ~ file: index.vue:24 ~ init ~ stage:", stage);
			
 
				+
			
 
				+	var ticker = new Hilo.Ticker(60);
			
 
				+	ticker.addTick(stage);
			
 
				+	ticker.start();
			
 
				+
			
 
				+	var font = "14px arial";
			
 
				+	var content = "Hello World! Hilo是一款HTML5 2D游戏引擎，欢迎使用。";
			
 
				+	var text = new Hilo.Text({
			
 
				+		font: font,
			
 
				+		text: content,
			
 
				+		lineSpacing: 0,
			
 
				+		width: 250,
			
 
				+		height: 100,
			
 
				+		x: 40,
			
 
				+		y: 50
			
 
				+	}).addTo(stage);
			
 
				+};
			
 
				+
			
 
				+onLoad(async () => {
			
 
				+	await Page.Yc.delay(1000);
			
 
				+	init();
			
 
				+});
			
 
				 </script>
			
 
				 
			
 
				 <style lang="scss" scoped>
			
 
				-.page{
			
 
				-    .canvas_box{
			
 
				-        background-color: #f5f5ff;
			
 
				-        height: 100vh;
			
 
				-        .canvas{
			
 
				-          width: 100%;
			
 
				-          height: 500rpx;
			
 
				-          background-color: #fff;
			
 
				-        }
			
 
				-    }
			
 
				+.page {
			
 
				+	.canvas_box {
			
 
				+		background-color: #f5f5ff;
			
 
				+		height: 100vh;
			
 
				+		.canvas {
			
 
				+			width: 100%;
			
 
				+			height: 500rpx;
			
 
				+			background-color: #fff;
			
 
				+		}
			
 
				+	}
			
 
				 }
			
 
				-
			
 
				 </style>
			
--- a/hilo_html/index.html
+++ b/hilo_html/index.html
@@ -0,0 +1,158 @@
 
				+<!doctype html>
			
 
				+<html>
			
 
				+
			
 
				+<head>
			
 
				+    <meta charset="utf-8">
			
 
				+    <meta name="viewport" content="user-scalable=no, width=device-width, minimum-scale=1, maximum-scale=1" />
			
 
				+    <title>Text - Hilo Example</title>
			
 
				+    <link rel="stylesheet" type="text/css" href="./static/css/sytle.css">
			
 
				+    <script type="text/javascript" src="./static/js/hilo-standalone.min.js"></script>
			
 
				+    <img src="./static/images/fish.png" alt="" id="fish" style="display:none">
			
 
				+
			
 
				+</head>
			
 
				+
			
 
				+<body>
			
 
				+
			
 
				+    <div id="game-container"></div>
			
 
				+    <div style="padding: 20px; text-align: center;">
			
 
				+        <button onclick="reset()">重播</button>
			
 
				+    </div>
			
 
				+    <script type="text/javascript" src="./static/js/demo.js"></script>
			
 
				+    <script type="text/javascript">
			
 
				+
			
 
				+        var stage = new Hilo.Stage({
			
 
				+            renderType: renderType,
			
 
				+            container: gameContainer,
			
 
				+            width: stageWidth,
			
 
				+            height: stageHeight
			
 
				+        });
			
 
				+
			
 
				+        //start stage ticker
			
 
				+        var ticker = new Hilo.Ticker(24);
			
 
				+        ticker.addTick(stage);
			
 
				+        ticker.start();
			
 
				+
			
 
				+        //添加背景
			
 
				+        var bmp = new Hilo.Bitmap({
			
 
				+            image: './static/images/map.jpg',
			
 
				+            rect: [0, 0, stageWidth, stageHeight],
			
 
				+            x: 0,
			
 
				+            y: 0
			
 
				+        }).addTo(stage);
			
 
				+
			
 
				+
			
 
				+
			
 
				+
			
 
				+
			
 
				+        var zidanImg = [];
			
 
				+        var zidan = [];
			
 
				+        var zidanStep = 0;
			
 
				+        for (i = 0; i < 3; i++) {
			
 
				+            zidanImg[i] = new Hilo.TextureAtlas({
			
 
				+                image: './static/images/zidan.png',
			
 
				+                width: 64,
			
 
				+                height: 64,
			
 
				+                frames: {
			
 
				+                    frameWidth: 64,
			
 
				+                    frameHeight: 64,
			
 
				+                    numFrames: 1
			
 
				+                },
			
 
				+                sprites: {
			
 
				+                    zidanImg: { from: 0, to: 0 }
			
 
				+                }
			
 
				+            });
			
 
				+
			
 
				+
			
 
				+
			
 
				+            zidan = new Hilo.Sprite({
			
 
				+                frames: zidanImg[i].getSprite('zidanImg'),
			
 
				+                x: 10 * (i + 1),
			
 
				+                y: 100 + 10 * (i + 1),
			
 
				+                interval: 10,
			
 
				+                timeBased: false,
			
 
				+                loop: true,
			
 
				+                onUpdate: function () {
			
 
				+                    if (this.x < 200) {
			
 
				+                        // console.log("#debug#🚀 ~ file: index.html:84 ~ init ~ this:", this.style)
			
 
				+                        if (this.x > stage.width - this.pivotX) {
			
 
				+                            this.x = 0;
			
 
				+                        } else {
			
 
				+                            var paoWuXianRes = paoWuXian(this.x + 3);
			
 
				+                            // console.log("#debug#🚀 ~ file: index.html:88 ~ init ~ paoWuXianRes:", paoWuXianRes)
			
 
				+                            this.x = paoWuXianRes.x;
			
 
				+                            // this.y = paoWuXianRes.y;
			
 
				+                            //this.x += 3;
			
 
				+
			
 
				+                        }
			
 
				+                    } else {
			
 
				+                        manStart = true;
			
 
				+                    }
			
 
				+
			
 
				+
			
 
				+                }
			
 
				+            }).addTo(stage);
			
 
				+            //text wrapped in dom element
			
 
				+        }
			
 
				+
			
 
				+        // 子弹
			
 
				+
			
 
				+
			
 
				+
			
 
				+
			
 
				+
			
 
				+        //init texture atlas
			
 
				+        var atlas = new Hilo.TextureAtlas({
			
 
				+            image: './static/images/man.png',
			
 
				+            width: 100,
			
 
				+            height: 88,
			
 
				+            frames: {
			
 
				+                frameWidth: 100,
			
 
				+                frameHeight: 88,
			
 
				+                numFrames: 1
			
 
				+            },
			
 
				+            sprites: {
			
 
				+                fish: { from: 0, to: 0 }
			
 
				+            }
			
 
				+        });
			
 
				+        var manStart = false;
			
 
				+        var fish = new Hilo.Sprite({
			
 
				+            frames: atlas.getSprite('fish'),
			
 
				+            x: 0,
			
 
				+            y: 300,
			
 
				+            interval: 6,
			
 
				+            timeBased: false,
			
 
				+            loop: true,
			
 
				+            onUpdate: function () {
			
 
				+                if (manStart) {
			
 
				+                    if (this.x < 200) {
			
 
				+                        this.x += 3;
			
 
				+                        this.y -= 3;
			
 
				+                    }
			
 
				+                }
			
 
				+
			
 
				+            }
			
 
				+        }).addTo(stage);
			
 
				+
			
 
				+        function manStart() {
			
 
				+            manStart = true;
			
 
				+        }
			
 
				+
			
 
				+        function reset() {
			
 
				+            fish.x = 0;
			
 
				+            fish.y = 300;
			
 
				+        }
			
 
				+        function paoWuXian(x) {
			
 
				+
			
 
				+            // var y = 1 * x * x + 1 * x + 2;
			
 
				+            return {
			
 
				+                x, y: 100
			
 
				+            }
			
 
				+
			
 
				+        }
			
 
				+
			
 
				+
			
 
				+
			
 
				+    </script>
			
 
				+</body>
			
 
				+
			
 
				+</html>
			
--- a/hilo_html/static/css/sytle.css
+++ b/hilo_html/static/css/sytle.css
@@ -0,0 +1,4 @@
 
				+*{
			
 
				+    padding: 0;
			
 
				+    margin: 0;;
			
 
				+}
			
--- a/hilo_html/static/images/fish.png
+++ b/hilo_html/static/images/fish.png
--- a/hilo_html/static/images/man.png
+++ b/hilo_html/static/images/man.png
--- a/hilo_html/static/images/map.jpg
+++ b/hilo_html/static/images/map.jpg
--- a/hilo_html/static/images/zidan.png
+++ b/hilo_html/static/images/zidan.png
--- a/hilo_html/static/js/demo.js
+++ b/hilo_html/static/js/demo.js
@@ -0,0 +1,33 @@
 
				+window.console = window.console || { log: function () { } };
			
 
				+Array.prototype.forEach = Array.prototype.each = Array.prototype.forEach || function (callback) {
			
 
				+    for (var i = 0; i < this.length; i++) {
			
 
				+        callback(this[i], i, this);
			
 
				+    }
			
 
				+};
			
 
				+
			
 
				+var renderTypeDict = {
			
 
				+    'canvas': 'canvas',
			
 
				+    'dom': 'dom',
			
 
				+    'webgl': 'webgl',
			
 
				+    'forceFlash': 'flash'
			
 
				+};
			
 
				+
			
 
				+// var renderType = location.search.slice(1);
			
 
				+// if (!renderTypeDict[renderType]) {
			
 
				+//     renderType = 'canvas';
			
 
				+// }
			
 
				+var renderType = 'canvas';
			
 
				+var winWidth = window.innerWidth || document.documentElement.clientWidth;
			
 
				+var winHeight = window.innerHeight || document.documentElement.clientHeight;
			
 
				+
			
 
				+
			
 
				+
			
 
				+var gameContainer = document.getElementById("game-container");
			
 
				+var stageWidth = window.stageWidth || winWidth;
			
 
				+var stageHeight = 480;// window.stageHeight || (winHeight - gameContainer.offsetTop);
			
 
				+gameContainer.style.height = stageHeight + 'px';
			
 
				+gameContainer.style.width = stageWidth + 'px';
			
 
				+
			
 
				+
			
 
				+
			
 
				+
			
--- a/hilo_html/static/js/hilo-standalone.min.js
+++ b/hilo_html/static/js/hilo-standalone.min.js