Compare commits
2 Commits
87bc10094e
...
ddbde3a954
| Author | SHA1 | Date |
|---|---|---|
 Alexander Popov
|
ddbde3a954
|
|
|
Alexander Popov
|
37e14215b6
|
|
|
@ -1,10 +1,10 @@
|
||||||
# ⚠️ IN DEVELOPMENT
|
# ⚠️ WARNING. IN DEVELOPMENT
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
# Documentation
|
# Documentation
|
||||||
|
|
||||||
- 🇷🇺 [Russian](docs/ru/)
|
- 🇷🇺 [Russian](README.ru.md)
|
||||||
|
|
||||||
# Build `ENGINE`
|
# Build `ENGINE`
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -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_).
|
||||||
|
|
@ -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;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
@ -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>
|
||||||
File diff suppressed because it is too large
Load Diff
|
|
@ -11,7 +11,8 @@
|
||||||
"docs-serve": "docsify serve docs"
|
"docs-serve": "docsify serve docs"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"prettier": "2.8.7",
|
"@rollup/plugin-terser": "^0.4.4",
|
||||||
"docsify-cli": "^4.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' };
|
import pkg from './package.json' assert { type: 'json' };
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
input: 'src/main.js',
|
input: 'src/main.js',
|
||||||
output: {
|
output: [
|
||||||
file: `dist/engine-${pkg.version}.js`,
|
{
|
||||||
format: 'es',
|
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 = {
|
options = {
|
||||||
backgroundColor: '#ffcc68',
|
backgroundColor: '#ffcc68',
|
||||||
welcome: true,
|
welcome: true,
|
||||||
}
|
},
|
||||||
) {
|
) {
|
||||||
this.#version = 'beeeeeeta';
|
this.#version = 'beeeeeeta';
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
class Object {
|
class DefaultObject {
|
||||||
constructor(x, y, w, h) {
|
constructor(x, y, w, h) {
|
||||||
this.x = x;
|
this.x = x;
|
||||||
this.y = y;
|
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') {
|
constructor(x, y, w, h, fillColor = 'white') {
|
||||||
super(x, y, w, h);
|
super(x, y, w, h);
|
||||||
|
|
||||||
|
|
@ -135,10 +135,10 @@ export class TiledSprite extends Sprite {
|
||||||
let copyUpByY = Math.ceil(this.y / this.image().height);
|
let copyUpByY = Math.ceil(this.y / this.image().height);
|
||||||
let copyUpByX = Math.ceil(this.y / this.image().width);
|
let copyUpByX = Math.ceil(this.y / this.image().width);
|
||||||
let copyDownByY = Math.ceil(
|
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(
|
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++) {
|
for (let iy = 0; iy <= copyUpByY; iy++) {
|
||||||
|
|
@ -163,12 +163,12 @@ export class TiledSprite extends Sprite {
|
||||||
context.drawImage(
|
context.drawImage(
|
||||||
this.image(),
|
this.image(),
|
||||||
this.x + this.image().width * ix,
|
this.x + this.image().width * ix,
|
||||||
this.y - this.image().height * iy
|
this.y - this.image().height * iy,
|
||||||
);
|
);
|
||||||
context.drawImage(
|
context.drawImage(
|
||||||
this.image(),
|
this.image(),
|
||||||
this.x - this.image().width * ix,
|
this.x - this.image().width * ix,
|
||||||
this.y - this.image().height * iy
|
this.y - this.image().height * iy,
|
||||||
);
|
);
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
|
|
@ -197,12 +197,12 @@ export class TiledSprite extends Sprite {
|
||||||
context.drawImage(
|
context.drawImage(
|
||||||
this.image(),
|
this.image(),
|
||||||
this.x + this.image().width * ix,
|
this.x + this.image().width * ix,
|
||||||
this.y + this.image().height * iy
|
this.y + this.image().height * iy,
|
||||||
);
|
);
|
||||||
context.drawImage(
|
context.drawImage(
|
||||||
this.image(),
|
this.image(),
|
||||||
this.x - this.image().width * ix,
|
this.x - this.image().width * ix,
|
||||||
this.y + this.image().height * iy
|
this.y + this.image().height * iy,
|
||||||
);
|
);
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -54,7 +54,7 @@ export class SceneLayer {
|
||||||
objects = Array(),
|
objects = Array(),
|
||||||
options = {
|
options = {
|
||||||
debug: false,
|
debug: false,
|
||||||
}
|
},
|
||||||
) {
|
) {
|
||||||
// TODO: check types
|
// TODO: check types
|
||||||
this.#objects = Array();
|
this.#objects = Array();
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue