teacherGames/mj/card.js

97 lines
2.4 KiB
JavaScript
Raw Normal View History

let x1 = 0;
let x2 = 1000;
let y1 = 0;
let y2 = 1000;
const width = 150;
const height = 220;
const hw = width / 2;
const hh = height / 2;
const r = Math.sqrt(width * width + height * height) / 2;
const a = Math.asin(hw / r) * 180 / Math.PI;
class Card {
constructor(word, clickHandler, setId, cardId) {
this.word = word;
this.setId = setId;
this.cardId = cardId;
this._onCLick = clickHandler;
this.selected = false;
this._rotation = 0;
this.element = document.createElement("div");
this.element.classList.add("card");
this.element.innerText = word;
this.x = 0;
this.y = 0;
this.element.addEventListener("click", this._onElementClick.bind(this));
}
destructor() {
this.element.remove();
}
select() {
if (!this.selected) {
this.element.classList.add("selected");
this.selected = true;
}
}
unselect() {
if (this.selected) {
this.element.classList.remove("selected");
this.selected = false;
}
}
disrotate() {
let angle = Math.random() * 150 - 75;
this.rotate(angle);
}
rotate(angle) {
this._rotation = angle;
this.element.style.transform = "rotate(" + angle +"deg)"
}
position(x, y) {
this.element.style.position = "absolute";
this.x = x;
this.y = y;
this.element.style.top = y + "px";
this.element.style.left = x + "px";
}
displace() {
let lA;
let cA = 90;
if (this._rotation > 0) {
lA = this._rotation - a;
cA += this._rotation + a;
} else {
lA = this._rotation + a;
cA -= this._rotation - a;
}
let hl = r * Math.abs(Math.cos(lA * Math.PI/180));
let hc = r * Math.abs(Math.cos(cA * Math.PI/180))
let yDiff = hl - hh;
let xDiff = hc - hw;
let minY = yDiff + y1;
let maxY = y2 - height - yDiff;
let minX = xDiff + x1;
let maxX = x2 - width - xDiff;
let x = Math.round(Math.random() * (maxX - minX) + minX);
let y = Math.round(Math.random() * (maxY - minY) + minY);
this.position(x, y);
}
_onElementClick(e) {
this._onCLick(this);
}
static setBounds(minX, minY, maxX, maxY) {
x1 = minX;
x2 = maxX - 7;
y1 = minY;
y2 = maxY - 7;
}
}
export default Card