Synapi - Jogo da Cobra

Com pergunta e resposta (V ou F): Verde (Verdadeiro) e Vermelho (Falso).

<!DOCTYPE html>

<head>

<title>Snake Quiz</title>

<style>

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700&display=swap');

* { margin:0; padding:0; box-sizing:border-box; font-family:'Open Sans',sans-serif; }

body { display:flex; align-items:center; justify-content:center; min-height:100vh; background:#E3F2FD; }

.wrapper {

width:65vmin; height:75vmin; display:flex; overflow:hidden; flex-direction:column; justify-content:center;

border-radius:5px; background:#293447; box-shadow:0 20px 40px rgba(52,87,220,0.2); position:relative;

}

.game-details {

color:#B8C6DC; font-weight:500; font-size:1.1rem; padding:10px 20px;

display:flex; justify-content:space-between; align-items:center;

}

.question {

font-weight:bold;

white-space: normal; /* Permite que o texto quebre a linha */

text-align: center;

line-height: 1.2;

flex: 1; /* Permite que o texto ocupe o espaço disponível */

}

.play-board {

flex:1;

display:grid; background:#212837; grid-template:repeat(30,1fr)/repeat(30,1fr);

}

.play-board .food-green { background:#00FF00; }

.play-board .food-yellow { background:#FF0000; }

.play-board .head { background:#60CBFF; }

.controls { display:none; justify-content:space-between; }

.controls i {

padding:25px 0; text-align:center; font-size:1.3rem; color:#B8C6DC;

width:calc(100%/4); cursor:pointer; border-right:1px solid #171B26;

}

.game-over {

position:absolute; inset:0; background:rgba(0,0,0,0.75);

display:flex; flex-direction:column; align-items:center; justify-content:center;

color:white; font-size:1.5rem; gap:20px;

}

.game-over button {

padding:10px 20px; font-size:1rem; background:#60CBFF; border:none;

border-radius:5px; cursor:pointer; font-weight:bold; transition:background 0.2s;

}

.game-over button:hover { background:#4ab4e4; }

@media screen and (max-width:800px){

.wrapper{ width:90vmin; height:115vmin; }

.game-details{ font-size:1rem; padding:15px 27px; flex-direction:column; gap:5px; }

.controls{ display:flex; }

.controls i{ padding:15px 0; font-size:1rem; }

}

</style>

</head>

<body>

<span class="score">Score: 0</span>

<span class="high-score">High Score: 0</span>

</div>

</div>

<button onclick="resetGame()">Reiniciar</button>

</div>

// ======= DADOS DO QUIZ =========

const questions = [

{ texto: "1. Divisão Celular: Processo pelo qual uma célula-filha origina uma célula-mãe.", resposta: "F" },

{ texto: "2. Mitose: Divisão celular associada ao crescimento, regeneração e reprodução em unicelulares, gerando células idênticas.", resposta: "V" },

{ texto: "3. Meiose: Divisão expansional que forma células diplóides, com número completo de cromossomos.", resposta: "F" },

{ texto: "4. Crescimento Celular: Aumento do número de células no organismo.", resposta: "V" },

{ texto: "5. Regeneração: Reposição de células danificadas por meiose.", resposta: "F" },

{ texto: "6. Reprodução Unicelular: Formação de novos indivíduos por mitose em organismos unicelulares.", resposta: "V" },

{ texto: "7. Ciclo Celular: Sequência de eventos que impede uma célula de duplicar seu DNA e se dividir.", resposta: "F" },

{ texto: "8. Interfase: Período de preparação para a divisão, dividido em G1, S e G2.", resposta: "V" },

{ texto: "9. Fase G1: Redução celular e destruição de organelas.", resposta: "F" },

{ texto: "10. Fase G0: Estado de repouso permanente, sem divisão (ex: neurônios).", resposta: "V" },

];

// Mapeia as respostas para as cores. "V" -> Verde; "F" -> Amarelo

const colorSequence = questions.map(q => q.resposta === "V" ? "green" : "yellow");

// ======= SELETORES DE ELEMENTOS =========

const playBoard = document.querySelector(".play-board");

const scoreElement = document.querySelector(".score");

const highScoreElement = document.querySelector(".high-score");

const questionElement = document.querySelector(".question"); // Elemento para a pergunta

const controls = document.querySelectorAll(".controls i");

const gameOverScreen = document.querySelector(".game-over");

// ======= VARIÁVEIS DO JOGO =========

let gameOver = false;

let greenFoodX, greenFoodY, yellowFoodX, yellowFoodY;

let snakeX, snakeY, velocityX, velocityY, snakeBody, setIntervalId;

let score = 0;

let highScore = localStorage.getItem("high-score") || 0;

highScoreElement.innerText = `High Score: ${highScore}`;

// ======= FUNÇÕES =========

function initVariables() {

snakeX = 5; snakeY = 5;

velocityX = 0; velocityY = 0;

snakeBody = [];

score = 0;

gameOver = false;

scoreElement.innerText = `Score: ${score}`;

updateFoodPositions();

// Exibe a primeira pergunta ao iniciar o jogo

questionElement.innerText = questions[0].texto;

}

function updateFoodPositions() {

greenFoodX = Math.floor(Math.random()*30)+1;

greenFoodY = Math.floor(Math.random()*30)+1;

yellowFoodX = Math.floor(Math.random()*30)+1;

yellowFoodY = Math.floor(Math.random()*30)+1;

}

function handleGameOver() {

clearInterval(setIntervalId);

gameOver = true;

gameOverScreen.style.display = "flex";

}

function changeDirection(e){

if(e.key==="ArrowUp" && velocityY!=1){ velocityX=0; velocityY=-1; }

else if(e.key==="ArrowDown" && velocityY!=-1){ velocityX=0; velocityY=1; }

else if(e.key==="ArrowLeft" && velocityX!=1){ velocityX=-1; velocityY=0; }

else if(e.key==="ArrowRight" && velocityX!=-1){ velocityX=1; velocityY=0; }

}

controls.forEach(btn=>btn.addEventListener("click",()=>changeDirection({key:btn.dataset.key})));

function initGame(){

if(gameOver) return handleGameOver();

let html = `<div class="food-green" style="grid-area:${greenFoodY}/${greenFoodX}"></div>`;

html += `<div class="food-yellow" style="grid-area:${yellowFoodY}/${yellowFoodX}"></div>`;

// Define a cor correta a ser comida com base na sequência gerada a partir das perguntas.

const targetColor = colorSequence[score];

// Exibe a próxima pergunta.

if (score < questions.length) {

questionElement.innerText = questions[score].texto;

} else {

questionElement.innerText = "Fim do Jogo!";

return handleGameOver();

}

// verifica se a cobra comeu comida

if(snakeX===greenFoodX && snakeY===greenFoodY){

if(targetColor!=="green") return gameOver=true; // comeu errado

scorePoint();

updateFoodPositions();

}

else if(snakeX===yellowFoodX && snakeY===yellowFoodY){

if(targetColor!=="yellow") return gameOver=true; // comeu errado

scorePoint();

updateFoodPositions();

}

// movimenta cobra

snakeX+=velocityX; snakeY+=velocityY;

for(let i=snakeBody.length-1;i>0;i--) snakeBody[i]=snakeBody[i-1];

snakeBody[0]=[snakeX,snakeY];

// verifica colisões com paredes

if(snakeX<=0||snakeX>30||snakeY<=0||snakeY>30) return gameOver=true;

// desenha cobra

for(let i=0;i<snakeBody.length;i++){

html+=`<div class="head" style="grid-area:${snakeBody[i][1]}/${snakeBody[i][0]}"></div>`;

if(i!==0 && snakeBody[0][1]===snakeBody[i][1] && snakeBody[0][0]===snakeBody[i][0]){

gameOver=true;

}

playBoard.innerHTML=html;

// Se todas as perguntas foram respondidas, termina o jogo

if(score >= questions.length) return handleGameOver();

}

function scorePoint(){

snakeBody.push([snakeY,snakeX]);

score++;

highScore = score>=highScore ? score : highScore;

localStorage.setItem("high-score",highScore);

scoreElement.innerText=`Score: ${score}`;

highScoreElement.innerText=`High Score: ${highScore}`;

}

function resetGame(){

gameOverScreen.style.display="none";

initVariables();

clearInterval(setIntervalId);

setIntervalId=setInterval(initGame,300); // velocidade da cobra

}

initVariables();

setIntervalId=setInterval(initGame,300);

document.addEventListener("keyup",changeDirection);

</script>

</body>

</html>

<!DOCTYPE html>

<head>

<title>Snake Quiz</title>

<style>

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700&display=swap');

* { margin:0; padding:0; box-sizing:border-box; font-family:'Open Sans',sans-serif; }

body { display:flex; align-items:center; justify-content:center; min-height:100vh; background:#E3F2FD; }

.wrapper {

width:65vmin; height:75vmin; display:flex; overflow:hidden; flex-direction:column; justify-content:center;

border-radius:5px; background:#293447; box-shadow:0 20px 40px rgba(52,87,220,0.2); position:relative;

}

.game-details {

color:#B8C6DC; font-weight:500; font-size:1.1rem; padding:10px 20px;

display:flex; justify-content:space-between; align-items:center;

}

.question {

font-weight:bold;

white-space: normal; /* Permite que o texto quebre a linha */

text-align: center;

line-height: 1.2;

flex: 1; /* Permite que o texto ocupe o espaço disponível */

}

.play-board {

flex:1;

display:grid; background:#212837; grid-template:repeat(30,1fr)/repeat(30,1fr);

}

.play-board .food-green { background:#00FF00; }

.play-board .food-yellow { background:#FF0000; }

.play-board .head {

background-image: url('https://cdn-icons-png.flaticon.com/512/616/616554.png');

background-size: cover;

background-position: center;

background-repeat: no-repeat;