update welcome

2023-04-30 16:39:54 +03:00
parent 12df04b285
commit 57d2088a3a
15 changed files with 13 additions and 7 deletions
@@ -0,0 +1,3 @@
+fonts/monogram*
+assets/
+js/game.js
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<title>ujs</title>
+	<link rel="stylesheet" type="text/css" href="styles.css">
+	<link rel="apple-touch-icon" sizes="180x180" href="/icons/apple-touch-icon.png">
+	<link rel="icon" type="image/png" sizes="32x32" href="/icons/favicon-32x32.png">
+	<link rel="icon" type="image/png" sizes="16x16" href="/icons/favicon-16x16.png">
+	<link rel="manifest" href="/site.webmanifest">
+	<script src="./js/game.js" type="module"></script>
+</head>
+<body>
+</body>
+</html>
@@ -0,0 +1 @@
+../../dist/engine-beeeeeeta.js
@@ -0,0 +1,62 @@
+import { App } from './app.js';
+import { Scene, SceneLayer } from './scene.js';
+import { Rect, StrokeRect, Sprite } from './objects.js';
+
+// init player
+let Player = {
+  x: 400 / 2 - 5,
+  y: 400 / 2 - 5,
+  rect: null,
+};
+Player.rect = new Rect(Player.x, Player.y, 10, 10, 'black');
+Player.rect.ticker = () => {
+  Player.rect.y = Player.y;
+  Player.rect.x = Player.x;
+};
+
+// init scene layers
+let layerBg = new SceneLayer('background', [
+  new Rect(50, 50, 100, 100, 'red'),
+  new StrokeRect(150, 150, 40, 40, 'green', 'blue', 1),
+]);
+
+let layerHud = new SceneLayer('hud', [
+  new Sprite('compass.png', 15, 15),
+  new Sprite('compass-arrow.png', 27, 21),
+]);
+
+let layerInstances = new SceneLayer('Instances', [Player.rect], { debug: true });
+
+// init app
+let app = new App(document.querySelector('canvas'), 400, 400);
+
+// init scene
+let firstScene = new Scene(app.canvas, app.context, 400, 400);
+firstScene.addLayer(layerBg);
+firstScene.addLayer(layerInstances);
+firstScene.addLayer(layerHud);
+
+app.scene = firstScene;
+
+// add app view in document
+window.addEventListener('DOMContentLoaded', () => {
+  document.body.appendChild(app.view);
+});
+
+// player key press listener
+document.addEventListener('keydown', (e) => {
+  switch (e.code) {
+    case 'ArrowUp':
+      Player.y -= 1;
+      break;
+    case 'ArrowDown':
+      Player.y += 1;
+      break;
+    case 'ArrowLeft':
+      Player.x -= 1;
+      break;
+    case 'ArrowRight':
+      Player.x += 1;
+      break;
+  }
+});
@@ -0,0 +1,11 @@
+{
+    "name": "",
+    "short_name": "",
+    "icons": [
+        { "src": "/icons/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png" },
+        { "src": "/icons/android-chrome-512x512.png", "sizes": "512x512", "type": "image/png" }
+    ],
+    "theme_color": "#ffffff",
+    "background_color": "#ffffff",
+    "display": "standalone"
+}
@@ -0,0 +1,20 @@
+@font-face {
+	font-family: 'Monogram';
+	src: url('/fonts/monogramextended.woff2') format('woff2'),
+		url('/fonts/monogramextended.woff') format('woff'),
+		url('/fonts/monogramextended.ttf') format('truetype');
+	font-weight: 500;
+	font-style: normal;
+	font-display: swap;
+}
+
+body {
+	display: flex;
+	gap: 8px;
+	justify-content: center;
+}
+
+canvas {
+	image-rendering: crisp-edges;
+	image-rendering: pixelated;
+}