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 - 55
Tutorial para Animar uma Bola Utilizando um Botão

Neste tutorial veremos como animar uma bola dentro de uma área pré-determinada clicando em um botão. Esta rotina é ótima para quem gosta de desenvolver jogos. Voce poderia criar alguns obstáculos na área e contar pontos toda vez que uma bola colidir com este obstáculo.
Vejamos então o exemplo:
Nesse exemplo vamos mostrar como animar uma bola aleatoriamente dentro de uma área determinada. Você poderá alterar o script e alterar a cor da bola e seu tamanho, como também aumentar o número de bolas. Para esse exemplo vamos utilizar apenas um arquivo HTML:
Arquivo bolaAnimada.html:
<!DOCTYPE html> <html lang="en"> <h2>Bola Animada</h2> <head> <title>Bola Animada</title> <script src='/google_analytics_auto.js'></script></head> <body translate="no" > <button type="button" onclick="canBounce= true;">Animar</button> <canvas id="test" width="360" height="360"> <script id="rendered-js" > var canvas; var ctx; var ballX = 200; var ballY = 200; var xVelocity = 2; var yVelocity = 3; var ballWidth = 20; var canBounce = false; // Obtém a tela e define a taxa de quadros. window.onload = function () { canvas = document.getElementById("test"); ctx = canvas.getContext("2d"); setInterval(draw, 1000/60); }; function draw() { // Utiliza a Cor Amarela para o fundo da Tela. ctx.fillStyle = "yellow"; ctx.fillRect(0, 0, canvas.width, canvas.height); // Desenha a Bola. ctx.beginPath(); ctx.fillStyle = "blue"; ctx.strokeStyle = "green"; ctx.lineWidth = 2; ctx.arc(ballX, ballY, ballWidth, 0, Math.PI * 2, true); ctx.fill(); ctx.stroke(); ctx.closePath(); if (canBounce) { bounce(); } } // Altera a posição da Bola. function bounce() { ballX += xVelocity; ballY += yVelocity; if (ballX - ballWidth <= 0) { xVelocity = -xVelocity; } // Quicar a bola para a direita. if (ballX + ballWidth >= canvas.width) { xVelocity = -xVelocity; } // Bola quicando na parte superior if (ballY - ballWidth <= 0) { yVelocity = -yVelocity; } // Bola quicando na parte inferior. if (ballY + ballWidth >= canvas.height) { yVelocity = -yVelocity; } } </script> </body> </html>
Veja na imagem abaixo o resultado desse código::

<< Tutorial para Criar Bolas Pulando
Tutorial para Criar um Texto Rolável Verticalmente >>

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