Last active
August 8, 2019 23:23
-
-
Save neoandrevictor/65f2d7aa47865573a0c13ed0ecf2d35c to your computer and use it in GitHub Desktop.
mochila.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="UTF-8"> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
<meta http-equiv="X-UA-Compatible" content="ie=edge"> | |
<title>Mochila</title> | |
<style> | |
table, | |
td, | |
tr { | |
border: 1px solid black; | |
} | |
td { | |
width: 25px; | |
height: 25px; | |
} | |
#mochila { | |
background: lightgray; | |
} | |
</style> | |
</head> | |
<body> | |
<script> | |
function uuidv4() { | |
return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) { | |
var r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8); | |
return v.toString(16); | |
}); | |
} | |
function getRandomIntInclusive(min, max) { | |
min = Math.ceil(min); | |
max = Math.floor(max); | |
return Math.floor(Math.random() * (max - min + 1)) + min; | |
} | |
function getRandomCharacter() { | |
let string = "ABCDEFGHIJKLMNOPQRSTUVXWYZ"; | |
return string[getRandomIntInclusive(0, string.length - 1)]; | |
} | |
function gerarMochila(altura, largura) { | |
let mochila = document.createElement("table"); | |
mochila.id = "mochila"; | |
mochila.setAttribute("altura", altura); | |
mochila.setAttribute("largura", largura); | |
for (let a = 1; a <= altura; a++) { | |
let linha = document.createElement("tr"); | |
for (let d = 1; d <= largura; d++) { | |
let celula = document.createElement("td"); | |
celula.id = d + "," + a; | |
linha.appendChild(celula); | |
} | |
mochila.appendChild(linha); | |
} | |
document.body.appendChild(mochila); | |
} | |
function geraItens(altura, largura) { | |
let id = uuidv4(); | |
let simbolo = getRandomCharacter()+getRandomCharacter(); | |
let item = document.createElement("table"); | |
item.id = id; | |
item.setAttribute("altura", altura); | |
item.setAttribute("largura", largura); | |
for (let a = 1; a <= altura; a++) { | |
let linha = document.createElement("tr"); | |
for (let d = 1; d <= largura; d++) { | |
let celula = document.createElement("td"); | |
celula.id = id + "_" + d + "," + a; | |
celula.innerText = simbolo | |
linha.appendChild(celula); | |
} | |
item.appendChild(linha); | |
} | |
item.setAttribute("onclick", "encaixar(this.id)"); | |
item.style.cursor="pointer"; | |
document.body.appendChild(item); | |
criarBotao("rodar_"+id,"↻", "rotacionarItem('"+id+"')"); | |
} | |
function escrever(string) { | |
let p = document.createElement("p"); | |
p.innerText = string; | |
document.body.append(p); | |
} | |
function rotacionarItem(id) { | |
let simbolo = document.getElementById(id + "_1,1").innerText; | |
let item = document.createElement("table"); | |
item.id = id; | |
altura = document.getElementById(id).getAttribute("largura"); | |
largura = document.getElementById(id).getAttribute("altura"); | |
for (let a = 1; a <= altura; a++) { | |
let linha = document.createElement("tr"); | |
for (let d = 1; d <= largura; d++) { | |
let celula = document.createElement("td"); | |
celula.id = id + "_" + d + "," + a; | |
celula.innerText = simbolo | |
linha.appendChild(celula); | |
} | |
item.appendChild(linha); | |
} | |
item.setAttribute("altura", altura); | |
item.setAttribute("largura", largura); | |
item.setAttribute("onclick", "encaixar(this.id)"); | |
item.style.cursor="pointer"; | |
document.getElementById(id).outerHTML = item.outerHTML; | |
} | |
function criarBotao(id,legenda, comando) { | |
let botao = document.createElement("button"); | |
botao.innerText = legenda; | |
botao.id=id; | |
botao.setAttribute("onclick", comando); | |
document.body.appendChild(botao); | |
} | |
var contadorRotacao = false; | |
function encaixar(id) { | |
let item = document.getElementById(id); | |
simbolo = document.getElementById(id + "_1,1").innerText; | |
let mochila = document.getElementById("mochila"); | |
let mochilaAltura = mochila.getAttribute("altura") * 1; | |
let mochilaLargura = mochila.getAttribute("largura") * 1; | |
let itemAltura = item.getAttribute("altura") * 1; | |
let itemLargura = item.getAttribute("largura") * 1; | |
if (itemAltura * 1 > mochilaAltura * 1 || itemLargura * 1 > mochilaLargura * 1) { | |
if (!contadorRotacao) { | |
contadorRotacao = true; | |
rotacionarItem(id); | |
if (encaixar(id)){ | |
contadorRotacao = false; | |
return false; | |
} | |
contadorRotacao = false; | |
} else { | |
escrever("Item não cabe na mochila"); | |
return false; | |
} | |
} | |
for (let my = 1; my + itemAltura <= mochilaAltura + 1; my++) { | |
for (let mx = 1; mx + itemLargura <= mochilaLargura + 1; mx++) { | |
console.log(mx,my); | |
let boolNCoube = false; | |
for (let y = my; y <= mochilaAltura; y++) { | |
for (let x = mx; x <= mochilaLargura; x++) { | |
if (document.getElementById(x + "," + y).innerText != "") { | |
boolNCoube = true; | |
} | |
} | |
} | |
if (!boolNCoube) { | |
for (let y = my; y - my <= itemAltura - 1; y++) { | |
for (let x = mx; x - mx <= itemLargura - 1; x++) { | |
document.getElementById(x + "," + y).innerText = simbolo; | |
document.getElementById(x + "," + y).setAttribute("iditem", id); | |
document.getElementById(x + "," + y).setAttribute("onclick", "jogarNoChao('" + id + "')"); | |
document.getElementById(x + "," + y).style.cursor="pointer"; | |
} | |
} | |
document.getElementById(id).style.display = "none"; | |
document.getElementById("rodar_"+id).style.display = "none"; | |
return true; | |
} | |
} | |
} | |
if (!contadorRotacao) { | |
contadorRotacao = true; | |
rotacionarItem(id); | |
encaixar(id); | |
contadorRotacao = false; | |
} else { | |
escrever("Item não cabe na mochila"); | |
return false; | |
} | |
} | |
function jogarNoChao(id) { | |
document.getElementById(id).style.display = ""; | |
document.getElementById("rodar_"+id).style.display = ""; | |
let mochila = document.getElementById("mochila"); | |
let mochilaAltura = mochila.getAttribute("altura") * 1; | |
let mochilaLargura = mochila.getAttribute("largura") * 1; | |
for (let my = 1; my <= mochilaAltura ; my++) { | |
for (let mx = 1; mx <= mochilaLargura ; mx++) { | |
if (document.getElementById(mx + "," + my).getAttribute("iditem") == id) { | |
document.getElementById(mx + "," + my).setAttribute("iditem",""); | |
document.getElementById(mx + "," + my).innerText=""; | |
document.getElementById(mx + "," + my).style.cursor=""; | |
} | |
} | |
} | |
} | |
</script> | |
<script> | |
escrever("Mochila"); | |
gerarMochila(getRandomIntInclusive(1, 10), getRandomIntInclusive(1, 10)); | |
escrever("Itens no chão"); | |
geraItens(getRandomIntInclusive(1, 3), getRandomIntInclusive(1, 3)); | |
geraItens(getRandomIntInclusive(1, 3), getRandomIntInclusive(1, 3)); | |
geraItens(getRandomIntInclusive(1, 3), getRandomIntInclusive(1, 3)); | |
geraItens(getRandomIntInclusive(1, 3), getRandomIntInclusive(1, 3)); | |
geraItens(getRandomIntInclusive(1, 3), getRandomIntInclusive(1, 3)); | |
geraItens(getRandomIntInclusive(1, 3), getRandomIntInclusive(1, 3)); | |
geraItens(getRandomIntInclusive(1, 3), getRandomIntInclusive(1, 3)); | |
geraItens(getRandomIntInclusive(1, 3), getRandomIntInclusive(1, 3)); | |
geraItens(getRandomIntInclusive(1, 3), getRandomIntInclusive(1, 3)); | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment