<!
DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>O Dilema do Prisioneiro</title>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
flex-direction: column;
align-items: center;
padding: 20px;
background-color: #f4f4f9;
}
h1 {
color: #333;
margin-bottom: 5px;
}
p#instrucoes {
color: #555;
margin-bottom: 30px;
text-align: center;
max-width: 600px;
}
.matrix-container {
width: 100%;
max-width: 500px;
margin-bottom: 30px;
border: 2px solid #ccc;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
.matrix {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
text-align: center;
}
.cell, .header {
padding: 15px 10px;
border: 1px solid #ddd;
font-weight: bold;
}
.header {
background-color: #e0e0e0;
}
.cell {
background-color: #fff;
font-weight: normal;
}
.cell-content {
font-size: 1.1em;
color: #007bff;
}
.actions {
margin-bottom: 20px;
}
button {
padding: 12px 25px;
margin: 0 10px;
font-size: 16px;
cursor: pointer;
border: none;
border-radius: 5px;
transition: background-color 0.3s;
font-weight: bold;
}
#btn-cooperar {
background-color: #28a745;
color: white;
}
#btn-cooperar:hover {
background-color: #218838;
}
#btn-trair {
background-color: #dc3545;
color: white;
}
#btn-trair:hover {
background-color: #c82333;
}
#resultado {
margin-top: 30px;
padding: 20px;
border-radius: 8px;
background-color: #fff;
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
width: 100%;
max-width: 500px;
text-align: left;
border-left: 5px solid #007bff;
display: none; /* Inicialmente oculto */
}
#resultado h2 {
margin-top: 0;
color: #007bff;
}
.result-detail {
margin: 10px 0;
font-size: 1.1em;
}
.result-score {
font-weight: bold;
color: #dc3545; /* Cor de destaque para a pontuação */
}
</style>
</head>
<body>
<h1>O Dilema do Prisioneiro</h1>
<p id="instrucoes">
Você e seu parceiro foram presos e estão incomunicáveis. Sua escolha
depende do que você acha que ele fará. Escolha **Cooperar** (Ficar Calado) ou
**Trair** (Confessar).
<br>O objetivo é **maximizar sua própria pontuação** (quanto maior,
melhor).
</p>
<div class="matrix-container">
<p style="text-align: center; background-color: #ddd; padding: 10px;
margin: 0;">Matriz de Pontuações (Você, Oponente)</p>
<div class="matrix">
<div class="header" style="grid-column: span 2; border-bottom:
none;">**Sua Escolha**</div>
<div class="header" style="background-color: #f0f0f0;"> </div>
<div class="header">Oponente Coopera</div>
<div class="header">Oponente Trai</div>
<div class="header">Você Coopera</div>
<div class="cell"><span class="cell-content">(3, 3)</span></div>
<div class="cell"><span class="cell-content">(0, 5)</span></div>
<div class="header">Você Trai</div>
<div class="cell"><span class="cell-content">(5, 0)</span></div>
<div class="cell"><span class="cell-content">(1, 1)</span></div>
</div>
</div>
<div class="actions">
<button id="btn-cooperar" onclick="jogar('Coopera')">COOPERAR (Ficar
Calado)</button>
<button id="btn-trair" onclick="jogar('Trai')">TRAIR (Confessar)</button>
</div>
<div id="resultado">
<h2>Resultado da Rodada</h2>
<div class="result-detail" id="sua-escolha"></div>
<div class="result-detail" id="escolha-oponente"></div>
<hr>
<div class="result-detail">Sua Pontuação Final: <span class="result-score"
id="sua-pontuacao"></span></div>
<div class="result-detail">Pontuação do Oponente: <span id="pontuacao-
oponente"></span></div>
<p id="analise" style="font-style: italic;"></p>
<button onclick="resetarJogo()">Jogar Novamente</button>
</div>
<script>
// Definição da Matriz de Payoffs: [Sua Pontuação, Pontuação Oponente]
// [Sua Escolha] -> [Oponente Coopera, Oponente Trai]
const PAYOFFS = {
'Coopera': {
'Coopera': [3, 3], // (R, R) - Recompensa Mútua
'Trai': [0, 5] // (S, T) - Perdedor ("Sucker"), Tentação
},
'Trai': {
'Coopera': [5, 0], // (T, S) - Tentação, Perdedor
'Trai': [1, 1] // (P, P) - Punição Mútua
}
};
// Estratégia do Oponente Simulado (Jogador 2)
// Para um jogo único, a estratégia dominante e racional é sempre TRAIR
(Confessar).
const OPONENTE_ESTRATEGIA = 'Trai';
function jogar(escolhaUsuario) {
// Desabilita os botões para evitar cliques múltiplos
[Link]('btn-cooperar').disabled = true;
[Link]('btn-trair').disabled = true;
// Determina a escolha do Oponente (sempre Trair neste modelo simples)
const escolhaOponente = OPONENTE_ESTRATEGIA;
// Calcula o resultado
const [pontuacaoUsuario, pontuacaoOponente] = PAYOFFS[escolhaUsuario]
[escolhaOponente];
// Exibe os resultados na tela
[Link]('sua-escolha').innerHTML = `Sua Escolha:
<strong>${[Link]()}</strong>`;
[Link]('escolha-oponente').innerHTML = `Escolha do
Oponente: <strong>${[Link]()}</strong>`;
[Link]('sua-pontuacao').textContent = pontuacaoUsuario
+ ' pontos';
[Link]('pontuacao-oponente').textContent =
pontuacaoOponente + ' pontos';
// Análise do resultado
let analiseTexto = '';
if (escolhaUsuario === 'Trai' && escolhaOponente === 'Trai') {
analiseTexto = "Resultado de Nash. Ambos agiram no interesse
próprio e alcançaram o resultado subótimo (1, 1).";
[Link]('sua-pontuacao').[Link] = '#dc3545';
} else if (escolhaUsuario === 'Coopera' && escolhaOponente ===
'Coopera') {
analiseTexto = "Resultado Ótimo. A cooperação mútua levou ao melhor
resultado coletivo (3, 3).";
[Link]('sua-pontuacao').[Link] = '#28a745';
} else if (escolhaUsuario === 'Coopera' && escolhaOponente === 'Trai')
{
analiseTexto = "Você foi traído! Você perdeu tudo (0) enquanto o
oponente teve a Tentação máxima (5).";
[Link]('sua-pontuacao').[Link] = '#000000';
} else if (escolhaUsuario === 'Trai' && escolhaOponente === 'Coopera')
{
analiseTexto = "Você traiu! Você obteve o máximo de Tentação (5) e
o oponente obteve o mínimo (0).";
[Link]('sua-pontuacao').[Link] = '#dc3545';
}
[Link]('analise').textContent = analiseTexto;
// Mostra o bloco de resultados
[Link]('resultado').[Link] = 'block';
}
function resetarJogo() {
// Habilita os botões de volta
[Link]('btn-cooperar').disabled = false;
[Link]('btn-trair').disabled = false;
// Oculta o resultado e limpa o texto
[Link]('resultado').[Link] = 'none';
[Link]('sua-pontuacao').[Link] = '#dc3545'; //
Volta à cor padrão
}
</script>
</body>
</html>