Home Explore Help
Sign In
yckj
/
demo_list
Watch 1
Star 0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

完成hilo例子

lzj500 1 year ago
parent
d69294135d
commit
a78277b9bf
13 changed files with 326 additions and 37 deletions
Split View Show Diff Stats
  1. 9 0
      game_test1/.prettierrc
  2. 22 18
      game_test1/index.html
  3. 22 0
      game_test1/src/libs/hilo/hilo-standalone.min.js
  4. 1 0
      game_test1/src/main.ts
  5. 55 19
      game_test1/src/pages/hilo/index.vue
  6. 158 0
      hilo_html/index.html
  7. 4 0
      hilo_html/static/css/sytle.css
  8. BIN
      hilo_html/static/images/fish.png
  9. BIN
      hilo_html/static/images/man.png
  10. BIN
      hilo_html/static/images/map.jpg
  11. BIN
      hilo_html/static/images/zidan.png
  12. 33 0
      hilo_html/static/js/demo.js
  13. 22 0
      hilo_html/static/js/hilo-standalone.min.js

+ 9 - 0
game_test1/.prettierrc
View File 

@@ -0,0 +1,9 @@
 
+{
 
+    "printWidth": 2000,
 
+    "tabWidth": 2,
 
+    "useTabs": true,
 
+    "singleQuote": false,
 
+    "semi": true,
 
+    "trailingComma": "none",
 
+    "bracketSpacing": true
 
+}

+ 22 - 18
game_test1/index.html
View File 

@@ -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>

File diff suppressed because it is too large
+ 22 - 0
game_test1/src/libs/hilo/hilo-standalone.min.js


+ 1 - 0
game_test1/src/main.ts
View File 

@@ -1,5 +1,6 @@
 
 import { createSSRApp } from "vue";
 
 import App from "./App.vue";
 
+
 
 export function createApp() {
 
   const app = createSSRApp(App);
 
   return {

+ 55 - 19
game_test1/src/pages/hilo/index.vue
View File 

@@ -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>

+ 158 - 0
hilo_html/index.html
View File 

@@ -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>

+ 4 - 0
hilo_html/static/css/sytle.css
View File 

@@ -0,0 +1,4 @@
 
+*{
 
+    padding: 0;
 
+    margin: 0;;
 
+}

BIN
hilo_html/static/images/fish.png
View File


BIN
hilo_html/static/images/man.png
View File


BIN
hilo_html/static/images/map.jpg
View File


BIN
hilo_html/static/images/zidan.png
View File


+ 33 - 0
hilo_html/static/js/demo.js
View File 

@@ -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';
 
+
 
+
 
+
 
+

File diff suppressed because it is too large
+ 22 - 0
hilo_html/static/js/hilo-standalone.min.js