Compare commits
2 Commits
87bc10094e
...
ddbde3a954
| Author | SHA1 | Date | |
|---|---|---|---|
ddbde3a954
|
|||
|
37e14215b6
|
@ -1,10 +1,10 @@
|
||||
# ⚠️ IN DEVELOPMENT
|
||||
# ⚠️ WARNING. IN DEVELOPMENT
|
||||
|
||||
|
||||
|
||||
# Documentation
|
||||
|
||||
- 🇷🇺 [Russian](docs/ru/)
|
||||
- 🇷🇺 [Russian](README.ru.md)
|
||||
|
||||
# Build `ENGINE`
|
||||
|
||||
|
||||
41
README.ru.md
Normal file
41
README.ru.md
Normal file
@ -0,0 +1,41 @@
|
||||
# ⚠️ ВНИМАНИЕ. В РАЗРАБОТКЕ
|
||||
|
||||
|
||||
|
||||
# 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_).
|
||||
41
examples/simple_scene/game.js
Normal file
41
examples/simple_scene/game.js
Normal 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;
|
||||
}
|
||||
});
|
||||
11
examples/simple_scene/index.html
Normal file
11
examples/simple_scene/index.html
Normal 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
467
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -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"
|
||||
}
|
||||
}
|
||||
|
||||
@ -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()],
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
@ -12,7 +12,7 @@ export class App {
|
||||
options = {
|
||||
backgroundColor: '#ffcc68',
|
||||
welcome: true,
|
||||
}
|
||||
},
|
||||
) {
|
||||
this.#version = 'beeeeeeta';
|
||||
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -54,7 +54,7 @@ export class SceneLayer {
|
||||
objects = Array(),
|
||||
options = {
|
||||
debug: false,
|
||||
}
|
||||
},
|
||||
) {
|
||||
// TODO: check types
|
||||
this.#objects = Array();
|
||||
|
||||
Loading…
Reference in New Issue
Block a user