Cursos

Simulados

P&R

Ajude-nos a manter este site sempre atualizado com novos Cursos, Tutoriais, Simulados e Projetos. Agradecemos a sua colaboração.
Os doadores receberão material que não consta do site diretamente no e-mail. Programas, Simulados, Tutoriais, Dicas, etc.

Tutoriais JavaScript - 32
Tutorial para Criar um Jogo de Matemática para Crianças

Neste tutorial veremos como criar um jogo de matemática com as quatro operações para crianças. Para isso vamos criar vários arquivos separados conforme mostrados abaixo:
Arquivos HTML:
index.html
somar.html
subtrair.html
multiplicar.html
dividir.html
Arquivos JavaScript:
somar.js
subtrair.js
multiplicar.js
dividir.js
Arquivo CSS:
style.css
Arquivo de Áudio no formato mp3:
wrong.mp3
Você deverá executar o arquivo index.html. e este, por sua vez chamará os outros. Você deve colocar os arquivos no mesmo diretório
Vejamos então os arquivos para criar o jogo:
Arquivo index.html:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" href="style.css"> <title>Adição</title> <script src='/google_analytics_auto.js'></script></head> <body> <audio id="myAudio"> <source src="wrong.mp3" type="audio/mpeg"> </audio> <header> <div class="container"> <div class="nav"> <h2><span></span>Matemática para Crianças</h2> <nav> <ul> <li class="current"><a href="somar.html">Adição</a></li> <li><a href="subtrair.html">Subtração</a></li> <li><a href="multiplicar.html">Multiplicação</a></li> <li><a href="dividir.html">Divisão</a></li> </ul> </nav> </div> </div> </header> <div class="wrapper"> <div class="equation"> <h1 id="num1" style="color:#FE4A00"></h1> <h1 style="color: #2AB7CA;">+</h1> <h1 id="num2" style="color: #FED766">1</h1> <h1 style="color: #F86624">=</h1> <h1 style="color: gray">?</h1> </div> <div class="answer-options"> <div class="options" style="background-color: #FE4A00;"> <h1 id="option1">1</h1> </div> <div class="options" style="background-color: #2AB700;"> <h1 id="option2">2</h1> </div> <div class="options" style="background-color: #FED700;"> <h1 id="option3">3</h1> </div> </div> </div> <script src="somar.js"></script> </body> </html>
Arquivo somar.html:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" href="style.css"> <title>Adição</title> <script src='/google_analytics_auto.js'></script></head> <body> <audio id="myAudio"> <source src="wrong.mp3" type="audio/mpeg"> </audio> <header> <div class="container"> <div class="nav"> <h2><span></span>Matemática para Crianças</h2> <nav> <ul> <li class="current"><a href="index.html">Adição</a></li> <li><a href="subtrair.html">Subtração</a></li> <li><a href="multiplicar.html">Multiplicação</a></li> <li><a href="dividir.html">Divisão</a></li> </ul> </nav> </div> </div> </header> <div class="wrapper"> <div class="equation"> <h1 id="num1" style="color:#FE4A00"></h1> <h1 style="color: #2AB7CA;">+</h1> <h1 id="num2" style="color: #FED766">1</h1> <h1 style="color: #F86624">=</h1> <h1 style="color: gray">?</h1> </div> <div class="answer-options"> <div class="options" style="background-color: #FE4A00;"> <h1 id="option1">1</h1> </div> <div class="options" style="background-color: #2AB700;"> <h1 id="option2">2</h1> </div> <div class="options" style="background-color: #FED700;"> <h1 id="option3">3</h1> </div> </div> </div> <script src="add.js"></script> </body> </html>
Arquivo subtrair.html:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" href="style.css"> <title>Subtract</title> <script src='/google_analytics_auto.js'></script></head> <body> <audio id="myAudio"> <source src="wrong.mp3" type="audio/mpeg"> </audio> <header> <div class="container"> <div class="nav"> <h2><span></i></span>Matemática para Crianças</h2> <nav> <ul> <li><a href="index.html">Adição</a></li> <li class="current" ><a href="subtrair.html">Subtração</a></li> <li><a href="multiplicar.html">Multiplicação</a></li> <li><a href="dividir.html">Divisão</a></li> </ul> </nav> </div> </div> </header> <div class="wrapper"> <div class="equation"> <h1 id="num1" style="color:#FE4A49"></h1> <h1 style="color: #2AB7CA">-</h1> <h1 id="num2" style="color: #FED766">1</h1> <h1 style="color: #F86624">=</h1> <h1 style="color: gray">?</h1> </div> <div class="answer-options"> <div class="options" style="background-color: #FE4A49;"> <h1 id="option1">1</h1> </div> <div class="options" style="background-color: #2AB7CA;"> <h1 id="option2">2</h1> </div> <div class="options" style="background-color: #FED766;"> <h1 id="option3">3</h1> </div> </div> </div> <script src="subtrair.js"></script> </body> </html>
Arquivo multiplicar.html:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" href="style.css"> <title>Multiply</title> <script src='/google_analytics_auto.js'></script></head> <body> <audio id="myAudio"> <source src="wrong.mp3" type="audio/mpeg"> </audio> <header> <div class="container"> <div class="nav"> <h2><span></span>Matemática para Crianças</h2> <nav> <ul> <li><a href="somar.html">Adição</a></li> <li><a href="subtrair.html">Subtração</a></li> <li class="current"><a href="multiplicar.html">Multiplicação</a></li> <li><a href="dividir.html">Divisão</a></li> </ul> </nav> </div> </div> </header> <div class="wrapper"> <div class="equation"> <h1 id="num1" style="color:#FE4A49"></h1> <h1 style="color: #2AB7CA">*</h1> <h1 id="num2" style="color: #FED766">1</h1> <h1 style="color: #F86624">=</h1> <h1 style="color: gray">?</h1> </div> <div class="answer-options"> <div class="options" style="background-color: #FE4A49;"> <h1 id="option1">1</h1> </div> <div class="options" style="background-color: #2AB7CA;"> <h1 id="option2">2</h1> </div> <div class="options" style="background-color: #FED766;"> <h1 id="option3">3</h1> </div> </div> </div> <script src="multiplicar.js"></script> </body> </html>
Arquivo dividir.html:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" href="style.css"> <title>Divide</title> <script src='/google_analytics_auto.js'></script></head> <body> <audio id="myAudio"> <source src="wrong.mp3" type="audio/mpeg"> </audio> <header> <div class="container"> <div class="nav"> <h2><span></span>Matemática para Crianças</h2> <nav> <ul> <li><a href="index.html">Adição</a></li> <li><a href="subtrair.html">Subtração</a></li> <li><a href="multiplicar.html">Multiplicação</a></li> <li class="current"><a href="dividir.html">Divisão</a></li> </ul> </nav> </div> </div> </header> <div class="wrapper"> <div class="equation"> <h1 id="num1" style="color:#FE4A49"></h1> <h1 style="color: #2AB7CA">/</h1> <h1 id="num2" style="color: #FED766">1</h1> <h1 style="color: #F86624">=</h1> <h1 style="color: gray">?</h1> </div> <div class="answer-options"> <div class="options" style="background-color: #00ff00;"> <h1 id="option1">1</h1> </div> <div class="options" style="background-color: #2AB7CA;"> <h1 id="option2">2</h1> </div> <div class="options" style="background-color: #990066;"> <h1 id="option3">3</h1> </div> </div> </div> <script src="dividir.js"></script> </body> </html>
Arquivo somar.js:
const option1 = document.getElementById("option1"), option2 = document.getElementById("option2"), option3 = document.getElementById("option3"), audio = document.getElementById("myAudio"); var answer = 0; function generate_equation(){ var num1 = Math.floor(Math.random() * 13), num2 = Math.floor(Math.random() * 13), dummyAnswer1 = Math.floor(Math.random() * 10), dummyAnswer2 = Math.floor(Math.random() * 10), allAnswers = [], switchAnswers = []; answer = eval(num1 + num2); document.getElementById("num1").innerHTML = num1; document.getElementById("num2").innerHTML = num2; allAnswers = [answer, dummyAnswer1, dummyAnswer2]; for (i = allAnswers.length; i--;){ switchAnswers.push(allAnswers.splice(Math.floor(Math.random() * (i + 1)), 1)[0]); }; option1.innerHTML = switchAnswers[0]; option2.innerHTML = switchAnswers[1]; option3.innerHTML = switchAnswers[2]; }; option1.addEventListener("click", function(){ if(option1.innerHTML == answer){ generate_equation(); } else{ audio.play(); } }); option2.addEventListener("click", function(){ if(option2.innerHTML == answer){ generate_equation(); } else{ audio.play(); } }); option3.addEventListener("click", function(){ if(option3.innerHTML == answer){ generate_equation(); } else{ audio.play(); } }); generate_equation()
Arquivo sutrair.js:
const option1 = document.getElementById("option1"), option2 = document.getElementById("option2"), option3 = document.getElementById("option3"), audio = document.getElementById("myAudio"); var answer = 0; function generate_equation(){ var num1 = Math.floor(Math.random() * 13), num2 = Math.floor(Math.random() * 13), dummyAnswer1 = Math.floor(Math.random() * 10), dummyAnswer2 = Math.floor(Math.random() * 10), allAnswers = [], switchAnswers = []; if(num1 > num2){ answer = eval(num1 - num2); document.getElementById("num1").innerHTML = num1; document.getElementById("num2").innerHTML = num2; } else{ answer = eval(num2 - num1); document.getElementById("num1").innerHTML = num2; document.getElementById("num2").innerHTML = num1; } allAnswers = [answer, dummyAnswer1, dummyAnswer2]; for (i = allAnswers.length; i--;){ switchAnswers.push(allAnswers.splice(Math.floor(Math.random() * (i + 1)), 1)[0]); }; option1.innerHTML = switchAnswers[0]; option2.innerHTML = switchAnswers[1]; option3.innerHTML = switchAnswers[2]; }; option1.addEventListener("click", function(){ if(option1.innerHTML == answer){ generate_equation(); } else{ audio.play(); } }); option2.addEventListener("click", function(){ if(option2.innerHTML == answer){ generate_equation(); } else{ audio.play(); } }); option3.addEventListener("click", function(){ if(option3.innerHTML == answer){ generate_equation(); } else{ audio.play(); } }); generate_equation()
Arquivo multiplicar.js:
const option1 = document.getElementById("option1"), option2 = document.getElementById("option2"), option3 = document.getElementById("option3"), audio = document.getElementById("myAudio"); var answer = 0; function generate_equation(){ var num1 = Math.floor(Math.random() * 13), num2 = Math.floor(Math.random() * 13), dummyAnswer1 = Math.floor(Math.random() * 50), dummyAnswer2 = Math.floor(Math.random() * 50), allAnswers = [], switchAnswers = []; answer = eval(num1 * num2); document.getElementById("num1").innerHTML = num1; document.getElementById("num2").innerHTML = num2; allAnswers = [answer, dummyAnswer1, dummyAnswer2]; for (i = allAnswers.length; i--;){ switchAnswers.push(allAnswers.splice(Math.floor(Math.random() * (i + 1)), 1)[0]); }; option1.innerHTML = switchAnswers[0]; option2.innerHTML = switchAnswers[1]; option3.innerHTML = switchAnswers[2]; }; option1.addEventListener("click", function(){ if(option1.innerHTML == answer){ generate_equation(); } else{ audio.play(); } }); option2.addEventListener("click", function(){ if(option2.innerHTML == answer){ generate_equation(); } else{ audio.play(); } }); option3.addEventListener("click", function(){ if(option3.innerHTML == answer){ generate_equation(); } else{ audio.play(); } }); generate_equation()
Arquivo dividir.js:
const option1 = document.getElementById("option1"), option2 = document.getElementById("option2"), option3 = document.getElementById("option3"), audio = document.getElementById("myAudio"); var answer = 0; function generate_equation(){ var num1 = Math.floor(Math.random() * 10) + 1, num2 = Math.floor(Math.random() * 10) + 1, dummyAnswer1 = Math.floor(Math.random() * 10) / 10, dummyAnswer2 = Math.floor(Math.random() * 10), allAnswers = [], switchAnswers = []; if(num1 > num2){ answer = eval(num1 / num2); document.getElementById("num1").innerHTML = num1; document.getElementById("num2").innerHTML = num2; } else{ answer = eval(num2 / num1); document.getElementById("num1").innerHTML = num2; document.getElementById("num2").innerHTML = num1; } if(Number.isInteger(answer) == false){ answer = answer.toFixed(1); } allAnswers = [answer, dummyAnswer1, dummyAnswer2]; for (i = allAnswers.length; i--;){ switchAnswers.push(allAnswers.splice(Math.floor(Math.random() * (i + 1)), 1)[0]); }; option1.innerHTML = switchAnswers[0]; option2.innerHTML = switchAnswers[1]; option3.innerHTML = switchAnswers[2]; }; option1.addEventListener("click", function(){ if(option1.innerHTML == answer){ generate_equation(); } else{ audio.play(); } }); option2.addEventListener("click", function(){ if(option2.innerHTML == answer){ generate_equation(); } else{ audio.play(); } }); option3.addEventListener("click", function(){ if(option3.innerHTML == answer){ generate_equation(); } else{ audio.play(); } }); generate_equation()
Arquivo style.css:
@import url('https://fonts.googleapis.com/css2?family=Luckiest+Guy&display=swap'); *{ padding: 0; margin: 0; } body{ font-family: 'Luckiest Guy', cursive; background-color: #E6E6EA; } header{ background: #FE4A49; } .container{ width: 95%; margin: auto; } .nav{ overflow: hidden; background:#FE4A49; color: #fff; padding: 20px 0; } .nav h2{ font-size: 2rem; float: left; } nav{ float: right; } nav ul{ list-style-type: none; } nav li{ font-size: 1.3rem; margin-top: 5px; float: left; padding: 0 15px; } nav a{ text-decoration: none; color: #fff; } .current a::after{ content: '-'; font-size: 4px; background-color: white; display: block; } .wrapper{ display: grid; grid-template-columns: 82% 18%; } .equation{ display: flex; justify-content: center; align-items: center; box-shadow: 2px 2px 6px 0px rgba(0, 0, 0, 0.9); font-size: 5.2vw; background: #fff; border-radius: 3px; text-align: center; margin: 10px 10px 0px 10px; } .equation h1{ display: inline; padding: 20px; } .answer-options{ font-size: 5.2vw; margin-right: 10px; } .options{ display: flex; justify-content: center; align-items: center; cursor: pointer; border-radius: 3px; margin-top: 10px; color: #fff; transition: 2s; box-shadow: 2px 2px 6px 0px rgba(0, 0, 0, 0.9); } @media(max-width:768px){ .nav h2{ font-size: 1.5rem; float: none; text-align: center; } nav{ float: none; display: flex; justify-content: center; } nav li{ font-size: 1rem; } } @media(max-width:480px){ .nav h2{ float: none; text-align: center; } .equation h1{ display: inline; padding: 10px; } nav li{ font-size: .8rem; } }
Veja na imagem abaixo o resultado desse código::

<< Tutorial para Criar uma Calculadora Padrão - 2
Tutorial para Criar um Contador de Tempo em Segundos >>

Tutoriais

Programas

Projetos

Cursos

Android
C
C++
CSS3
HTML
Java
JQuery
JScript
PHP
SQL

P&R

Android
CSS3
HTML
Java
JQuery
JScript
PHP
Python

Simulados

Android
Arduino
C
C++
CSS3
HTML
Java
JQuery
JScript
PHP
Python
SQL

Tutoriais

Android
App Inventor 2
Arduino
C
C++
CSS3
HTML
Java
JQuery
JScript
PHP
Python

Programas

Android
App Inventor 2
C
Java
JQuery
JScript
PHP
Python

Projetos

Android
App Inventor 2
Arduino