Skip to content

Instantly share code, notes, and snippets.

@daltonwells-svg

daltonwells-svg/game4_vinicial_imersao.markdown

Forked from rodnitt/game4_vinicial_imersao.markdown
Created January 29, 2026 18:16
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save daltonwells-svg/98294da1f224f16273a2b2333ab8c843 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save daltonwells-svg/98294da1f224f16273a2b2333ab8c843 to your computer and use it in GitHub Desktop.
Download ZIP
game4_VInicial_imersão
Raw
index.html
<body>
<div class="logo">
<img src="https://i.postimg.cc/GpCxYmvc/title.png" alt="Logo da Imersão Dev" />
</div>
<div class="titulo">
<h2>Academia de Platão - Cabo de Guerra</h2>
</div>
<main class="conteudo-jogo">
<div class="apresentacao">
<p>Diz que mente e corpo devem se desenvolver juntos, pois uma mente sábia vem com um corpo saudável, e um corpo forte vem com uma mente bem instruída.</p>
<p>Portanto, Platão convoca todos os filósofos para comparecerem em sua Academia e participarem de uma disputa de Cabo de Guerra, provando dentre todos, os mais aptos.</p>
<p>Após receberem este inusitado convite, alguns de seus colegas amantes do saber aparecem e se dispõem a passar por essa provação. Você é um deles, o qual terá que juntar seu raciocínio com os atributos de outros para criar uma equipe, mas tenha cuidado, afinal, do outro lado terá nada menos que o mais idealista dos filósofos, o Platão.</p>
<div style="text-align: center">
<button onclick="onPlayClick()">Jogar</button>
<button onclick="setInstructionsScreen()">Instruções</button>
</div>
</div>
<div class="nameInput pretty" style="display:block; text-align:center">
<span>Nome do jogador: </span>
<input maxlength=16 value="Filósofo" />
</div>
<div class="instrucoes">
<p>Escreva seu nome no campo "<em>Nome do Jogador</em>" e depois aperte o botão "<em>Jogar</em>".</p>
<p>Seis filósofos estarão disponíveis para que você escolha três para sua equipe. Você e Platão escolherão alternadamente seus colegas. Para escolher qual a melhor opção, haverá uma lista de atributos.</p>
<p><strong>Força</strong> mede quanto o filósofo influencia no movimento da corda para seu lado; <strong>Resiliência</strong> indica o quão rápido é a recuperação do filósofo quando estiver cansado; <strong>Tenacidade</strong> mede o tempo que o filósofo consegue durar puxando o cabo até cansar; e <strong>Fricção</strong> indica a resistência que o filósofo tem em ser arrastado para o lado adversário.</p>
<p>Para escolher um filósofo, basta clicar em seu <em>banner</em>. Após todos escolhidos, a disputa começa e quando o tempo da partida terminar o resultado será divulgado.</p>
<p>Boa sorte!</p>
<div style="text-align: center">
<button onclick="setMainScreen()">Voltar</button>
</div>
</div>
<div class="selecao" style="display:none">
<div class="selecao_instrucao" style="display:block">
<p style="text-align:center">Escolha um filósofo para seu time.</p>
</div>
<div class="listaOpcao" style="display:flex; justify-content:center">
<div class="opcao" onclick="onOptionSelected(0)">
<p><strong class="nome" style="color:#793922">Platão</strong></p>
<img class="retrato" src="https://thegreatthinkers.org/plato/wp-content/uploads/sites/9/2013/06/Plato.jpg" />
<p><strong>Força</strong></p>
<p class="forca">10</p>
<p><strong>Resiliência</strong></p>
<p class="resiliencia">10</p>
<p><strong>Tenacidade</strong></p>
<p class="tenacidade">10</p>
<p><strong>Fricção</strong></p>
<p class="friccao">10</p>
</div>
<div class="opcao" onclick="onOptionSelected(1)">
<p><strong class="nome" style="color:#793922">Platão</strong></p>
<img class="retrato" src="https://thegreatthinkers.org/plato/wp-content/uploads/sites/9/2013/06/Plato.jpg" />
<p><strong>Força</strong></p>
<p class="forca">10</p>
<p><strong>Resiliência</strong></p>
<p class="resiliencia">10</p>
<p><strong>Tenacidade</strong></p>
<p class="tenacidade">10</p>
<p><strong>Fricção</strong></p>
<p class="friccao">10</p>
</div>
<div class="opcao" onclick="onOptionSelected(2)">
<p><strong class="nome" style="color:#793922">Platão</strong></p>
<img class="retrato" src="https://thegreatthinkers.org/plato/wp-content/uploads/sites/9/2013/06/Plato.jpg" />
<p><strong>Força</strong></p>
<p class="forca">10</p>
<p><strong>Resiliência</strong></p>
<p class="resiliencia">10</p>
<p><strong>Tenacidade</strong></p>
<p class="tenacidade">10</p>
<p><strong>Fricção</strong></p>
<p class="friccao">10</p>
</div>
<div class="opcao" onclick="onOptionSelected(3)">
<p><strong class="nome" style="color:#793922">Platão</strong></p>
<img class="retrato" src="https://thegreatthinkers.org/plato/wp-content/uploads/sites/9/2013/06/Plato.jpg" />
<p><strong>Força</strong></p>
<p class="forca">10</p>
<p><strong>Resiliência</strong></p>
<p class="resiliencia">10</p>
<p><strong>Tenacidade</strong></p>
<p class="tenacidade">10</p>
<p><strong>Fricção</strong></p>
<p class="friccao">10</p>
</div>
<div class="opcao" onclick="onOptionSelected(4)">
<p><strong class="nome" style="color:#793922">Platão</strong></p>
<img class="retrato" src="https://thegreatthinkers.org/plato/wp-content/uploads/sites/9/2013/06/Plato.jpg" />
<p><strong>Força</strong></p>
<p class="forca">10</p>
<p><strong>Resiliência</strong></p>
<p class="resiliencia">10</p>
<p><strong>Tenacidade</strong></p>
<p class="tenacidade">10</p>
<p><strong>Fricção</strong></p>
<p class="friccao">10</p>
</div>
<div class="opcao" onclick="onOptionSelected(5)">
<p><strong class="nome" style="color:#793922">Platão</strong></p>
<img class="retrato" src="https://thegreatthinkers.org/plato/wp-content/uploads/sites/9/2013/06/Plato.jpg" />
<p><strong>Força</strong></p>
<p class="forca">10</p>
<p><strong>Resiliência</strong></p>
<p class="resiliencia">10</p>
<p><strong>Tenacidade</strong></p>
<p class="tenacidade">10</p>
<p><strong>Fricção</strong></p>
<p class="friccao">10</p>
</div>
</div>
</div>
<div class="arena">
<div class="divisao"></div>
<div class="cabo">
<div class="ponto"></div>
<img class="retrato" id="a" src="https://thegreatthinkers.org/plato/wp-content/uploads/sites/9/2013/06/Plato.jpg">
<div class="hud" id="a"><div></div></div></img>
<img class="retrato" id="b" src="https://thegreatthinkers.org/plato/wp-content/uploads/sites/9/2013/06/Plato.jpg">
<div class="hud" id="b"><div></div></div></img>
<img class="retrato" id="c" src="https://thegreatthinkers.org/plato/wp-content/uploads/sites/9/2013/06/Plato.jpg">
<div class="hud" id="c"><div></div></div></img>
<img class="retrato" id="d" src="https://thegreatthinkers.org/plato/wp-content/uploads/sites/9/2013/06/Plato.jpg">
<div class="hud" id="d"><div></div></div></img>
<img class="retrato" id="e" src="https://thegreatthinkers.org/plato/wp-content/uploads/sites/9/2013/06/Plato.jpg">
<div class="hud" id="e"><div></div></div></img>
<img class="retrato" id="f" src="https://thegreatthinkers.org/plato/wp-content/uploads/sites/9/2013/06/Plato.jpg">
<div class="hud" id="f"><div></div></div></img>
</div>
<div class="timer">
<p><strong>10s</strong></p>
</div>
<div class="timer" style="left:0%;margin-left:0px"><p>Platão</p></div>
<div class="timer" style="left:auto;right:0%;margin-left:auto;width:auto;padding:0px 15px"><p class="nome">Platão</p></div>
<div class="resultado" style="text-align:center">
<p style="font-size:24pt"><strong></strong></p>
<button onclick="setMainScreen()">Jogar novamente</button>
</div>
</div>
</main>
</body>
Raw
script.js
const presentationBlock = document.querySelector(".apresentacao");
const nameInputBlock = document.querySelector(".nameInput");
const nameInput = nameInputBlock.querySelector("input");
const instructionsBlock = document.querySelector(".instrucoes");
const selectionBlock = document.querySelector(".selecao");
const selectionInstruction = document.querySelector(".selecao_instrucao p");
const optionList = selectionBlock.querySelector(".listaOpcao");
const options = optionList.querySelectorAll(".opcao");
const arena = document.querySelector(".arena");
const nameText = arena.querySelector(".nome");
const cable = document.querySelector(".cabo");
const pawns = document.querySelectorAll(".cabo .retrato");
const hudbars = document.querySelectorAll(".hud div");
const timerText = document.querySelector(".timer p strong");
const resultBlock = document.querySelector(".resultado");
const resultText = resultBlock.querySelector("strong");
const philosophersPool = [
{
name: "Tales",
image: "https://praticaspedagogicas.com.br/blog/wp-content/uploads/2014/04/tales.jpg"
},
{
name: "Pitágoras",
image: "https://static.todamateria.com.br/upload/pi/ta/pitagoras-og.jpg?class=ogImageSquare"
},
{
name: "Demócrito",
image: "https://upload.wikimedia.org/wikipedia/commons/7/76/Unknown_greek_pushkin.jpg"
},
{
name: "Confúcio",
image: "https://cdn.pensador.com/img/authors/co/nf/confucio-2-l.jpg"
},
{
name: "Parmênides",
image: "https://descomplica-blog-production.s3-sa-east-1.amazonaws.com/2015/04/parmenides_velia_jan.jpg"
},
{
name: "Heráclito",
image: "https://www.estudantedefilosofia.com.br/fotos/heraclito.jpg"
},
{
name: "Protágoras",
image: "https://revjorgeaquino.wordpress.com/wp-content/uploads/2016/07/protagoras.jpg"
},
{
name: "Górgias",
image: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjftmTecfZi25lYpfo63Enlbjr8fol-8bp_jonP630ja5a6_54Cnm4EAKDJrdcpLHH8b64-n0mLKratV5QTE2QbXgOiDVIDiqsm8d2dAyOMzXfn5YfsM_NSzKR6M1ClXgkYi0HqGkp1o3Y/s1600/gorgias-leontinos.jpg"
},
{
name: "Sócrates",
image: "https://greciantiga.org/img/g/gi0014.jpg"
},
{
name: "Aristóteles",
image: "https://upload.wikimedia.org/wikipedia/commons/a/ae/Aristotle_Altemps_Inv8575.jpg"
},
{
name: "Antístenes",
image: "https://upload.wikimedia.org/wikipedia/commons/5/5a/Antisthenes_BM_1838.jpg"
},
{
name: "Diógenes",
image: "https://i0.wp.com/www.culturamas.es/wp-content/uploads/2018/10/diogenes4.png"
},
{
name: "Zenão",
image: "https://www.percepolegatto.com.br/wp-content/uploads/2012/03/Zen%C3%A3o-551.jpg"
},
{
name: "Epicuro",
image: "https://www.fundacaoherculanopires.org.br/images/epicuro400.jpg"
},
{
name: "Pirro",
image: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9uwo_NQy5H0ra3UcCg1yzA9pVUnptI2xE6kHPQ6ERmiVuRcPsu6gzOmtRBnvlbRGb0xCeTvB-5V7jdiAexU9WKxY4-wzRkgpaGecFi-UZW3l4iEO3eMxA9Zs5VktdEH0Gqvc_7xNANvMf/s1600/pyrrho.jpg"
},
{
name: "Epicteto",
image: "https://www.estudantedefilosofia.com.br/fotos/epicteto.jpg"
},
{
name: "Marco Aurélio",
image: "https://upload.wikimedia.org/wikipedia/commons/1/1c/Marcus_Aurelius_Louvre_MR561_n02.jpg"
},
{
name: "Agostinho",
image: "https://conteudo.imguol.com.br/c/noticias/47/2021/08/25/santo-agostinho-1629907459782_v2_1x1.png"
},
{
name: "Hipátia",
image: "https://fotos.web.sapo.io/i/B5c1848a4/22453398_ql4Ci.jpeg"
},
{
name: "Cícero",
image: "https://cdn.pensador.com/img/authors/ci/ce/cicero-l.jpg"
},
{
name: "Boécio",
image: "https://upload.wikimedia.org/wikipedia/commons/0/0e/Boetius.png"
},
{
name: "Tomás de Aquino",
image: "https://nova-escola-producao.s3.amazonaws.com/r7uJ6ut4vhAnrmHZ4xcEk4Vy2mBjkBY7m4YJTc2k5R3bKasAgAD5WDqkpSpX/tomas-aquino.jpg"
},
{
name: "Maquiavel",
image: "https://s1.static.brasilescola.uol.com.br/be/conteudo/images/maquiavel-ensinou-como-governante-deveria-agir-quais-virtudes-deveria-ter-fim-se-manter-no-poder-aumentar-suas-conquistas-1314707388.jpg"
},
{
name: "Ockham",
image: "https://www.philosophybasics.com/photos/ockham.jpg"
},
{
name: "Lutero",
image: "https://i0.wp.com/teologiabrasileira.com.br/wp-content/uploads/2018/08/sola_fide_ok.jpg"
},
{
name: "Montaigne",
image: "https://upload.wikimedia.org/wikipedia/commons/5/5a/Portrait_of_Michel_de_Montaigne%2C_circa_unknown.jpg"
},
{
name: "Decartes",
image: "https://upload.wikimedia.org/wikipedia/commons/thumb/7/73/Frans_Hals_-_Portret_van_Ren%C3%A9_Descartes.jpg/640px-Frans_Hals_-_Portret_van_Ren%C3%A9_Descartes.jpg"
},
{
name: "Bacon",
image: "https://static.todamateria.com.br/upload/fr/an/francis-bacon-og.jpg"
},
{
name: "Hume",
image: "https://s2-oglobo.glbimg.com/7Gx4Lyo9FY55c9d9BS0CflVOPZ0=/0x134:1669x1476/888x0/smart/filters:strip_icc()/i.s3.glbimg.com/v1/AUTH_da025474c0c44edd99332dddb09cabe8/internal_photos/bs/2024/k/3/Ak5RAnSfilpIi2DNjNPA/39752363-1211.2001-divulgacao-reproducao-pv-economista-david-hume.jpg"
},
{
name: "Spinoza",
image: "https://upload.wikimedia.org/wikipedia/commons/thumb/e/ea/Spinoza.jpg/1200px-Spinoza.jpg"
},
{
name: "Locke",
image: "https://static.todamateria.com.br/upload/jo/hn/john-locke-og.jpg"
},
{
name: "Montesquieu",
image: "https://pt.quizur.com/_image?href=https://img.quizur.com/f/img640f4fcca02a60.64096396.png"
},
{
name: "Hobbes",
image: "https://upload.wikimedia.org/wikipedia/commons/d/d8/Thomas_Hobbes_%28portrait%29.jpg"
},
{
name: "Rousseau",
image: "https://upload.wikimedia.org/wikipedia/commons/c/c4/Maurice_Quentin_de_La_Tour_-_Portrait_of_Jean-Jacques_Rousseau_-_WGA12360.jpg"
},
{
name: "Newton",
image: "https://cdn.pensador.com/img/authors/is/aa/isaac-newton-l.jpg"
},
{
name: "Berkeley",
image: "https://www.estudantedefilosofia.com.br/fotos/george%20berkeley.jpg"
},
{
name: "Kant",
image: "https://upload.wikimedia.org/wikipedia/commons/thumb/4/43/Immanuel_Kant_%28painted_portrait%29.jpg/416px-Immanuel_Kant_%28painted_portrait%29.jpg"
},
{
name: "Hegel",
image: "https://static.mundoeducacao.uol.com.br/mundoeducacao/2020/01/1-hegel.jpg"
},
{
name: "Schopenhauer",
image: "https://razaoinadequada.com/wp-content/uploads/2020/02/peinture__lhuile_de_julius_hamel_1856_2.jpg"
},
{
name: "Comte",
image: "https://www.estudantedefilosofia.com.br/fotos/auguste%20comte.jpg"
},
{
name: "Marx",
image: "https://www.infoescola.com/wp-content/uploads/2010/07/karl_marx.jpg"
},
{
name: "Nietzsche",
image: "https://upload.wikimedia.org/wikipedia/commons/1/1b/Nietzsche187a.jpg"
},
{
name: "Heidegger",
image: "https://static.todamateria.com.br/upload/ma/rt/martinheideggercc.jpg"
},
{
name: "Wittgenstein",
image: "https://www.philosophybasics.com/photos/wittgenstein.jpg"
},
{
name: "Arendt",
image: "https://filosofia.arcos.org.br/content/images/2021/05/Hannah-Arendt.jpeg"
},
{
name: "Popper",
image: "https://upload.wikimedia.org/wikipedia/commons/4/43/Karl_Popper.jpg"
},
{
name: "Foucault",
image: "https://razaoinadequada.com/wp-content/uploads/2014/11/foucault1.jpg"
},
{
name: "Habermas",
image: "https://upload.wikimedia.org/wikipedia/commons/thumb/2/23/JuergenHabermas_retouched.jpg/250px-JuergenHabermas_retouched.jpg"
},
{
name: "Rorty",
image: "https://platform.vox.com/wp-content/uploads/sites/2/chorus/uploads/chorus_asset/file/7949035/74540047.jpg"
},
{
name: "Beauvoir",
image: "https://conteudo.imguol.com.br/c/entretenimento/ed/2018/11/05/simone-de-beauvoir-1541445854372_v2_1x1.jpg"
},
{
name: "Philippa Foot",
image: "https://ethics.org.au/wp-content/uploads/2024/04/Foot-650.png"
},
{
name: "Clovis",
image: "https://digital.unesc.net/hubfs/Clovis%20de%20Barros.jpg"
}
];
const selectionList = [];
const playerTeam = [];
const platoTeam = [];
let canSelect = false;
let selectionIndex = 0;
let isPlatoSelecting = false;
let platoChoiceTimer = 1;
let isInArena = false;
let cableDesloc = 0;
let gameTimer = 15;
const matchTime = gameTimer;
const energyCostRate = 350;
const energyRecoverRate = 4;
const cableRate = 40;
const cableMid = -260;
class Philosopher {
constructor(name, imageSrc, strength, resilience, tenacity, friction) {
this.name = name;
this.imageSrc = imageSrc;
this.strength = strength;
this.resilience = resilience;
this.tenacity = tenacity;
this.friction = friction;
}
}
// MANAGE
function setInstructionsScreen () {
presentationBlock.style.display = "none";
nameInputBlock.style.display = "none";
instructionsBlock.style.display = "block";
}
function setMainScreen () {
cableDesloc = 0;
resultBlock.style.display = "none";
arena.style.display = "none";
instructionsBlock.style.display = "none";
presentationBlock.style.display = "block";
nameInputBlock.style.display = "block";
}
function onPlayClick () {
presentationBlock.style.display = "none";
nameInputBlock.style.display = "none";
nameText.innerText = nameInput.value;
generateSelectionList();
for (let i = 0; i < 6; i ++) {
let title = options[i].querySelector(".nome");
let portrait = options[i].querySelector(".retrato");
let strength = options[i].querySelector(".forca");
let resilience = options[i].querySelector(".resiliencia");
let tenacity = options[i].querySelector(".tenacidade");
let friction = options[i].querySelector(".friccao");
title.innerText = selectionList[i].name;
portrait.src = selectionList[i].imageSrc;
strength.innerText = selectionList[i].strength;
resilience.innerText = selectionList[i].resilience;
tenacity.innerText = selectionList[i].tenacity;
friction.innerText = selectionList[i].friction;
selectionList[i].team = "none";
selectionList[i].energy = 100;
selectionList[i].isPulling = true;
selectionList[i].bars = {};
}
canSelect = true;
selectionBlock.style.display = "block";
selectionInstruction.innerText = "Escolha um filósofo para seu time.";
}
function generateSelectionList () {
const ppl = philosophersPool.length;
let left = 6;
for (let i = 0; i < ppl; i++) {
let rn = Math.random();
if (rn < left / (ppl - i)) {
selectionList[6-left] = new Philosopher(
philosophersPool[i].name,
philosophersPool[i].image,
Math.floor(Math.random() * 11) + 5,
Math.floor(Math.random() * 8) + 3,
Math.floor(Math.random() * 6) + 5,
Math.floor(Math.random() * 11) + 5);
left--;
if (left <= 0) break;
}
}
}
function setArena () {
selectionBlock.style.display = "none";
for (let i = 0; i < 6; i++) {
if (i < 3) {
pawns[i].src = platoTeam[2 - i].imageSrc;
pawns[i].title = platoTeam[2 - i].name + " FOR(" + platoTeam[2 - i].strength + ") RES(" + platoTeam[2 - i].resilience + ") TEN(" + platoTeam[2 - i].tenacity + ") FRI(" + platoTeam[2 - i].friction + ")";
platoTeam[2 - i].pawn = pawns[i];
platoTeam[2 - i].bar = hudbars[i];
} else {
pawns[i].src = playerTeam[i - 3].imageSrc;
pawns[i].title = playerTeam[i - 3].name + " FOR(" + playerTeam[i - 3].strength + ") RES(" + playerTeam[i - 3].resilience + ") TEN(" + playerTeam[i - 3].tenacity + ") FRI(" + playerTeam[i - 3].friction + ")";
playerTeam[i - 3].pawn = pawns[i];
playerTeam[i - 3].bar = hudbars[i];
}
hudbars[i].style.height = "100%";
hudbars[i].style.top = "0%";
hudbars[i].style.background = "green";
options[i].className = "opcao";
}
arena.style.display = "block";
isInArena = true;
}
function setResultScreen () {
let t = "Empate!";
if (cableDesloc > 0) {
t = "Parabéns! Equipe de " + nameInput.value + " venceu!";
}
else {
t = "Platão, o mais idealista dos filósofos, vence a disputa!"
}
resultText.innerText = t;
resultBlock.style.display = "block";
}
// SELECTIONS
function onOptionSelected (index) {
if (!canSelect) return;
if (selectionList[index].team != "none") return;
canSelect = false;
options[index].className = "yourteam";
selectionList[index].team = "player";
playerTeam[selectionIndex] = selectionList[index];
isPlatoSelecting = true;
}
function platoSelect () {
if (platoChoiceTimer == 1) {
selectionInstruction.innerText = "Platão está escolhendo seu filósofo... Aguarde."
}
platoChoiceTimer -= tick;
if (platoChoiceTimer <= 0) {
let si = 0; // selection index
let gv = 0; // greater value
for (let i = 0; i < 6; i++) {
if (selectionList[i].team === "none") {
let v = selectionList[i].strength +
selectionList[i].resilience +
selectionList[i].tenacity +
selectionList[i].friction;
if (v > gv) {
si = i;
gv = v;
}
}
}
options[si].className = "platoteam";
selectionList[si].team = "plato";
platoTeam[selectionIndex] = selectionList[si];
selectionIndex++;
selectionInstruction.innerText = "Platão escolheu " + selectionList[si].name + "." +
" Agora é sua vez de escolher seu " + (selectionIndex+1) + "º filósofo.";
canSelect = true;
isPlatoSelecting = false;
platoChoiceTimer = 1;
}
}
// TIME
let tick = 0;
const maxTick = 0.068;
let lastTime = 0;
function setTick (newTime) {
let newTick = (newTime - lastTime) / 1000;
lastTime = newTime;
tick = Math.min(newTick, maxTick);
}
// ENGINE
function run (timePassed) {
setTick(timePassed);
if (isPlatoSelecting) {
platoSelect();
}
if (selectionIndex > 2) {
canSelect = false;
selectionIndex = 0;
setArena();
}
if (isInArena) {
let desloc = 0;
let lFriction = 0;
let rFriction = 0;
for (let i = 0; i < 6; i++) {
if (selectionList[i].isPulling) { // Se filósofo estiver puxando
if (selectionList[i].team === "plato") {
desloc -= selectionList[i].strength;
rFriction += selectionList[i].friction;
} else {
desloc += selectionList[i].strength;
lFriction += selectionList[i].friction;
}
selectionList[i].energy -= energyCostRate * tick / selectionList[i].tenacity;
if (selectionList[i].energy <= 0) {
selectionList[i].energy = 0;
selectionList[i].isPulling = false;
selectionList[i].bar.style.background = "grey";
}
}
else { // Se filósofo estiver descansando
if (selectionList[i].team === "plato") {
rFriction += selectionList[i].friction;
} else {
lFriction += selectionList[i].friction;
}
selectionList[i].energy += energyRecoverRate * tick * selectionList[i].resilience;
if (selectionList[i].energy >= 100) {
selectionList[i].energy = 100;
selectionList[i].isPulling = true;
selectionList[i].bar.style.background = "green";
}
}
selectionList[i].bar.style.height = selectionList[i].energy + "%";
selectionList[i].bar.style.top = 100 - selectionList[i].energy + "%";
}
if (desloc < 0) {
cableDesloc += (desloc / lFriction) * cableRate * tick;
} else {
cableDesloc += (desloc / rFriction) * cableRate * tick;
}
cable.style.marginLeft = cableMid + cableDesloc + "px";
gameTimer -= tick;
timerText.innerText = Math.ceil(gameTimer) + "s";
if (gameTimer <= 0) {
gameTimer = matchTime;
isInArena = false;
setResultScreen();
}
}
window.requestAnimationFrame(run);
}
function start () {
presentationBlock.style.display = "block";
window.requestAnimationFrame(run);
}
start();
Raw
style.css
body {
background: url("https://upload.wikimedia.org/wikipedia/commons/c/c4/Escola_de_Atenas_-_Vaticano_2.jpg") no-repeat center
center fixed;
background-size: cover;
font-family: "Gabarito", sans-serif;
margin: 20px 100px;
}
.logo {
text-align: end;
}
.logo img {
width: 40%;
}
/* Caixa principal do jogo */
.pretty, .apresentacao, .instrucoes, .selecao_instrucao, .resultado {
background: rgba(230, 230, 230, 1);
box-shadow: 0 0 5px #fff07b;
margin: 30px;
padding: 20px 30px;
display: none;
margin-top: 2rem;
}
.opcao, .yourteam, .platoteam {
margin: 30px;
padding: 10px 30px;
margin-top: 2rem;
text-align: center;
}
.opcao {
background: rgba(230, 230, 250, 1);
box-shadow: 0 0 5px #004079;
cursor: pointer;
}
:is(.opcao, .yourteam, .platoteam) p {
margin-top: 3pt;
}
:is(.opcao, .yourteam, .platoteam) p:has(strong) {
margin-bottom: 8pt;
}
:is(.opcao, .yourteam, .platoteam, .cabo) img {
height: 50px;
width: 50px;
}
.opcao:hover {
background: rgba(230, 251, 230, 1);
}
.yourteam {
background: lightblue;
box-shadow: 0 0 5px blue;
}
.platoteam {
background: rgba(255, 210, 210, 1);
box-shadow: 0 0 5px red;
}
.arena {
background: white;
box-shadow: 0 0 5px lightgrey;
height: 300px;
position: relative;
display: none;
}
.arena .divisao {
background: lightgrey;
position: relative;
height: 300px;
width: 2px;
left: 50%;
margin-left: -1px;
}
.cabo {
background: brown;
position: relative;
height: 5px;
width: 520px;
bottom: 100px;
left: 50%;
margin-left: -260px;
}
.ponto {
background: yellow;
position: relative;
height: 100%;
width: 4px;
left: 258px;
}
.cabo img {
position: absolute;
top: -30px;
}
.cabo #a {
left: 0px;
}
.cabo #b {
left: 70px;
}
.cabo #c {
left: 140px;
}
.cabo #d {
left: 330px;
}
.cabo #e {
left: 400px;
}
.cabo #f {
left: 470px;
}
.hud {
background: lightgrey;
height: 40px;
width: 10px;
position: absolute;
bottom: 50px;
margin-left: 20px;
}
.hud div {
background: green;
height: 20%;
width: auto;
position: relative;
top: 80%;
}
.timer {
background: white;
border: 1px solid lightgrey;
position: absolute;
width: 70px;
top: 0px;
left: 50%;
margin-left: -35px;
text-align: center;
}
/* Títulos e textos */
.titulo {
background: rgba(230, 230, 230, 1);
box-shadow: 0 0 5px #fff07b;
margin: 30px;
padding: 1px 30px;
color: #d0b119;
}
p {
font-size: 14pt;
color: #332727;
}
button {
padding: 10px 20px;
margin: 10px;
border: none;
background: #793922;
color: white;
cursor: pointer;
transition: background 0.3s;
}
button:hover {
background: #d0b119;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment