init

2023-02-16 00:04:40 +03:00 · 2023-02-16 00:04:40 +03:00 · c256015b8c
commit c256015b8c
7 changed files with 141 additions and 0 deletions
--- a/.editorconfig
+++ b/.editorconfig
@ -0,0 +1,20 @@
+root = true
+
+[*]
+indent_style = space
+indent_size = 4
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.js]
+indent_style = space
+indent_size = 2
+
+[{*.html,*.css,*.json}]
+indent_style = tab
+indent_size = 4
+
+[*.md]
+trim_trailing_whitespace = false
--- a/src/index.html
+++ b/src/index.html
@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<title>gameEngine</title>
+	<link rel="stylesheet" type="text/css" href="styles.css">
+	<script src="./js/main.js" type="module"></script>
+</head>
+<body>
+	<canvas></canvas>
+</body>
+</html>
--- a/src/js/main.js
+++ b/src/js/main.js
@ -0,0 +1,28 @@
+import { Scene } from './scene.js';
+import { Settings } from './settings.js';
+import { Pointer } from './pointer.js';
+
+class Game {
+  constructor() {
+    this.scene = new Scene();
+    this.prevTime = Date.now();
+
+    Pointer.init();
+
+    this.run();
+  }
+
+  run = () => {
+    let newTime = Date.now();
+    Settings.delta = (newTime - this.prevTime) / 1000;
+    this.prevTime = newTime;
+
+    this.scene.run();
+
+    requestAnimationFrame(this.run);
+  }
+}
+
+window.addEventListener('DOMContentLoaded', () => {
+  new Game();
+});
--- a/src/js/pointer.js
+++ b/src/js/pointer.js
@ -0,0 +1,30 @@
+export class Pointer {
+  static #x;
+  static #y;
+
+  static init() {
+    this.#x = 0;
+    this.#y = 0;
+
+    window.addEventListener('mousemove', this.mouseMove);
+    window.addEventListener('mousedown', this.mouseDown);
+    window.addEventListener('mouseup', this.mouseUp);
+  }
+
+  static set pos({ x, y }) { this.#x = x; this.#y = y; }
+  static get pos() {
+    return { x: this.#x, y: this.#y };
+  }
+
+  static mouseMove = (e) => {
+    this.pos = { x: e.pageX, y: e.pageY };
+  }
+
+  static mouseDown = (e) => {
+    this.pos = { x: e.pageX, y: e.pageY };
+  }
+
+  static mouseUp = (e) => {
+    this.pos = { x: e.pageX, y: e.pageY };
+  }
+}
--- a/src/js/scene.js
+++ b/src/js/scene.js
@ -0,0 +1,26 @@
+import { Pointer } from './pointer.js';
+
+export class Scene {
+  constructor() {
+    this.init();
+  }
+
+  init = async () => {
+    this.canvas = document.querySelector('canvas');
+    this.context = this.canvas.getContext('2d');
+
+    this.setScreenSize();
+  }
+
+  run() {
+    console.log(Pointer.pos);
+  }
+
+  setScreenSize() {
+    let w = 640;
+    let h = 480;
+
+    this.canvas.width = w;
+    this.canvas.height = h;
+  }
+}
--- a/src/js/settings.js
+++ b/src/js/settings.js
@ -0,0 +1,24 @@
+export class Settings {
+  static #props = {};
+
+  static get(property) {
+    return this.#props[property];
+  }
+
+  static add(property, value) {
+    if (!Object.getOwnPropertyDescriptors(this)[property]) {
+      Object.defineProperty(this, property, {
+        configurable: true,
+        enumerable: true,
+        get: () => this.#props[property],
+        set: (setValue) => { this.#props[property] = setValue; },
+      });
+    }
+
+    this.#props[property] = value;
+  }
+
+  static remove(property) {
+    delete this.#props[property];
+  }
+}
--- a/src/styles.css
+++ b/src/styles.css