Ideias e jogos códigos e jogos completos;

CÓDIGO FONTE JOGO DA GLÓRIA;

<!DOCTYPE html>

<html>

<head>

<title>Jogo da Glória</title>

<style>

body {

text-align: center;

}

button {

margin: 20px;

padding: 10px 20px;

}

pre{

color:purple;

}

h1{

color:red;

}

pre1{

color:#8B4513;

}

</style>

<pre>

Aqui programei uma versão basica,

do jogo da Glória;

Sem tabuleiro, mas jogando um dado;

a ver quem primeiro cumpre a sua tarefa;

</pre>

</head>

<body>

<h1>Jogo da Glória</h1>

<button id="rollButton" onclick="rollDice()">Jogar dado</button>

var currentPosition = 0;

var winningPosition = 10; // Posição em que o jogador precisa chegar para vencer

function rollDice() {

var diceValue = Math.floor(Math.random() * 6) + 1;

var resultElement = document.getElementById("result");

resultElement.innerHTML = "Você jogou um " + diceValue + "!" + getEducationalMessage(diceValue);

currentPosition += diceValue; // Move o jogador na posição equivalente ao valor do dado

if (currentPosition >= winningPosition) {

resultElement.innerHTML += "<br>Parabéns, você cumpriu a sua tarefa;";

document.getElementById("rollButton").disabled = true; // Desabilita o botão de jogar o dado após ganhar

} else {

resultElement.innerHTML += "<br>Você está na posição " + currentPosition;

}

function getEducationalMessage(diceValue) {

switch(diceValue) {

case 1:

return "Você aprendeu sobre matemática básica!";

case 2:

return "Você aprendeu sobre ciências naturais!";

case 3:

return "Você aprendeu sobre história!";

case 4:

return "Você aprendeu sobre geografia!";

case 5:

return "Você aprendeu sobre línguas!";

case 6:

return "Você aprendeu sobre arte!";

default:

return "";

}

</script>

<pre1>

O jogo retorna uma frase educacional;

Cada vez que o dado é jogado;

Até você cumprir a sua tarefa;

</body>

</pre1>

</html>

Código do programa;

<!DOCTYPE html>

<html>

<head>

<title>Jogo de Incentivo Emocional</title>

<style>

#verse {

font-size: 24px;

text-align: center;

margin: 50px;

}

#button {

font-size: 18px;

padding: 10px 20px;

margin: 20px;

background-color: #4CAF50;

color: white;

border: none;

cursor: pointer;

}

pre{

color:blue;

}

.blink {

animation: blink 1s steps(1, end) infinite;

}

@keyframes blink {

0% {

opacity: 1;

}

50% {

opacity: 0;

}

100% {

opacity: 1;

}

</style>

<pre>

AQUI CRIEI UM JOGO SIMPLES;

Cada vez que você clica no botão;

Gera uma frase emocional;

E com um pouco de java script;

Criamos uma borda na imagem;

</pre>

</head>

<body>

<h1>Jogo de Incentivo Emocional</h1>

<p>Clique no botão para gerar um verso ou frase de incentivo emocional:</p>

<button id="button" onclick="generateVerse()">Gerar</button>

// Array de versos e frases de incentivo emocional

var verses = [

"Você é mais forte do que pensa.",

"Acredite em si mesmo, você é capaz.",

"Sua jornada importa, não desista.",

"Lembrar-se de como você superou desafios no passado pode lhe dar força para enfrentar os desafios que você está enfrentando agora.",

"Você é único e especial, valorize-se.",

"A felicidade está no caminho, não no destino.",

"A vida é cheia de altos e baixos, aproveite os altos e aprenda com os baixos.",

"Você tem o poder de transformar sua vida.",

"Acredite no seu potencial, você pode conquistar qualquer coisa.",

"Você merece todo o amor e alegria que o mundo tem a oferecer."

];

// Função para gerar um verso ou frase aleatoriamente

function generateVerse() {

var index = Math.floor(Math.random() * verses.length); // Gera um índice aleatório

var verseElement = document.getElementById("verse");

verseElement.innerHTML = verses[index]; // Exibe o verso ou frase no elemento p com id "verse"

}

const img = document.images[0];

img.style.border = "20px solid blue";

</script>

<p>

<span class="blink">Feliz 2024<br>seja feliz por favor;</span>-182

</p>

</body>

</html>