Compare commits

...

2 Commits

Author SHA1 Message Date
Alexander Popov ddbde3a954
add example 2023-11-14 00:44:26 +03:00
Alexander Popov 37e14215b6
build minify version 2023-11-14 00:16:47 +03:00
10 changed files with 548 additions and 57 deletions

View File

@ -1,10 +1,10 @@
# ⚠️ IN DEVELOPMENT
# ⚠️ WARNING. IN DEVELOPMENT
![engine_icon](test/icons/apple-touch-icon.png)
# Documentation
- 🇷🇺 [Russian](docs/ru/)
- 🇷🇺 [Russian](README.ru.md)
# Build `ENGINE`

41
README.ru.md Normal file
View File

@ -0,0 +1,41 @@
# ⚠️ ВНИМАНИЕ. В РАЗРАБОТКЕ
![engine_icon](test/icons/apple-touch-icon.png)
# ujs
**ujs** — JavaScript библиотека для разработки игр на HTML5/Canvas.
# ⚙️ Сборка **ujs**
Сборка осуществляется с помощью `npm` и `rollup`.
Запустите следующие команды, чтобы запустить процесс сборки `ujs`.
```sh
npm install
npm run build
```
По окончанию сборки, в директории `dist` будут находится собранные файлы `ujs`.
# 👋🏻 Использование
...
# 🧰 Contribute
## Branch info
- `master` — current `dev` branch.
- `release` — latest **stable** version branch.
## Git hooks
### pre-commit
**Requiments:**
1. NPM module `prettier`.
2. [editorconfig-checker](https://github.com/editorconfig-checker/editorconfig-checker)
(_Go application_).

View File

@ -0,0 +1,41 @@
import * as ujs from './engine.js';
let app = new ujs.App(400, 400);
let player = {
x: 200 - 25,
y: 200 - 25,
obj: null,
};
player.obj = new ujs.Rect(player.x, player.y, 50, 50, 'red');
player.obj.ticker = () => {
player.obj.y = player.y;
player.obj.x = player.x;
};
let firstScene = new ujs.Scene(app.canvas, app.context, 400, 400);
let layerInstances = new ujs.SceneLayer('Instances', [player.obj]);
firstScene.addLayer(layerInstances);
app.scene = firstScene;
window.addEventListener('DOMContentLoaded', () => {
document.body.appendChild(app.view);
});
document.addEventListener('keydown', (e) => {
switch (e.code) {
case 'ArrowUp':
player.y -= 10;
break;
case 'ArrowDown':
player.y += 10;
break;
case 'ArrowLeft':
player.x -= 10;
break;
case 'ArrowRight':
player.x += 10;
break;
}
});

View File

@ -0,0 +1,11 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>simple scene</title>
<script src="./game.js" type="module"></script>
</head>
<body>
</body>
</html>

467
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -11,7 +11,8 @@
"docs-serve": "docsify serve docs"
},
"devDependencies": {
"prettier": "2.8.7",
"docsify-cli": "^4.4.4"
"@rollup/plugin-terser": "^0.4.4",
"docsify-cli": "^4.4.4",
"prettier": "2.8.7"
}
}

View File

@ -1,9 +1,17 @@
import terser from '@rollup/plugin-terser';
import pkg from './package.json' assert { type: 'json' };
export default {
input: 'src/main.js',
output: {
file: `dist/engine-${pkg.version}.js`,
format: 'es',
},
output: [
{
file: `dist/engine-${pkg.version}.js`,
format: 'es',
},
{
file: `dist/engine-${pkg.version}.min.js`,
format: 'es',
plugins: [terser()],
},
],
};

View File

@ -12,7 +12,7 @@ export class App {
options = {
backgroundColor: '#ffcc68',
welcome: true,
}
},
) {
this.#version = 'beeeeeeta';

View File

@ -1,4 +1,4 @@
class Object {
class DefaultObject {
constructor(x, y, w, h) {
this.x = x;
this.y = y;
@ -14,7 +14,7 @@ export class Empty {
}
}
export class Rect extends Object {
export class Rect extends DefaultObject {
constructor(x, y, w, h, fillColor = 'white') {
super(x, y, w, h);
@ -135,10 +135,10 @@ export class TiledSprite extends Sprite {
let copyUpByY = Math.ceil(this.y / this.image().height);
let copyUpByX = Math.ceil(this.y / this.image().width);
let copyDownByY = Math.ceil(
(context.canvas.height - this.y - this.image().height) / this.image().height
(context.canvas.height - this.y - this.image().height) / this.image().height,
);
let copyDownByX = Math.ceil(
(context.canvas.width - this.y - this.image().width) / this.image().width
(context.canvas.width - this.y - this.image().width) / this.image().width,
);
for (let iy = 0; iy <= copyUpByY; iy++) {
@ -163,12 +163,12 @@ export class TiledSprite extends Sprite {
context.drawImage(
this.image(),
this.x + this.image().width * ix,
this.y - this.image().height * iy
this.y - this.image().height * iy,
);
context.drawImage(
this.image(),
this.x - this.image().width * ix,
this.y - this.image().height * iy
this.y - this.image().height * iy,
);
break;
}
@ -197,12 +197,12 @@ export class TiledSprite extends Sprite {
context.drawImage(
this.image(),
this.x + this.image().width * ix,
this.y + this.image().height * iy
this.y + this.image().height * iy,
);
context.drawImage(
this.image(),
this.x - this.image().width * ix,
this.y + this.image().height * iy
this.y + this.image().height * iy,
);
break;
}

View File

@ -54,7 +54,7 @@ export class SceneLayer {
objects = Array(),
options = {
debug: false,
}
},
) {
// TODO: check types
this.#objects = Array();