Jogo de formas INICIANDO NA TECNOLOGIA INCLUSIVA
Este jogo tem como objetivo ajudar no desenvolvimento e na diversão de pessoas autistas. Ele pode ser usado como uma atividade terapêutica ou como uma forma de entretenimento.
O jogo trabalha com a identificação e o reconhecimento de diferentes formas geométricas, além de estimular a coordenação motora e a concentração. Ao clicar em uma forma, o jogador recebe um feedback visual, com a mudança de cor da forma, o que ajuda a reforçar a ação realizada.
Além disso, o jogo também pode ser personalizado de acordo com as preferências e necessidades do jogador autista. Por exemplo, é possível adicionar sons ou animações para tornar o jogo mais estimulante.
No contexto terapêutico, o jogo pode ser usado para melhorar habilidades cognitivas, como a percepção visual e a memória. Ele também pode ajudar a desenvolver habilidades sociais, como a interação e a comunicação, se for jogado em grupo.
Em resumo, o jogo serve como uma ferramenta de estímulo e diversão para pessoas autistas, auxiliando no desenvolvimento de habilidades cognitivas, motoras e sociais.
Que tal me ajudarem em mudanças e melhorarmos..???
Segue o codigo
<!DOCTYPE html>
<html>
<head>
<title>Jogo para Autistas</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
#game-container {
width: 400px;
height: 400px;
border: 5px solid black;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-content: center;
}
.shape {
width: 100px;
height: 100px;
margin: 10px;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
font-size: 24px;
color: red;
font-weight: bold;
}
.circle {
border-radius: 50%;
}
.triangle {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid;
}
.rectangle {
width: 0;
height: 0;
border-right: 50px solid transparent;
border-bottom: 100px solid;
border-left: 50px solid;
margin-bottom: 20px;
}
.score {
text-align: center;
font-size: 24px;
margin-top: 20px;
}
</style>
</head>
<body>
<div id="game-container">
<div class="shape circle" style="background-color: red;" onclick="checkAnswer(this)"></div>
<div class="shape square" style="background-color: blue;" onclick="checkAnswer(this)"></div>
<div class="shape triangle" style="background-color: green;" onclick="checkAnswer(this)"></div>
<div class="shape rectangle" style="background-color: yellow;" onclick="checkAnswer(this)"></div>
</div>
<div class="score">Pontuação: <span id="score">0</span></div>
<script>
var score = 0;
function checkAnswer(shape) {
shape.style.backgroundColor = "green";
score++;
document.getElementById("score").textContent = score;
setTimeout(function() {
shape.style.backgroundColor = "";
}, 1000);
}
</script>
</body>
</html>
*INTERESSANTE NAO E MESMO?*
