68 lines
1.4 KiB
HTML
68 lines
1.4 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Память | Memory</title>
|
|
</head>
|
|
<body>
|
|
</body>
|
|
<script>
|
|
function memorySide() {
|
|
return 50
|
|
}
|
|
|
|
function memorySpace() {
|
|
return 20
|
|
}
|
|
|
|
function memoryGap() {
|
|
return memorySide() + memorySpace()
|
|
}
|
|
|
|
function memoryItemPositions(M) {
|
|
var pos = [];
|
|
for (var i = 0; i < M.itemsCount; i++) {
|
|
let row = Math.floor(i / 4)
|
|
let x = memoryGap() + (i - row * 4) * memoryGap()
|
|
let y = memoryGap() + row * memoryGap()
|
|
pos.push([x, y])
|
|
}
|
|
return pos
|
|
}
|
|
</script>
|
|
<script>
|
|
var items = []
|
|
|
|
// Section16Buttons.
|
|
for (var i = 0; i < 16; i++) {
|
|
let item = document.createElement("div")
|
|
document.body.appendChild(item)
|
|
items.push(item)
|
|
item.id = `${i}`
|
|
}
|
|
|
|
// SectionGrid.
|
|
var M = {
|
|
itemsCount: items.length
|
|
};
|
|
let positions = memoryItemPositions(M);
|
|
for (var id in positions) {
|
|
var p = positions[id]
|
|
var item = items[id];
|
|
item.style.left = `${p[0]}px`
|
|
item.style.top = `${p[1]}px`
|
|
item.style.width = `${memorySide()}px`
|
|
item.style.height = `${memorySide()}px`
|
|
item.style.position = "absolute"
|
|
item.style.background = "blue"
|
|
}
|
|
|
|
// SectionSelection.
|
|
for (let id in items) {
|
|
var item = items[id]
|
|
item.onclick = function() {
|
|
console.log("ИГР select id:", id)
|
|
}
|
|
}
|
|
</script>
|
|
</html>
|