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