blue/teacherGames
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

match present and past irregular verbs prototype

Browse Source
This commit is contained in:
Blue 2020-04-23 02:11:26 +03:00
parent a26b7bb9b8
commit c01ac52bbd
8 changed files with 269 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
mj/.idea/.gitignore generated vendored Normal file
View File

@ -0,0 +1,5 @@
# Default ignored files
/shelf/
/workspace.xml
# Editor-based HTTP Client requests
/httpRequests/

6
mj/.idea/misc.xml generated Normal file
View File

@ -0,0 +1,6 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="JavaScriptSettings">
<option name="languageLevel" value="ES6" />
</component>
</project>

12
mj/.idea/mj.iml generated Normal file
View File

@ -0,0 +1,12 @@
<?xml version="1.0" encoding="UTF-8"?>
<module type="WEB_MODULE" version="4">
<component name="NewModuleRootManager">
<content url="file://$MODULE_DIR$">
<excludeFolder url="file://$MODULE_DIR$/.tmp" />
<excludeFolder url="file://$MODULE_DIR$/temp" />
<excludeFolder url="file://$MODULE_DIR$/tmp" />
</content>
<orderEntry type="inheritedJdk" />
<orderEntry type="sourceFolder" forTests="false" />
</component>
</module>

8
mj/.idea/modules.xml generated Normal file
View File

@ -0,0 +1,8 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="ProjectModuleManager">
<modules>
<module fileurl="file://$PROJECT_DIR$/.idea/mj.iml" filepath="$PROJECT_DIR$/.idea/mj.iml" />
</modules>
</component>
</project>

97
mj/card.js Normal file
View File

@ -0,0 +1,97 @@
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

13
mj/index.html Normal file
View File

@ -0,0 +1,13 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Match</title>
<link rel="stylesheet" href="main.css">
<script type="module" src="main.js"></script>
</head>
<body>
loading...
</body>
</html>

37
mj/main.css Normal file
View File

@ -0,0 +1,37 @@
body {
margin: 0;
font-family: Sans;
}
.card {
display: flex;
width: 150px;
height: 220px;
align-items: center;
justify-content: center;
background-color: #ddd;
margin: 5px;
float: left;
box-shadow: #000000 1px 1px 7px -1px;
font-size: 17pt;
color: #4c4c4c;
opacity: 1;
transition: background-color 200ms ease-in-out,
opacity 200ms ease-in-out,
top 200ms ease-in-out,
left 200ms ease-in-out,
transform 100ms ease-in-out;
}
.selected {
background-color: #76bce2;
}
.card.selected:hover {
background-color: #76bce2;
}
.card:hover {
background-color: #e3cfbb;
}

91
mj/main.js Normal file
View File

@ -0,0 +1,91 @@
import Card from './card.js'
document.body.innerText = "";
const vocabulary = [
["drive", "drove"],
["send", "sent"],
["understand", "understood"],
["find", "found"],
["write", "wrote"],
["feel", "felt"],
["fall", "fell"],
["run", "ran"],
["do", "did"],
["speak", "spoke"],
["awake", "awoke"],
["bear", "bore"],
["bend", "bent"],
["bite", "bit"],
["cling", "clung"],
["breed", "bred"],
["feed", "fed"]
];
let deck = [];
let selected = null;
Card.setBounds(0, 0, window.innerWidth, window.innerHeight)
for (let i = 0; i < 50; ++i) {
let id = Math.floor(Math.random() * vocabulary.length);
let set = vocabulary[id];
for (let s = 0; s < set.length; ++s) {
let card = new Card(set[s], onCardClick, id, s);
card.disrotate();
card.displace();
deck.push(card);
}
}
deck = shuffle(deck);
for (let i = 0; i < deck.length; ++i) {
document.body.appendChild(deck[i].element);
}
function onCardClick(card) {
if (selected != null) {
if (card === selected) {
return;
}
if (selected.setId === card.setId && selected.cardId !== card.cardId) {
score(selected, card);
selected = null;
return;
}
selected.unselect();
}
selected = card;
card.select();
}
function score(c1, c2) {
deck.splice(deck.indexOf(c1), 1)
deck.splice(deck.indexOf(c2), 1);
let x = window.innerWidth / 2
let y = -500;
c1.position(x, y);
c2.position(x, y);
c1.rotate(0);
c2.rotate(0);
c1.element.style.zIndex = "5";
c2.element.style.zIndex = "5";
setTimeout(fade.bind(null, c1, c2), 200);
}
function fade(c1, c2) {
c1.destructor();
c2.destructor();
}
function shuffle(deck) {
let spare = deck.slice();
let result = [];
while (spare.length > 0) {
let index = Math.floor(Math.random() * spare.length);
result.push(spare.splice(index, 1)[0]);
}
return result;
}