Делаю игру papers, please в браузере.
Сейчас реализовано:
- Есть стол, на нем документы, которые можно перетаскивать (пока перетаскиваю цветные прямоугольники)
- Есть данные документов (имя, фамилия, возраст, пол, номер паспорта и тд...)
- Есть шаблон документа, в котором есть поля под текст
Нужно вставить в этот шаблон документа данные, чтобы потом при перетаскивании документа, текст оставался на своих местах
Должно получится что-то вроде этого:
Вот ВЕСЬ код класса, который реализует отрисовку документов (пока прямоугольники) Использую TS
class RenderDesk {
// Размеры окна документа
private w: number = window.innerWidth; // ширина всего стола
private h: number; // высота всего стола
// Canvas
private canvasDesk: HTMLCanvasElement; // элемент canvas стола
private canvasPapers: HTMLCanvasElement; // элемент canvas документов
private deskCtx: CanvasRenderingContext2D; // контекст самого стола
private papersCtx: CanvasRenderingContext2D; // контекст канваса с документами
private pixel: number; // размер игрового пикселя
// Размеры столов (сам стол, окошко с посетителями, стол для сдачи документов)
private deskWidth_w: number; // ширина оновного стола
private deskWidth_h: number; // ширина оновного стола
private visitWindow_w: number;
private visitWindow_h: number;
private miniDesk_w: number;
private miniDesk_h: number;
// Перетаскивание
private docCoords: { [key: string]: IPaperCoords } = {};
private lastIndex: number = 0;
private mouse = { x: 0, y: 0 };
private selected: IPaperCoords | boolean = false;
// Если true, то разрешаем отдать документы
public checked: boolean;
constructor () {
// Размер одного игрового пикселя
this.pixel = Math.round(this.w / 512);
// Высота всего стола
this.h = window.innerHeight - this.pixel * 70;
// canvas
this.canvasDesk = document.querySelector("#desk");
this.canvasPapers = document.querySelector("#papers");
// Контекст
this.deskCtx = this.canvasDesk.getContext("2d");
this.papersCtx = this.canvasPapers.getContext("2d");
// Размеры
this.canvasDesk.width = this.canvasPapers.width = this.w;
this.canvasDesk.height = this.canvasPapers.height = this.h;
// -----------Задаем размеры "окон"-------------//
// Основной стол
this.deskWidth_w = this.w / 3 * 2; // ширина основного стола (2/3 от всего стола)
this.deskWidth_h = this.h; // высота основного стола (во всю высоту)
// Окно для посетителей
this.visitWindow_w = this.w / 3 * 1; // ширина окна для посетителей (1/3 от всей ширины стола)
this.visitWindow_h = this.h / 2; // высота окна для посетителей (половина высоты)
// Мини столик для сдачи документов
this.miniDesk_w = this.w / 3 * 1; // ширина мини столика (1/3 от всей ширины стола)
this.miniDesk_h = this.h / 2; // высота мини столика (половина высоты)
// Документы еще не проверены
this.checked = false;
// ----------------- События для перетаскивания документов ----------------- //
this.canvasPapers.onmousemove = e => {
// при движении сохраняем координаты мыши
this.mouse.x = e.pageX;
this.mouse.y = e.pageY - (window.innerHeight - this.canvasPapers.height); // тк нужно координаты относительно canvas
};
let isCursorInRect = (paper: IPaperCoords): boolean => {
let mouse = this.mouse;
// Проверяем входят ли координаты мыши в диапазон точек документа
return (
mouse.x > paper.x &&
mouse.x < paper.x + paper.w &&
mouse.y > paper.y &&
mouse.y < paper.y + paper.h
);
};
let zIndexChange = (zIndex: number) => {
// Если zIndex выбранного документа самый большой, то он лежит выше всех, поднимать его вверх не надо
if (zIndex == this.lastIndex) return;
else {
// Перебираем все документы
for (let paperName in this.docCoords) {
// Текущий перебираемый документ
let paper = this.docCoords[paperName];
// Если документы лежат ниже всплывающего документа, то их порядок не меняется
if (paper.zIndex < zIndex) continue;
else if (paper.zIndex == zIndex)
// Если zIndex документа равен zIndex перетаскиваемого документа, то он должен всплыть наверх
paper.zIndex = this.lastIndex; // zIndex максимальный
else
// Чтобы очистить максимальный zIndex для всплывающего документа,
// смещаем zIndex всех выше лежащих документов на одну единицу вниз
paper.zIndex--;
}
}
};
window.onmousedown = () => {
// При зажатии клавиши определяем находится ли какой-то документ под координатами мыши
if (!this.selected /*если какой-то элемент выбран - значит он перетаскивается*/) {
// Перебираем все документы, которые лежат на столе
Object.values(this.docCoords)
// Сортируем их по уменьшению zIndex
.sort((a, b) => (a.zIndex < b.zIndex ? 1 : a.zIndex == b.zIndex ? 0 : -1))
.every(paper => {
// Если курсор на документе с самым большим zIndex, то перетаскиваем его
if (isCursorInRect(paper)) {
this.selected = paper;
zIndexChange(paper.zIndex);
return false;
} else
// Берем документ с меньшим zIndex
return true;
});
}
};
window.onmouseup = () => {
// Отпустили мышь - ничего не выбрано
this.selected = false;
};
}
public render () {
// Сокращение
let ctx = this.deskCtx;
// Отрисовываем окно для посетителей
ctx.fillStyle = "aqua";
ctx.fillRect(0, 0, this.visitWindow_w, this.visitWindow_h);
// Отрисовываем мини столик для сдачи документов
ctx.fillStyle = "gray";
ctx.fillRect(0, this.visitWindow_h, this.miniDesk_w, this.miniDesk_h);
// Отрисовываем основной стол для документов
ctx.fillStyle = "brown";
ctx.fillRect(this.visitWindow_w, 0, this.deskWidth_w, this.deskWidth_h);
}
public submitDocs (
passpor: Passport,
entryPermit: EntryPermit,
personalCard: PersonalCard
): Promise<boolean> {
let ctx = this.papersCtx;
let docH = 100;
let docW = 60;
// Размеры пасспорта
this.docCoords.passport = {
x: this.miniDesk_w / 2,
y: this.canvasDesk.height - this.miniDesk_h,
w: docW,
h: docH,
color: "red",
zIndex: 2,
giveAnimation: false,
visible: true
};
// Размеры личной карты
this.docCoords.personalCard = {
x: this.miniDesk_w / 2,
y: this.canvasDesk.height - this.miniDesk_h,
w: 70,
h: 35,
color: "magenta",
zIndex: 0,
giveAnimation: false,
visible: true
};
// Размеры рвзрешения на въезд
this.docCoords.entryPermit = {
x: this.miniDesk_w / 2,
y: this.canvasDesk.height - this.miniDesk_h,
w: 90,
h: 150,
color: "white",
zIndex: 1,
giveAnimation: false,
visible: true
};
// Размеры рвзрешения на въезд
this.docCoords.entryPermit2 = {
x: this.miniDesk_w / 2,
y: this.canvasDesk.height - this.miniDesk_h,
w: 90,
h: 150,
color: "black",
zIndex: 3,
giveAnimation: false,
visible: true
};
// Записываем в lastIndex самый высокий zIndex
this.lastIndex = Object.values(this.docCoords).length - 1;
// Создаем промис
let verification: Promise<boolean> = new Promise(resolve => {
// 60 раз в секунду перерисовываем документы
let papersFrame = setInterval(() => {
// Очищаем холст
ctx.clearRect(0, 0, this.canvasPapers.width, this.canvasPapers.height);
// Перебираем все документы, которые лежат на столе
Object.values(this.docCoords)
// Сортируем их по возрастанию zIndex
.sort((a, b) => (a.zIndex > b.zIndex ? 1 : a.zIndex == b.zIndex ? 0 : -1))
.forEach(paper => {
// Если документ отдали, то его отрисовывать не надо
if (!paper.visible) return;
// Цвет отриосвываемого документа
ctx.fillStyle = paper.color;
// Определяем позицию документа (на мини столе, в окне для посетителей, на основном столе)
if (paper.x + paper.w / 2 < this.miniDesk_w) {
// Документ лежит на маленьком столе или в окне для посетителей
ctx.fillRect(paper.x, paper.y, paper.w, paper.h);
// Документ находится в окне для посетителей и человек отпустил документ
if (paper.y + paper.h + 10 < this.visitWindow_h && !this.selected)
// Запускаем анимацию
paper.giveAnimation = true;
// Анимация (отдаем документ посетителю) если он проверин checked
if (paper.giveAnimation && this.checked) {
// Если низ документа еще не дошел до края окна, просто двигаем документ
if (paper.y + paper.h < this.visitWindow_h) paper.y += 20;
else {
// Иначе двигаем и уменьшаем высоту документа, чтобы он "скрылся" из вида
paper.y += 20;
paper.h -= 20;
// Если документ скрылся, перестаем его анимировать и запрещаем отрисовываться
if (paper.y >= this.visitWindow_h) {
paper.giveAnimation = false;
paper.visible = false;
// Проверяем все ли документы сдали
let end_of_verificate = Object.values(this.docCoords).every(
// Если документ сдан, то он невидимый (visible = false)
paper => !paper.visible
);
// Если все документы сдали, то завершаем промис
if (end_of_verificate) {
resolve(true);
clearInterval(papersFrame);
}
}
}
} else if (paper.giveAnimation) {
console.log(234);
// Если документы не проверены, но их пытаются отдать
if (paper.y < this.canvasDesk.height - this.miniDesk_h)
paper.y += 20;
else paper.giveAnimation = false;
}
} else {
// Документ лежит на основном столе
ctx.fillRect(paper.x, paper.y, paper.w * 2, paper.h * 2);
}
});
// Если какой-то документ перетаскивается, то изменяем его координаты на координаты мыши
if (this.selected) {
(this.selected as IPaperCoords).x =
this.mouse.x - (this.selected as IPaperCoords).w / 2;
(this.selected as IPaperCoords).y =
this.mouse.y - (this.selected as IPaperCoords).h / 2;
}
}, 1000 / 60);
});
return verification;
}
}